How Can I Add Page Numbers to My Website Printouts Using CSS and HTML?

Enriching Printouts with Page Numbers: A CSS/HTML Solution

The need to incorporate page numbers in printed website copies has emerged. To achieve this, we delve into the realm of CSS and HTML, providing guidance on adding headers, footers, and page numbers to printed outputs.

CSS Page Formatting with @page Rule

For enhanced browser compatibility, utilizing the @page rule offers flexibility and control over printed page elements. By enclosing the @bottom-right property within the @page block, users can specify the content that will appear in the footer of each page.

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

This configuration defines the content of the footer as the current page number followed by the total number of pages, displayed in the format "Page [current page number] of [total number of pages]".

Additional Resources for Exploration

To delve deeper into CSS page formatting and related practices, we recommend these references:

• [CSS3 Page Module](http://www.w3.org/TR/css3-page/)
• [Adding Page Numbers Using @page Property](http://www.intelligrape.com/blog/2010/08/20/add-page-number-using-page-property-of-css/)
• [PrinceXML Page Numbers Documentation](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 Printouts Using CSS and HTML?. For more information, please follow other related articles on the PHP Chinese website!