How to reliably print “Page X of Y” using native browser print (Chrome & Firefox)? [closed]

I’m trying to display page numbering in print view as:

Page 1 of 10

Page 2 of 10

Requirements

Works in native browser print

Consistent behavior in Chrome / Edge (Chromium) and Firefox

No server-side PDF generation

Prefer native solution (CSS / JS) over heavy libraries

Attempt 1 – CSS Paged Media (@page margin boxes)

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

Expected

If document has 5 pages:
Page 1 of 5

Page 2 of 5

Actual

BrowserResultChrome / Edgecounter(pages) always returns 1 → Page 3 of 1FirefoxWorks correctly → Page 3 of 5

Issue: Chromium does not support counter(pages).

---

Attempt 2 – Fixed Footer with CSS Counters

<div class="page_footer">
<span class="page_number"></span>
</div>

@media print {
.page_footer {
position: fixed;
bottom: 10pt;
right: 25pt;
}

.page_number::after {
content: "Page " counter(page);
}
}

Result

Current page number sometimes works

No way to get total page count (Y)

Inconsistent between Chrome & Firefox

Attempt 3 – Manual CSS Counter Increment

@media print {
body {
counter-reset: page;
}

.page_footer {
counter-increment: page;
}

.page_number::after {
content: "Page " counter(page);
}
}

Result

Page numbers repeat or skip

CSS counters count elements, not printed pages

Unreliable

Attempt 4 – JavaScript Before Print

window.onbeforeprint = () => {
const totalPages = Math.ceil(
document.body.scrollHeight / window.innerHeight
);
document.querySelector(".page_number").textContent =
`Page 1 of ${totalPages}`;
};

Result

JS calculates 6 pages

Print preview shows 9 pages

Browser pagination ≠ DOM height

Numbers incorrect

Attempt 5 – Paged.js

Paged.js works correctly in Chrome, but:

Requires additional CSS hacks for Firefox

Adds complexity

Not truly native browser print

Question

Is there any native way to reliably display:

Page X of Y

in browser print that works consistently in both Chrome and Firefox?

Or is the correct conclusion that:

Firefox is the only browser with full CSS Paged Media support

Chromium browsers cannot natively support Page X of Y

A library like Paged.js or server-side PDF generation is the only reliable option?

Environment

Chrome 120+

Firefox 121+

Windows / macOS

Native browser print (Ctrl + P)

What I’m Looking For

Confirmation of browser limitations or

A proven cross-browser workaround

Official specs / browser bugs welcome