Print page numbers on pages when printing html

html

responsive-design

print-engineering

best-practices

byAlex Kataev·Mar 3, 2025

To smoothly add page numbers to printed HTML documents, take advantage of CSS counters. Apply the counter-reset property to the body and increase it with the counter-increment property on a specific page class. Show the page number using the content property:

@media print {
  body {
    counter-reset: pageNumber; // Like resetting an old-school pager, wow!
  }

  .page::after {
    counter-increment: pageNumber;  // Paging the next number, just like in a hospital!
    content: "Page " counter(pageNumber);
    text-align: right;
    padding: 5px;
  }
}

Simply encapsulate your page content with the <div class="page"></div> tags to activate the numbering:

<div class="page">First page content</div>
<div class="page">Second page content</div>

This code setup provides consecutive page numbers on each printed page, guaranteeing a sophisticated look for your printed works.

Expanding the CSS Counters Method

While the counter-increment and content properties provide a working solution, let's consider an ingenious method using the display: table for multi-page content and the :after pseudo-element for automatically incrementing page numbers.

body {
  counter-reset: page;
  display: table;
}

body::after {
  display: table-footer-group;
  counter-increment: page;
  content: "Page " counter(page);
}

This neat trick ensures that your page numbers are aligned appropriately and aren't impacted by page content.

Supporting All Browsers

Be aware, different browsers require varied approaches. Specific to Firefox 20+ versions, the solution would be:

@page {
  @bottom-center {
    content: counter(page, decimal-leading-zero); // Because who doesn't love a good zero?
  }
}

This zeroes in 👀 your page numbers with leading zeros and places them center-stage at the bottom.

Accommodating Dynamic Content

For web pages that can change size in real-time, use window.onload to fire up a function that calculates the pages dynamically.

Using JavaScript and absolute positioned divs, create dynamic page numbers based on the document scrollHeight:

window.onload = function() {
  var pages = Math.ceil(document.body.scrollHeight / window.innerHeight);
  for(var i=0; i<pages; i++) {
    var pageNumberDiv = document.createElement('div');
    pageNumberDiv.style.position = "absolute";
    pageNumberDiv.style.top = "calc(" + (i+1) + "00vh - 50px)";  // "Calc()" is like a mini pocket calculator. Handy, isn't it? 
    pageNumberDiv.innerHTML = "Page " + (i+1);
    document.body.appendChild(pageNumberDiv);
  }
}

Once the document loads, prepare to see the magic ✨ of dynamic page numbers.

Print Features Across Browsers via Paged.js

For a more browser-friendly solution, consider Paged.js. This free polyfill enhances your HTML document's printing features:

Paged.registerHandlers(class extends Paged.Handler {
  constructor(chunker, polisher, caller) {
    super(chunker, polisher, caller); // Sounds like a cool superhero trio, doesn't it? 
  }
  
  afterRendered(pages) {
    pages.forEach(page => {
      let pageNumberDiv = document.createElement('div');
      pageNumberDiv.classList.add('page-number');
      pageNumberDiv.innerHTML = "Page " + page.position; // Like a GPS for your printed pages.
      page.element.appendChild(pageNumberDiv);
    });
  }
});