Print Stylesheets

Design @media print — hide chrome, expand links, control page breaks, and force ink-friendly colors for usable paper and PDF output.

intermediate3 min readUpdated Aug 4, 2026

Printing and “Save as PDF” still matter for invoices, tickets, articles, and internal tools. A print stylesheet strips app chrome, preserves content structure, and avoids wasting ink on dark hero backgrounds.

Docs: MDN print styles, @page, CSS paged media.

Hook print CSS

@media print {
  .app-nav,
  .toast,
  .cookie-banner,
  .no-print {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  a {
    color: black;
    text-decoration: underline;
  }
}

Or a dedicated file: <link rel="stylesheet" href="/print.css" media="print" />.

Links and URLs

@media print {
  article a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    word-break: break-all;
  }
}

Skip ::after URLs for same-page # fragments if noisy. For dense docs, a footnotes approach is cleaner than raw attr dumps.

Page boxes and margins

@page {
  margin: 1.5cm;
}

@page :first {
  margin-top: 2cm;
}

Browser support for complex @page rules varies; test Chrome/Safari/Firefox print previews.

Break control

@media print {
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid; /* legacy alias still seen */
  }

  figure,
  table,
  pre {
    break-inside: avoid;
  }

  .invoice-section {
    break-before: page;
  }
}

orphans / widows can reduce lonely lines of paragraphs where supported.

Colors and backgrounds

Browsers often suppress backgrounds unless the user enables “background graphics.” Don’t hide essential information in background images.

@media print {
  .badge {
    border: 1px solid #000;
    background: none !important;
    color: #000 !important;
  }

  .chart {
    /* provide a data table fallback in HTML for print */
  }
}

* {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

Use print-color-adjust sparingly when brand color must appear (status labels); still offer non-color cues.

Layout resets for paper

@media print {
  .page {
    display: block; /* kill sticky app grid */
  }

  .sidebar {
    display: none;
  }

  main {
    width: 100%;
  }

  body {
    overflow: visible;
  }
}

Sticky headers, fixed chat widgets, and overflow: hidden on body are common print destroyers — neutralize them.

Interview out-loud

“I ship @media print rules that hide navigation and toasts, force readable black text, reveal link URLs when useful, and control page breaks around headings and tables. I don’t rely on background colors for meaning, and I test Save as PDF in major browsers.”

Footguns

Fixed-position UI covering printed content.
Dark theme tokens printing as dark-on-dark.
Endless blank pages from height: 100vh shells.
Cutting off wide tables — allow landscape or stacked print layouts.
QR codes or barcodes without sufficient resolution.

Invoice example extras

@media print {
  @page { margin: 12mm; }
  .invoice-table { width: 100%; border-collapse: collapse; }
  .invoice-table th, .invoice-table td {
    border-bottom: 1px solid #999;
    padding: 4pt 6pt;
    font-size: 10pt;
  }
  .invoice-total {
    break-inside: avoid;
    margin-top: 12pt;
    font-weight: 700;
  }
  .qr {
    width: 25mm;
    height: 25mm;
  }
}

Test with long line items that span pages — keep totals with their section using break-inside: avoid on the summary block. For multi-currency invoices, ensure Unicode symbols print with a font that contains them.

Debugging print layout

Use browser print preview as the primary QA surface. Temporarily add * { outline: 1px solid red; } inside @media print to see box edges. Watch for elements with position: fixed that repeat on every page (headers can be intentional; chat widgets are not). Convert fixed UI to static or hide it. Verify link URLs are not so long they overflow the page — allow wrapping with word-break: break-all on the generated ::after content.