How to write a print stylesheet that actually works

Print CSS is the last unloved stylesheet on most sites, and unusually cheap to get right: about forty lines takes you from "the nav bar owns sheet one" to something a reader would keep. What follows is a stylesheet you can paste and trim, plus what will break it.

Start from the preview, not from the CSS

Open your own article and press Ctrl+P before you write a single rule. That preview is the specification. Note every element that should not be there, every place the text is clipped, and every page that is blank. You will usually find the same six problems on every template, and you will fix them once.

Layer 1: hide what paper does not need

@media print {
  /* Interface that means nothing on paper */
  nav, aside, footer, form, video, iframe, dialog,
  .site-header, .sidebar, .comments, .newsletter,
  .share-buttons, .cookie-banner, .related-posts,
  [role="banner"], [role="navigation"], [role="complementary"],
  [data-print="hide"] {
    display: none !important;
  }

  /* Give the article the whole sheet */
  html, body {
    margin: 0;
    padding: 0;
    width: auto;
    background: #fff;
    color: #000;
    font: 11pt/1.45 Georgia, "Times New Roman", serif;
  }

  main, article, .content, .entry-content {
    display: block;      /* flex and grid fragment badly across pages */
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;   /* a clipped wrapper prints one page and stops */
    height: auto;
  }
}

Three of those lines do most of the work. display: block on the article container matters because flex and grid containers fragment unpredictably across pages, and a two-column card grid will happily slice a card in half at the page boundary. overflow: visible and height: auto matter because a wrapper with height: 100vh or overflow: hidden truncates your document to exactly one page, which is the single most common cause of "only the first page prints".

Layer 2: the page box and the breaks

@page {
  margin: 18mm 16mm 20mm 16mm;   /* top right bottom left */
}

@media print {
  /* Never split these */
  figure, table, pre, blockquote, img, li, .card {
    break-inside: avoid;
    page-break-inside: avoid;      /* legacy alias, still honoured by some engines */
  }

  /* Never strand a heading at the foot of a page */
  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* At least three lines of a paragraph on each side of a break */
  p, li { orphans: 3; widows: 3; }

  /* Repeat table headers on every page */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* Optional: a wide table gets its own landscape sheet (Chromium 110+) */
  @page wide { size: A4 landscape; }
  .table-wide { page: wide; }
}

Layer 3: make the links mean something

On paper a hyperlink is decoration. Printing the destination after the link text turns a printout into a document a reader can act on, which matters most for documentation, references and anything academic.

@media print {
  a { color: #000; text-decoration: underline; }

  /* Print the destination after external links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 85%;
    word-break: break-all;   /* long URLs must not overflow the sheet */
  }

  /* ...but not for these */
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after,
  a[href^="javascript:"]::after,
  a.no-print-url::after,
  nav a::after {
    content: "";
  }

  /* Expand abbreviations too */
  abbr[title]::after { content: " (" attr(title) ")"; }
}

Layer 4: colour, images and the dark-mode trap

The nastiest modern print bug is dark mode. If your colour tokens are redefined in a prefers-color-scheme: dark block and your print block does not redefine them, a reader whose operating system is set to dark gets a solid black A4 rectangle and an empty toner cartridge. Print styles must come after, and must reassert the colours.

@media print {
  /* Reassert light values regardless of the reader's colour scheme */
  :root {
    --bg: #fff;
    --fg: #000;
    --muted: #444;
    --line: #999;
  }

  body { background: #fff !important; color: #000 !important; }

  img, svg, canvas {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
  }

  /* Keep code blocks readable and unbroken */
  pre, code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 9pt;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #ccc;
  }

  /* A fixed header repeats or clips on every sheet */
  .site-header, .toolbar, [style*="position:fixed"] {
    position: static !important;
  }
}

Lazy-loaded images are the other silent failure. Chromium now eagerly loads loading="lazy" images before printing, but a custom IntersectionObserver loader will still print blank boxes for anything the reader never scrolled past. If you rolled your own, force the images in before the dialog opens:

// Load every deferred image before the print dialog paints
window.addEventListener('beforeprint', () => {
  document.querySelectorAll('img[data-src]').forEach((img) => {
    if (!img.src) img.src = img.dataset.src;
  });
  document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
    img.loading = 'eager';
  });
});

// Same event, if you need to expand collapsed sections
window.addEventListener('beforeprint', () => {
  document.querySelectorAll('details').forEach((d) => (d.open = true));
});

The six bugs you will actually hit

A testing routine that catches the rest

1. Test the real preview in three enginesChrome, Firefox and Safari paginate differently. Firefox in particular ignores orphans, widows and some break-after rules, so a layout that is perfect in Chrome can strand headings in Firefox.
2. Test both paper sizesSwitch the print dialog between A4 and Letter. A4 is 20mm narrower and 17mm taller than Letter, which is enough to push a wide table over the edge.
3. Test in dark modeSet the operating system to dark, reload and open the preview. This catches the black-page bug that never shows up on a developer machine set to light.
4. Test your longest and your widest pageThe longest article finds your break bugs; the widest data table finds your overflow bugs. Everything else sits between them.
5. Save as PDF and read itPrint to PDF and actually read the file at 100 percent. Check that the text is selectable, that the URLs are expanded, and that nothing is clipped at the margin.
6. Check the headers you cannot controlThe browser adds its own title, URL, date and page numbers. You cannot remove them from CSS; the reader turns them off. Design assuming they are on.

Now give readers a way to reach it: a print button on any site, or on WordPress the button routes. For the wider audit, run through making your website printer-friendly. To see how a page behaves with no print CSS at all, paste it into the web page printer.

Frequently asked questions