Print CSS and Firefox: @media print, Page Breaks, Headers, and DevTools Print Simulation

Print CSS is one of the most neglected areas of web development. Firefox has good print support and DevTools to help, but browser differences exist. Here's what developers need to know.

Simulating Print in Firefox DevTools

Toggle print media emulation:
DevTools → Responsive Design Mode (Ctrl+Shift+M) → Press the three dots (…) → Print Media

Or in DevTools → Inspector → top toolbar → three dots → Print simulation (the exact UI varies by version).

Alternative (always works):

1. DevTools → Console
2. Type: window.matchMedia('print').media
3. To temporarily force print preview: Ctrl+P in Firefox opens print dialog with preview

Print preview (the real thing):
Ctrl+P → See how the page actually prints. This is the ground truth.

CSS @media print

Structure your print styles:

/* Base styles for all */
body {
  font-family: Georgia, serif;
  font-size: 12pt;  /* Points for print */
  color: #000;
}

/* Screen-only (hide when printing) */
@media screen {
  .sidebar, .navigation { display: flex; }
}

/* Print-only */
@media print {
  /* Hide navigation, ads, sidebars */
  .navigation, .sidebar, .ads, .comments, footer {
    display: none !important;
  }

  /* Show full URLs after links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* Hide internal links' URL display */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* Avoid page breaks inside paragraphs */
  p, figure, pre {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Force page break before main sections */
  h1 {
    page-break-before: always;
    break-before: page;
  }

  /* Images should not overflow */
  img {
    max-width: 100%;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

Print Units in CSS

For print, use print units:

• pt (points): 1pt = 1/72 inch. Standard for font sizes.
• mm, cm: Physical measurements.
• in: Inches.
• px: Works but 96dpi (not ideal for high-quality print).

Standard print setup:

@page {
  size: A4;  /* or "letter", "legal", "8.5in 11in" */
  margin: 2cm 1.5cm;  /* top/bottom 2cm, left/right 1.5cm */
}

@page :first {
  margin-top: 3cm;  /* More top margin on first page */
}

Page Breaks

/* Avoid breaking inside this element */
.important-section {
  break-inside: avoid;
  page-break-inside: avoid;  /* Legacy */
}

/* Force break before */
.chapter-title {
  break-before: page;
  page-break-before: always;  /* Legacy */
}

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

CSS Fragmentation module (Firefox support): break-before, break-after, break-inside are the modern properties. The page-break-* properties still work as aliases.

Printing Tables

Tables need special attention:

@media print {
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #999;
    padding: 4pt;
    font-size: 10pt;
  }

  /* Repeat table header on each page */
  thead {
    display: table-header-group;
  }

  /* Prevent row from breaking across pages */
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

display: table-header-group on thead causes it to repeat at the top of each printed page — essential for multi-page tables.

Printing Code Blocks

Code blocks need specific treatment:

@media print {
  pre, code {
    font-family: monospace;
    font-size: 9pt;
    background: none;
    border: 1px solid #ccc;
    padding: 4pt;
    white-space: pre-wrap;
    word-break: break-all;
  }

  pre {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

white-space: pre-wrap; word-break: break-all; prevents long lines from being cut off at the page margin.

Hiding Elements

@media print {
  /* Common elements to hide */
  .no-print,
  [data-noprint],
  .print-hide {
    display: none !important;
  }

  /* Or with a utility class */
  .print-only { display: block; }
}

@media screen {
  .print-only { display: none; }
}

Colors in Print

Background colors don't print by default in most browsers (save ink). To force background colors:

/* Force color printing (user must also enable in print dialog) */
@media print {
  .important-highlight {
    background-color: #ffff00 !important;
    print-color-adjust: exact;      /* Modern property */
    -webkit-print-color-adjust: exact;  /* Webkit prefix */
    color-adjust: exact;  /* Legacy */
  }
}

print-color-adjust: exact tells the browser to print background colors and images exactly as styled, regardless of the user's "background graphics" print setting.

Firefox vs Chrome Print Differences

General: Firefox and Chrome handle print CSS similarly in modern versions.

Firefox-specific behavior:

• Firefox's print preview (Ctrl+P) shows a fairly accurate preview
• Firefox handles @page margins correctly
• FireFox respects print-color-adjust: exact well

Chrome-specific quirks:

• Chrome sometimes adds an extra header/footer with URL and date — you can turn this off in print dialog
• Chrome's print preview can differ slightly from the actual print output

Testing both: Always test print output in both browsers if print fidelity matters.

Printing Multi-Page Documents

@page {
  counter-reset: page;
}

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

@page :left {
  @bottom-left {
    content: counter(page);
  }
}

Note: Firefox has limited support for @page named margin boxes (like @bottom-right). This is an area where Firefox and Chrome both have partial support. Test carefully.

JavaScript for Print

// Trigger print dialog
window.print();

// Execute code before and after print
window.onbeforeprint = () => {
  // Expand all collapsed sections
  document.querySelectorAll('.collapsed').forEach(el => el.classList.remove('collapsed'));
};

window.onafterprint = () => {
  // Restore collapsed state
  document.querySelectorAll('[data-originally-collapsed]').forEach(el => 
    el.classList.add('collapsed')
  );
};

// Listen for print media change
const printMedia = window.matchMedia('print');
printMedia.addEventListener('change', (e) => {
  if (e.matches) {
    console.log('Print mode active');
  }
});

DevTools Print Debugging Checklist

1. Ctrl+P: See print preview — is the layout correct?
2. DevTools Inspector: Inspect how print styles are applying
3. Print media simulation: Toggle in DevTools to debug without opening print dialog repeatedly
4. Check page break placement: Select elements and verify break properties
5. Check color: Does print-color-adjust: exact apply to the right elements?
6. Test long content: Generate enough content to span multiple pages to test header repetition and page breaks

Print CSS is often an afterthought, but for documentation, reports, or content-heavy sites, it can significantly improve the user experience.