Why Can't I Print Page Numbers in HTML and What's the Workaround?

Can't Print Page Numbers on HTML Pages?

Problem Description:

Despite researching extensively, page numbers fail to appear when printing an HTML document.

CSS Code Used:

@page {
  margin: 10%;
  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

The @page rule was attempted both inside and outside the @media all block to no avail.

Solution:

Due to the limitations of web browsers, implementing page numbers using @page is not feasible. An alternative solution is provided by Oliver Kohll, which utilizes table-based formatting in CSS without relying on @page:

CSS:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML:

<div>

Customization:

The appearance of the page numbers can be customized by modifying the properties of #pageFooter, such as text formatting, positioning, and background styling.

The above is the detailed content of Why Can't I Print Page Numbers in HTML and What's the Workaround?. For more information, please follow other related articles on the PHP Chinese website!