balupton balupton - 1 year ago 80
HTML Question

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.

Answer Source

Depending on your required browser support.

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

Further reading: