Page numbers with CSS/HTML

html css printing

78,856

Solution 1

Depending on your required browser support.

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

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.

78,856

Author by

balupton

Before I die, I wish to see everyone enabled to do what they love, share their love with the entire world, and live well. This is a big calling, and I'm chipping away at it steadily. This has worked well for me so far; for several years I was the most active Open-Source developer in Australia and one of the most prolific in the world; my technical projects have been used in some of the world's biggest web-sites/apps (Basecamp, Spotify, Ustream) and by some of the world's biggest companies (Microsoft, Adobe, GitHub, Atlassian), touching their millions of users; my non-technical projects have also seen adoption over the years. The key skill set I've used to accomplish this is my natural ability to quickly understand complex systems and simplify them in disruptive ways, a burning need to do good in the world, and an instinctive tenacity for always finding a way even in the most difficult of situations.

Updated on July 09, 2022

Comments

balupton almost 2 years

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.
balupton about 13 years

Thanks mate, will give that a go :) Any idea about browser support?
user3167101 about 13 years

@balupton Not sure, give Quirks Mode a look into :)
David Fritsch over 11 years

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.
werner about 11 years

Did anyone actually get the @page content displayed in an existing browser in the meantime? It looks like it just isn't implemented anywhere...
Oliver Kohll about 11 years

Not @page, but CSS page numbers in Firefox can work using display:table and counters - stackoverflow.com/questions/15797161/…
alex about 9 years

@daVe, @page margin boxes are no longer supported amongst major browsers, but I've confirmed that this solution will work in IE8.
philk over 8 years

@alex whats the replacement for @page margin boxes then now? It would really help to be able to print page numbers in IE11
James Toomey over 8 years

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.
gfels almost 5 years

These don't work in any major browsers as of now. :)
Alex almost 4 years

Any chance that this is working on major browsers now?