CSS page x of y for @media print

Question

I'll preface this question by saying I know this question has been asked before, but all the answers I can find for these appear to reference an obsolete solution that no longer works (At least in Firefox 56 [64 bit])

The obsolete method is that there used to be an automatically instantiated CSS counter named pages, so a simple bit of CSS generated from this SASS:

footer {
    position: fixed;
    bottom: 0;
    left: 20px;

    &:after {
        counter-increment: page;
        content: "Page " counter(page) " of " counter(pages);
    }
}

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

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

@page {
    counter-increment: maxpage;
}

However this also returns 0 when used in my footer.

Is there any reasonably cross-browser friendly means of getting this functionality?

Answer 1

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

@page { counter-increment: page }

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

For example with this CSS rule:

#pageNumber { content: counter(page) }

and this piece of HTML:

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

You can use the current page number counter as content in the HTML document. You can even go further. Say you want to start your page number at 10. You can then use the @page:first rule to reset the counter for the first page to value 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 increment the counter. This results in a counter value of 10 for the first page, 11 for the second and so on.

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 real world only PrinceXML supports this.