The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use CSS Paged Media margin boxes to place running headers, footers, document labels, and page numbers outside your document’s normal flow. A current-page footer is as simple as @bottom-center { content: "Page " counter(page); }; a total-page footer uses the automatically created pages counter. The exact result depends on the browser or PDF renderer, so test the engine and version that will produce your output.
What page-margin boxes are
Page-margin boxes are generated areas around each printed page. They are declared as nested at-rules inside @page, rather than as elements in the HTML body. The CSS Paged Media specification describes them as space for supplementary information such as a page number or document title (W3C CSS Paged Media Module Level 3).
Because the content is generated during pagination, it repeats on every page without adding nodes to the document flow. Your page’s declared margins determine the space available for these boxes.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteCurrent and total page numbers
Current page only
@page {
@bottom-center {
content: "Page " counter(page);
}
}
counter(page) is the current page number. Literal text and counters can be concatenated in one content value.
#1 Best Overall
“Page X of Y”
@page {
margin: 18mm 16mm;
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
}
The user agent creates pages as the total number of pages and the specification says authors cannot manipulate it. If your renderer does not implement that counter, the total may be omitted or render incorrectly; do not substitute a guessed value.
Number alone
@page {
@bottom-center {
content: counter(page);
}
}
Choosing a margin-box position
The common positions are:
@top-left,@top-center, and@top-rightfor running headers.@bottom-left,@bottom-center, and@bottom-rightfor footers.- Corner boxes such as
@top-left-cornerand@bottom-right-corner. - Side positions such as
@left-middleand@right-middle.
For example, a title in the header and page count in the footer can be defined independently:
@page {
margin: 22mm 18mm 20mm;
@top-left {
content: "Product handbook";
font-size: 9pt;
color: #555;
}
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
font-size: 9pt;
}
}
Margin declarations reserve the physical area. Keep enough top or bottom margin for the generated text; otherwise it can collide visually with body content.
Complete print stylesheet example
@media print {
@page {
size: A4;
margin: 20mm 16mm 18mm;
@top-center {
content: "Technical guide";
font: 9pt/1.2 sans-serif;
color: #666;
}
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
font: 9pt/1.2 sans-serif;
color: #666;
}
}
body {
font: 11pt/1.5 system-ui, sans-serif;
color: #111;
}
h1, h2, h3 {
break-after: avoid;
}
table, pre, figure {
break-inside: avoid;
}
}
Open the browser’s print preview or your PDF renderer and inspect several pages, including the first and last. Margin-box content is not selectable as ordinary body text in the DOM, which is expected for generated content.
Rank #2
Browser and renderer support
Support is not uniform. MDN’s paged-media guide and @page reference document the feature and compatibility caveats; for example, some paged-media features such as crop marks and bleeds currently lack browser support. A browser print dialog, headless browser PDF pipeline, and dedicated paged-media engine can therefore produce different results from identical CSS.
| Environment | What its documentation establishes | Practical decision |
|---|---|---|
| Browser print pipeline | MDN documents @page and margin at-rules but warns that paged-media support varies. |
Test the exact browser and version used by your users or CI job. |
| WeasyPrint | The API reference lists CSS Paged Media Level 3 features, including page-margin boxes and page-based counters, with known counter limitations. | A documented dedicated-renderer option; verify the release and its limitations. |
| Vivliostyle | Its supported-features page lists page-margin boxes, while noting browser-dependent support and a compliance caveat. | Use cautiously and validate the version; the page may not represent current behavior. |
| Prince | Official paged-media documentation demonstrates margin boxes and counter(page). |
A commercial production-PDF option; confirm current licensing and feature details directly. |
No single compatibility table can establish behavior for every current browser release. Compare engines on margin-box generation, support for page and pages, selector and counter limitations, pagination controls, and whether output comes from a browser print dialog or a dedicated renderer.
Common implementation problems
The footer is missing
- Confirm the rule is nested inside
@page, not insidebodyor a normal selector. - Check that the target engine supports page-margin boxes. A browser may support some
@pageproperties while ignoring nested margin at-rules. - Ensure print CSS is enabled. In browser automation, use the PDF/print media option rather than screen media.
“Of total” is blank or wrong
pages is renderer-controlled and cannot be manually incremented. Test a dedicated paged-media engine if your browser pipeline does not expose the total. Do not attempt to calculate the total with JavaScript running in the source page; pagination happens after layout and can change with fonts, paper size, margins, and loaded content.
Free tools Windows power users keep installed
One-click scans. No signup required.
Header overlaps the document
Increase the corresponding page margin, reduce the generated text size, or shorten the label. Margin boxes occupy the page margin area; they do not automatically push body content down in every implementation.
Different PDFs show different page numbers
Lock the renderer version, paper size, fonts, and asset-loading behavior in your build. A font fallback or late-loading image can change pagination and therefore every subsequent counter value.
First-page or chapter-specific behavior
Named pages and page selectors are part of the broader paged-media model, but support varies more than the basic boxes. Introduce them only after confirming documentation for your chosen engine and test transitions between page types.
Reliable production workflow
- Choose the output engine. Decide whether a browser print pipeline or a dedicated renderer such as WeasyPrint, Vivliostyle, or Prince matches your licensing, CSS, and PDF requirements.
- Set physical geometry. Define
sizeand explicit margins in@page; keep units such asmmorinfor print dimensions. - Add one margin box. Start with
@bottom-center { content: counter(page); }and verify that it appears on every page. - Add labels and totals. Introduce literal text and
counter(pages)only after the current-page counter works. - Control breaks. Use
break-before,break-after, andbreak-insidewhere supported, while checking that forced breaks do not create blank pages. - Test representative documents. Include a one-page file, a multi-page file, long tables, images that load late, right-to-left or non-Latin text if applicable, and the final page.
- Inspect the generated PDF. Check clipping, overlap, missing fonts, incorrect totals, and whether headers or footers disappear at page boundaries.
Performance, reliability, and accessibility considerations
Pagination is layout work. Large images, web fonts, scripts, and network-dependent content can delay or alter page generation. For repeatable builds, wait for fonts and images, use stable asset URLs, and pin the renderer version. A cache hit or a different viewport can still change content if the source page is dynamic.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Generated margin-box text is supplementary. Put essential information—such as a document title or legal warning—in the document body as well, so it remains available to screen readers, HTML consumers, and workflows that strip generated print content. Keep contrast and font size readable, and avoid conveying meaning only through a decorative footer.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot or PDF of a web page rather than a hand-built print stylesheet, ScreenshotNeo provides a GET API and an MCP server for AI agents. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
For a direct image request, see the ScreenshotNeo API documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe service also offers PDF output, full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets and custom viewports, retina scale, custom CSS and JavaScript, click and wait actions, request/resource blocking, custom headers/cookies/user agents, timezone and geolocation, transparent backgrounds, resizing, TTL caching, signed links, asynchronous webhooks, bulk calls for up to 100 URLs, usage reporting, and an OpenAPI specification. Its MCP tools—take_screenshot, get_page_info, and capture_pdf—can be used by Claude, Cursor, and other MCP clients.
There is a free allowance of 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
FAQ
Can I put HTML elements directly in a page-margin box?
No. The box uses generated CSS content. Use strings, counters, and supported generated-content values rather than inserting a body element into @page.
Can JavaScript read the final page count?
Not reliably in a normal browser document. The pages counter is supplied during pagination by the user agent or renderer.
Why does a browser preview differ from a PDF service?
They may use different pagination engines, fonts, defaults, and support levels. Treat each engine/version as a separate target and validate its output.
Recommended Free Tools
Frequently Asked Questions
Can I put HTML elements directly in a page-margin box?
No. Margin boxes use generated CSS content inside @page; they are not containers for body DOM elements.
Can JavaScript read the final page count?
Not reliably in a normal document. The renderer supplies the pages counter during pagination.
Why does browser preview differ from a PDF service?
Different engines, fonts, defaults, and feature support can change pagination and generated content.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
