Can I display the number of the current page in the content?
Short answer: no.
That said, it can still be possible in some cases.
If you create a Powerpoint-like document where each page is fixed and content doesn't flow from one page to the next, you can use insert the page number using CSS counters.
Let's take the example of a portrait A4 page:
<div>Content of Page 1</div>
<div>Content of Page 2</div>
<div>Content of Page 3</div>
/* Initializes a counter named "page" with a value of 0 */
/* Also eliminates any surrounding space to ensure pages are correctly sized */
/* A portrait A4 page is 793x1120px */
/* Hides any overflow to prevent any print content zoom from happening */
/* Always positions the page number at the bottom right of the page */
/* Adds 1 to the current value of the "page" counter */
/* Then interts its value inside the .page-number div */
Here is what the result will look like.
You can add the page number in the content if you're sure that the content will never move and if all your pages are fixed.
The CSS counter technique is especially useful if
- You want the page number to stay consistent even when the actual number of pages changes
- Some pages are hidden/shown under certain conditions
- Some pages are generated in a loop
It's just more robust overall and does not require that much more code.