How Can I Add Page Numbers to Printable Documents Using CSS and HTML?

Achieving Page Numbering with CSS and HTML for Printable Documents

Printing web pages often requires additional elements like a header, footer, and pagination for professional presentation. If you encounter the need to include page numbers within the footer, here's a solution using CSS and HTML.

Utilizing CSS Page Property:

The CSS @page rule provides extensive control over printed elements on a page. To add page numbers to the footer, you can specify the content to be displayed using the "@bottom-right" margin:

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

In this snippet:

• counter(page) represents the current page number.
• counter(pages) represents the total number of pages.

By combining these counters, the content of the footer will display the current page number and the total page count.

Browser Compatibility and Considerations:

The @page property is supported by all major modern browsers. However, it's important to note that older versions may not fully implement these features. The provided links in the answer offer additional resources and insights into CSS page numbering:

• 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/

The above is the detailed content of How Can I Add Page Numbers to Printable Documents Using CSS and HTML?. For more information, please follow other related articles on the PHP Chinese website!