Print Styles

Last updated:

Practical patterns for print and PDF output that hide chrome and preserve readable content.

01 — Foundation

Print is still a user interface

Users print invoices, reports, and articles — the stylesheet should not pretend they do not.

Print styles turn on-screen content into something readable on paper or PDF. Without them, navigation chrome, dark backgrounds, and broken page breaks waste ink and obscure the information people actually wanted.

02 — Basics

What to show and hide

Print the content — not the application chrome.

  • hide navigation, footers, cookie banners, and decorative backgrounds in print
  • use black text on white where possible — save ink and improve legibility
  • expand collapsed sections that are essential to the document being printed
  • show link URLs after key links when useful — a[href]::after with care 
@media print {
    .site-header,
    .site-footer,
    .cookie-banner {
        display: none;
    }
    body {
        color: #000;
        background: #fff;
    }
}

03 — Layout

Page breaks and tables

Avoid splitting headings from content and cutting tables in half without thought.

  • break-inside: avoid on figures, cards, and table rows where splitting looks broken
  • repeat table headers on each printed page when tables span pages
  • test with browser print preview — not assumptions from screen layout

04 — Review

Before you approve

A short checklist for print styles in code review.

  • chrome hidden; main content readable in monochrome
  • page breaks tested on long articles and data tables
  • dedicated print stylesheet or @media print block exists for key templates