balupton balupton - 6 months ago 26
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

Depending on your required browser support.

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

Further reading: