Print CSS for PDF: a practical checklist

The converter renders your HTML the way a browser prints it. That means print CSS, the rules you write for paper, is the most direct way to control the PDF. Here is what matters and a starter stylesheet you can paste in.

Use @media print for PDF-only changes

Rules inside @media print apply only when printing, so your screen design stays untouched:

@media print {
  header nav, footer nav, .share-buttons, .cookie-banner { display: none !important; }
  a { color: inherit; text-decoration: underline; }
  .container { max-width: none; padding: 0; }
}

Sizes: think in points

Screen designs often use 16–18px body text, which looks large on paper. Around 10.5–12pt is comfortable for printed documents. Absolute units such as pt, mm and cm are reliable in print because the page has a known physical size.

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1 { font-size: 22pt; }
  h2 { font-size: 15pt; }
}

Backgrounds and colours

Browsers normally skip background colours when printing to save ink. This converter prints them: element backgrounds appear whether or not Print backgrounds is on, and turning that setting off removes only the page background on html or body. If you print the same HTML from a browser too, ask for exact colours on the elements that need them:

.badge, .table-header {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

Page size and margins

Choose the paper size (A4, Letter or Legal) and orientation in the converter settings; a CSS @page size rule can’t change the paper. Margins come from the Margins setting (10 mm by default), but in our tests an @page rule with a margin replaced it, and @page { size: landscape; } turned the page sideways. Use one or the other, so the settings and your CSS don’t fight. If you want full-bleed colour to the edge of the page, set margins to 0 and add padding inside your layout instead.

Make layouts fit the page

@media print {
  img, svg, video, canvas { max-width: 100%; height: auto; }
  table { width: 100%; border-collapse: collapse; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

Long code lines and wide images are the usual cause of content disappearing off the right edge.

Avoid screen-only effects

• Sticky and fixed headers can repeat or overlap content. Set them to position: static in print.
• Animations and transitions are captured mid-way if they haven’t finished. Disable them for print.
• Viewport units (vh, vw) relate to the printed page, which can produce surprising sizes. Prefer fixed or percentage sizes.
• Box shadows and blurs add file size and can look muddy on paper.

Starter print stylesheet

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body { font-size: 11pt; line-height: 1.45; color: #000; }
  nav, .no-print { display: none !important; }
  header, .sticky { position: static !important; }
  img, svg { max-width: 100%; height: auto; }
  h1, h2, h3 { break-after: avoid; }
  table, figure, pre, blockquote { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
}

For control over where pages break, read CSS page breaks for PDF.