Page numbers with CSS/HTML

An interesting use case has popped up for us, we are requiring that when we print a website the printed copy will have a page header and footer, and inside the footer the page number.

Anyone got any idea how to achieve this?

Note: Browser version can be the latest of anything, clients are other web developers.

Solution 1:

Depending on your required browser support.

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

Further reading:

• http://www.w3.org/TR/css3-page/
• http://www.intelligrape.com/blog/2010/08/20/add-page-number-using-page-property-of-css/
• http://www.princexml.com/doc/6.0/page-numbers/

Solution 2:

There's a test page at http://www.princexml.com/howcome/2007/xtech/papers/output/0082-32/index.xhtml that includes the @page content code in its css file. I couldn't get it to work in current versions of IE, Chrome, or Firefox.