How Can I Add Page Numbers to My Website\'s Print Output Using CSS?

Printing Page Numbers with CSS/HTML

When printing a website, adding a page header and footer with page numbers can enhance the document's readability and organization. To achieve this, CSS provides a powerful solution that enables the customization of the printed output.

To add a page header and footer, you can use the @page rule with the @bottom-right property. For example, the following CSS declaration will add page numbers to the bottom right corner of each printed page:

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

In this declaration:

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

By combining the content property with these counters, you can dynamically display the current page number out of the total page count.

Browser Support

The @page rule has varying browser support depending on its properties. Browsers like Chrome and Firefox fully support @bottom-right for page numbers. Internet Explorer requires a shim to implement this feature. It's recommended to check the latest browser support documentation for specific information.

Further Reading

For more detailed information and examples, refer to the following resources:

• W3C CSS Page Module: http://www.w3.org/TR/css3-page/
• Add Page Numbers Using CSS Page Property: http://www.intelligrape.com/blog/2010/08/20/add-page-number-using-page-property-of-css/
• Page Numbers in Prince XML: http://www.princexml.com/doc/6.0/page-numbers/

The above is the detailed content of How Can I Add Page Numbers to My Website\'s Print Output Using CSS?. For more information, please follow other related articles on the PHP Chinese website!