Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Reliable PDF layout starts by treating the document as a sequence of finite page boxes, not as a web page that happens to be printed. Define page size, orientation, and margins; control fragmentation around meaningful blocks; provide header, footer, and counter fallbacks; then inspect the rendered PDF in the exact engine you ship. Browser print pipelines, server-side HTML-to-PDF libraries, and structured publishing products implement different subsets of paged-media CSS, so a stylesheet that looks correct in one can fail in another.
Start with the renderer and the reading context
Before writing CSS, identify how the file will be produced: a browser print pipeline, a server-side HTML-to-PDF library, an enterprise publishing product, or another engine. The renderer determines which pagination and page-margin features are safe to use. For example, Salesforce documents that Visualforce PDF output uses Flying Saucer, which supports a subset of CSS 2.1 and some CSS 3 features. Do not assume that a property supported by a modern browser is supported by your server renderer.
Also decide the reader context. A short report may need one consistent portrait layout; a book-like publication may need distinct cover, front-matter, chapter, appendix, index, and back-page treatments. Record the target paper size, portrait or landscape orientation, whether readers print the file, expected content length, and whether pages must contain running headers, footers, or page numbers.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchDefine page geometry with paged-media CSS
Set size, orientation, and margins
CSS Paged Media defines a page box and the finite area into which flowing content is placed. Use @page for page-level geometry in engines that support it:
#1 Best Overall
@page {
size: A4 portrait;
margin: 22mm 18mm 20mm 18mm;
}
@media print {
html, body { margin: 0; }
body { font: 10.5pt/1.45 system-ui, sans-serif; }
}Choose margins large enough for printed content and for any running furniture. If the PDF is intended for US Letter, specify that explicitly instead of relying on a machine’s default. A wide table, chart, or code listing may require a landscape treatment, but mixed-width pagination is an implementation risk: the W3C specification notes that flowing content across pages of different widths remains complex and is not solved reliably in many popular printing implementations, notably web browsers.
Keep content inside the printable area
Long words, unbreakable URLs, and oversized images can overflow the page even when the margins are correct. Use constrained media widths and deliberate wrapping:
img, svg, video { max-width: 100%; height: auto; }
pre, code { overflow-wrap: anywhere; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 3mm 2mm; vertical-align: top; }Do not solve overflow by assigning a fixed height to a content region. Text length, fonts, language, and data values vary; fixed heights create clipping or unexplained blank space.
Recommended Free Tools
Control page breaks and fragmentation
Keep headings with the following content
Fragmentation properties express where boxes may or may not break. Keep a heading from becoming an orphan and avoid splitting compact components:
h1, h2, h3 {
break-after: avoid-page;
page-break-after: avoid;
}
figure, .callout, .card {
break-inside: avoid;
page-break-inside: avoid;
}
table, pre {
break-inside: auto;
}The legacy page-break-* names remain useful in engines that have incomplete support for the newer break-* properties. Test both the modern and fallback declarations in your actual generator. A forced break can begin a new page, but it cannot guarantee that every following element will fit on one page.
Use explicit breaks for semantic boundaries
Place a break before a chapter or appendix rather than before arbitrary paragraph counts:
.chapter { break-before: page; page-break-before: always; }
.appendix { break-before: page; page-break-before: always; }Build content from meaningful blocks, then inspect the result with unusually long headings, short sections, and full-length tables. Every break ends one page box before the remaining flow continues in the next page box; the final location depends on the renderer’s line breaking, font metrics, and supported rules.
Free tools Windows power users keep installed
One-click scans. No signup required.
Design tables, figures, and code for multiple pages
Tables
Give tables a repeatable header where the engine supports table-header repetition:
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tr { break-inside: avoid; page-break-inside: avoid; }This can keep column labels visible on subsequent pages, but support varies. Avoid forcing an entire long table to stay together; that can create a blank page or overflow. For very wide tables, use a separately designed landscape page variant only when the generator documents reliable mixed orientation.
Figures and code listings
Keep a caption with its figure and prevent a code block from splitting when it is short. For long logs or generated source, allow splitting and add visual continuation cues in the markup. Raster images should have intrinsic dimensions and a maximum width; missing fonts or symbols should be detected during PDF inspection rather than after delivery.
Add headers, footers, and page numbers
CSS margin boxes
CSS page-margin boxes can carry static text and counters in supporting engines:
@page {
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
font-size: 8pt;
color: #555;
}
@top-left {
content: "Acme technical report";
font-size: 8pt;
}
}Chromium documentation reports support for margin-box content beginning with Chrome 131. That is a renderer-specific capability, not a guarantee for every browser version or server library. If your engine does not implement margin boxes, create a documented fallback in its native PDF API or template system.
Browser print-dialog headers and footers
Browser print workflows may add their own URL, title, date, or page-number headers and footers when space is available. Those controls are separate from your stylesheet and can usually be switched off in the print dialog. Check the dialog settings and the generated file; otherwise you may ship duplicate or colliding furniture.
Map distinct sections to distinct layouts
A structured publication often needs more than one page style. A practical mapping looks like this:
| Section | Typical layout decisions |
|---|---|
| Cover | Minimal title treatment, no running chapter header, optional suppressed page number. |
| Front matter | Contents, legal notice, or list of figures; often a different numbering scheme. |
| Chapters | Consistent running header, body margins, heading hierarchy, and page counters. |
| Appendices | Distinct labels, potentially wider tables or landscape pages. |
| Index or references | Dense columns, smaller type, and special break rules. |
Adobe Experience Manager Guides documents assigning layouts to sections and creating first, left, and right variants. Its templates separate page layouts, stylesheets, resources, and settings. You do not need that product to use the same design principle: model section boundaries explicitly and keep layout rules separate from content data.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →A repeatable implementation workflow
- Inventory the output. Name the renderer, version, page size, orientation, print assumptions, and required furniture.
- Create semantic blocks. Mark chapters, callouts, figures, tables, appendices, and references instead of relying on arbitrary wrappers.
- Set geometry first. Apply
@pagesize and margins, then verify that body content has usable width. - Add fragmentation rules. Keep headings with following content, protect compact figures, and force breaks only at real section boundaries.
- Implement furniture with fallbacks. Use margin boxes only where supported; otherwise use the renderer’s documented header/footer mechanism.
- Render representative cases. Include the first page, ordinary middle pages, final page, long tables, long headings, missing-data cases, and any landscape section.
- Inspect the PDF itself. Check clipping, blank space, repeated headers, numbering, font and symbol availability, collisions, and reading order.
Why the same CSS behaves differently
CSS standards describe capabilities, while each generator implements a subset. A browser may support a newer fragmentation property but ignore a page-margin rule in a headless mode. A server library may accept @page size but not counters. A publishing product may offer reliable section variants through a template editor even when its HTML import is limited. Treat compatibility as an engine-specific contract: consult its current documentation, pin versions where possible, and maintain a small regression corpus of representative documents.
Troubleshooting common PDF layout failures
Backgrounds disappear
Many print dialogs disable background graphics by default. Enable background printing in the browser or use the generator’s documented background option. Also verify that the color is not being removed by a print-color-adjust setting.
Page breaks land in the wrong place
Check for unsupported property names, oversized unbreakable content, and a parent with a conflicting fixed height or overflow rule. Replace arbitrary height calculations with semantic blocks and test with longer text.
Table headers vanish on later pages
Confirm that the header is marked up as <thead> and that the engine supports display: table-header-group. If it does not, use the renderer’s table-repetition feature or split the table intentionally.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
@page margins seem ignored
Ensure the file is being rendered in print media, remove competing body margins, and check whether the selected engine restricts page properties. A browser print dialog can also apply its own margins.
Headers or footers overlap content
Increase the corresponding page margin, remove automatic browser furniture, and verify that the renderer reserves space for margin boxes. Inspect both first-page and subsequent-page behavior.
Landscape pages are inconsistent
Do not assume arbitrary width changes will flow correctly across a document. Use the engine’s supported page-layout or named-page mechanism, or redesign the wide content to fit a consistent page width.
Or skip the browser setup
If your immediate goal is a clean rendered capture or PDF of a web document, ScreenshotNeo provides a single HTTP endpoint 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; bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, with the response identifying the page verdict and billing status in headers. Claude, Cursor, and other MCP clients can use its take_screenshot, get_page_info, and capture_pdf tools.
For the API details, see the ScreenshotNeo documentation. The supplied one-call examples are:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Every feature is included on every plan: full-page lazy-image loading, selector captures, device presets, retina scale, PDF controls, custom CSS and JavaScript, waits, request blocking, headers and cookies, geolocation, resizing, caching, signed links, asynchronous jobs, bulk capture, usage data, and an OpenAPI specification. The Free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account to try it.
Cost, performance, and reliability considerations
Rendering cost is driven by page complexity: large images, web fonts, JavaScript, long tables, and network waits all increase work. Set explicit waits or network-idle conditions only when required, and use caching where your content allows it. For production, log renderer version, input URL or document identifier, page count, and failure reason. Generate a test PDF after dependency upgrades because pagination can change when fonts, browser versions, or CSS support changes.
Frequently Asked Questions
Should I use CSS or a visual PDF template editor?
Use CSS when your source is HTML or structured data and you need version-controlled, repeatable builds. A visual or structured template editor is useful when section mapping, first/left/right variants, and non-developer editing are primary requirements.
Can one stylesheet guarantee identical pagination everywhere?
No. Font metrics, fragmentation support, page-margin features, and print-dialog behavior differ by renderer and version. Validate in the engine that produces the shipped PDF.
When is a landscape page justified?
Use it when a table or figure cannot remain legible in portrait after reasonable typography and margin choices. Prefer a documented named-page or section-layout feature over arbitrary width changes.
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.
