So I am aware of this option: Page numbers with CSS/HTML.
It seems by far to be the best way to add page numbers to a print version of a page, but I can't get any variation of this to work anywhere. I have tried on my Windows 7 machine in Chrome, Firefox, and IE9. Based on some of the links it looks like this may be supported in more proprietary software like Prince XML. Is this supported by web browsers for print versions?
I have tried making just a blank html file and in the head adding this between two style tags:
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
I have also simplified it even to just use content: "TEXT"; to see if I can get something to show up. Is this supported anywhere? By 'this' I'm specifically meaning the @page and @bottom-right tags, since I have gotten content to work many times.
This does not seem to work anymore. Appears it only worked for a short time and browser support was removed!
Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.
You can set your starting number to whatever, the default is 0.
Example:
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
Page media is not well supported by any major web browser, but is supported by specialized HTML to PDF generators such as Prince XML and WeasyPrint.