44

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.

alex
  • 479,566
  • 201
  • 878
  • 984
balupton
  • 47,113
  • 32
  • 131
  • 182
  • Does this answer your question? [Browser Support for CSS Page Numbers](https://stackoverflow.com/questions/15797161/browser-support-for-css-page-numbers) – Goodword Dec 07 '19 at 05:33

2 Answers2

41

Depending on your required browser support. 

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

Further reading:

balupton
  • 47,113
  • 32
  • 131
  • 182
alex
  • 479,566
  • 201
  • 878
  • 984
  • 1
    Thanks mate, will give that a go :) Any idea about browser support? – balupton May 24 '11 at 11:54
  • @balupton Not sure, give Quirks Mode a look into :) – alex May 24 '11 at 12:14
  • 2
    I was looking more for the `@page` and `@bottom-right` pieces. I've used content and counter but haven't been able to get this to actually display anywhere, and can't find on caniuse or elsewhere where it should work for sure. – David Fritsch Apr 01 '13 at 21:53
  • Did anyone actually get the @page content displayed in an existing browser in the meantime? It looks like it just isn't implemented anywhere... – werner May 13 '13 at 12:31
  • Not @page, but CSS page numbers in Firefox can work using display:table and counters - http://stackoverflow.com/questions/15797161/browser-support-for-css-page-numbers/16651296#16651296 – Oliver Kohll May 20 '13 at 14:10
  • 5
    @daVe, `@page` margin boxes are [no longer supported](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Grammar_and_rules) amongst major browsers, but I've confirmed that this solution will work in IE8. – alex May 22 '15 at 17:47
  • 2
    @alex whats the replacement for `@page` margin boxes then now? It would really help to be able to print page numbers in IE11 – philk Nov 01 '15 at 00:55
  • 5
    These don't work in any major browsers as of now. :) – GeForce RTX 4090 Aug 30 '19 at 15:11
  • Any chance that this is working on major browsers now? – Alex Aug 11 '20 at 11:11
6

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.

Dorian
  • 22,759
  • 8
  • 120
  • 116
Page Notes
  • 119
  • 2
  • 5
  • 2
    As of 12/3/2015, the margin boxes like @bottom-center don't appear to be supported by the major browsers, as shown [here](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29). 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. – James Toomey Dec 03 '15 at 20:40