Browser Support For CSS Page Numbers

Browser Support for CSS Page Numbers

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);
    }
}

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

Page numbers with CSS/HTML

Depending on your required browser support.

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

Print page numbers on pages when printing html

As @page with pagenumbers don't work in browsers for now I was looking for alternatives.

I've found an answer posted by Oliver Kohll.

I'll repost it here so everyone could find it more easily:

For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.

The CSS is:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

And the HTML code is:

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

This way you can customize your page number by editing parametrs to #pageFooter. My example:

#pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

This trick worked for me fine. Hope it will help you.

Print page numbers for table of contents using CSS in Chrome

It looks like this is part of a new working draft of the CSS specification:

http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references

I doubt that there is any browser support yet...

Show page number on printing in CSS

As of 12/3/2015, the margin boxes like @bottom-center don't appear to
be supported by the major browsers, as shown here. If you search for
"@bottom-center" you'll see a whole lot of red "not supported" boxes.
When you search the web it sounds like they should work but in reality
they're not supported yet. Some elements of paged media work great,
like page-break-after, but not the margin boxes. Source

However, there seems to be a solutions that works in Firefox.

Browser Support For CSS Page Numbers