Browser Support for CSS Page Numbers

Question

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.

Answer 1

I've been trying to implement paged media as well and have found, according to this Wikipedia page, that there's no browser support for margin boxes as yet. No wonder it wouldn't work!

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

See the table, Grammar and Rules, margin boxes section. Margin boxes are what's needed for page numbering as well as running headers and footers. Getting this implemented would save me the overhead of having to convert the printed media to PDF.

Answer 2

Not using @page, but I have gotten pure CSS page numbers to work in Firefox 20:

http://jsfiddle.net/okohll/QnFKZ/

To print, right click in the results frame (bottom right) and select

This Frame -> Print Frame...

The CSS is

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

and the HTML is

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