CSS x of y printable page @media

Question

I will predefine this question by saying that I know that this question was asked before, but all the answers I can find for them refer to an outdated solution that no longer works (at least in Firefox 56 [64 bit]),

The deprecated method is that before there was an automatically generated CSS counter called pages , so a simple CSS bit created from this SASS:

 footer { position: fixed; bottom: 0; left: 20px; &:after { counter-increment: page; content: "Page " counter(page) " of " counter(pages); } } 

Used to accomplish what I want. Now it displays "Page [x] of 0".

I tried using this CSS bit to recreate my own max page counter:

 @page { counter-increment: maxpage; } 

However, this also returns 0 when used in my footer.

Are there any reasonably cross-browser tools to get this feature?

Answer 1

As in CSS3, you can specify counters in the @page rule. Here is an example:

 @page { counter-increment: page } 

The above rule tells the layout engine to create a counter called "page" (it is called a page by agreement, it can be anything). This counter is incremented for each page. As with any counter, you can use the current counter value anywhere in the document.

For example, using this CSS rule:

 #pageNumber { content: counter(page) } 

and this HTML snippet:

 <span id="pageNumber"></span> 

You can use the current page number counter as content in an HTML document. You can even go further. Suppose you want to start your page number at 10. Then you can use the @page rule: the first rule to reset for the first page to 9.

 @page { counter-increment: page } @page:first { counter-reset: page 9 } 

The combination of both rules will reset the counter for the first page to 9. Then for each page (including the first) it will increase the counter. This results in a counter value of 10 for the first page, 11 for the second, etc.

You can also use pure css

Example:

 @page { counter-increment: page; counter-reset: page 1; @top-right { content: "Page " counter(page) " of " counter(pages); } } 

... in theory. In the real world, only PrinceXML supports this.

Answer 2

Not using @page, but I got clean CSS page numbers to work in Firefox 20:

CSS:

 #content { display: table; } #pageFooter { display: table-footer-group; } #pageFooter:after { counter-increment: page; content: counter(page); } 

And the HTML code:

 <div id="content"> <div id="pageFooter">Page </div> multi-page content here... </div> 

It works on most major browsers.

Answer 3

Have you tried this one ?

 @page { @bottom-left { content: counter(page) "/" counter(pages); } }