How Can I Add Page Numbers to Printed Webpages Using CSS and HTML?

Achieving Page Numbering in Printed Webpages Using CSS/HTML

You've encountered an intriguing requirement: adding page headers, footers, and page numbers to a printed website copy. This article explores solutions to assist you in this endeavor.

Utilizing CSS and HTML for Page Numbering

In CSS, the @page rule provides extensive control over page formatting, including page numbers. By defining a counter inside the @bottom-right rule, you can dynamically display page numbers on each printed page.

Here's a simple code snippet:

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

This code will place the page number in the bottom right corner of each page, formatted as "Page X of Y."

Browser Support

The CSS @page rule is supported by most modern browsers. If you need to support older browsers, consider using browser-specific techniques or third-party libraries.

Further Reading

For more information on page numbering in CSS and HTML, refer to the following resources:

• [CSS3 Page Module](http://www.w3.org/TR/css3-page/)
• [Using the 'page' Property in CSS](http://www.intelligrape.com/blog/2010/08/20/add-page-number-using-page-property-of-css/)
• [Page Numbers with PrinceXML](http://www.princexml.com/doc/6.0/page-numbers/)

Implementing these solutions will enable you to create printed website copies with customized page headers, footers, and page numbers, enhancing the readability and professionalism of these documents.

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