May 10, 2026

CSS Print to PDF Cheatsheet: Every Property You Need

CSSPDF generationprint stylesheetcheatsheettutorial

HTML looks perfect in the browser, then falls apart as a PDF. This cheatsheet covers every CSS print property you'll need, organized by category, with snippets ready to copy. Works with Puppeteer, Playwright, and FUNBREW PDF — any Chromium-based PDF engine.

For deeper explanations, see the CSS Print Stylesheet Complete Guide.

1. Page Size and Orientation (@page)

/* A4 portrait */
@page { size: A4; }

/* A4 landscape */
@page { size: A4 landscape; }

/* US Letter */
@page { size: letter; }

/* Custom dimensions (width × height) */
@page { size: 210mm 297mm; }

Gotcha: CSS custom properties (var()) do not work inside @page. Hardcode values there.

2. Page Margins

/* Uniform margins */
@page { margin: 20mm; }

/* Per-side margins */
@page {
  margin-top: 25mm;
  margin-bottom: 20mm;
  margin-left: 15mm;
  margin-right: 15mm;
}

/* No margin on the first page */
@page :first { margin: 0; }

/* Mirror margins for booklet binding */
@page :left  { margin-left: 25mm; margin-right: 15mm; }
@page :right { margin-left: 15mm; margin-right: 25mm; }

3. Page Break Control

/* Force a page break before this element */
.chapter {
  break-before: page;
  page-break-before: always; /* legacy fallback — always include both */
}

/* Force a page break after */
.section-end {
  break-after: page;
  page-break-after: always;
}

/* Prevent a break inside a box */
.card {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Keep table rows intact */
tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

Gotcha: break-inside on direct flex/grid children may be ignored. Wrap them in a block element.

4. Print Background Colors and Images

/* Force background on a specific element */
.highlighted {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  background-color: #fef9c3;
}

/* Apply globally */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

With the FUNBREW PDF API, set options.printBackground: true to enable backgrounds globally without touching CSS.

5. Repeating Table Headers Across Pages

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

/* Prevent a break inside the header row */
thead tr { break-inside: avoid; }

Your HTML must use an explicit <thead> element. Bare <tr> elements inside <table> won't repeat.

6. Page Numbers, Headers, and Footers

/* Page number at the bottom center */
@page {
  @bottom-center {
    content: counter(page) " / " counter(pages);
    font-size: 10pt;
    color: #6b7280;
  }
}

/* Header text at the top center */
@page {
  @top-center {
    content: "FUNBREW PDF — Confidential";
    font-size: 9pt;
  }
}

Note: Margin boxes (@bottom-center etc.) require Chromium 131+. FUNBREW PDF's quality engine supports them.

7. @media print Basics

@media print {
  /* Hide navigation and sidebars */
  nav, aside, .no-print { display: none !important; }

  /* Switch to a print-friendly font */
  body { font-family: Georgia, serif; font-size: 11pt; }

  /* Append URL after each link */
  a[href]::after { content: " (" attr(href) ")"; }

  /* Only for external links */
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}

8. Orphans and Widows

p {
  orphans: 3; /* minimum lines left at the bottom of a page */
  widows: 3;  /* minimum lines carried to the top of a page */
}

9. Named Pages (Mixed Page Sizes)

@page portrait-page  { size: A4 portrait; }
@page landscape-page { size: A4 landscape; }

.wide-chart {
  page: landscape-page;
  break-before: page;
}

10. Common Failures and Fixes

Symptom	Cause	Fix
Background color disappears	Engine defaults to ink-saving mode	Add `print-color-adjust: exact`
Page break is ignored	Missing legacy fallback	Always add `page-break-` alongside `break-`
Table header doesn't repeat	No `<thead>` element	Add explicit `<thead>` in HTML
`@page` margin has no effect	`margin` set on `html`/`body`	Reset body to `margin: 0`
Page numbers don't appear	Chromium older than 131	Use FUNBREW PDF quality engine
`var()` breaks inside `@page`	Chromium spec limitation	Hardcode values in `@page` rules
Flex children ignore break rules	Flex container constraints	Wrap in a block element

11. CSS vs. API Options in FUNBREW PDF

CSS and API options are complementary — use whichever is more convenient.

Goal	CSS	API option
Paper size	`@page { size: A4; }`	`options.format: "A4"`
Margins	`@page { margin: 20mm; }`	`options.margin`
Background colors	`print-color-adjust: exact`	`options.printBackground: true`
Page numbers	`@page @bottom-center`	`options.displayHeaderFooter`
Header/footer	`@page @top-center`	`options.headerTemplate`

See the full FUNBREW PDF API docs for all available options.