◆Error Codes Wiki

Browser Print Preview Errors — CSS Print Styles and Page Layout Issues

Informationalgeneral

Overview

Fix browser print preview issues including broken layouts, missing content, incorrect page breaks, and CSS print media query failures.

Key Details

  • Print preview uses the @media print CSS rules to format content for printing
  • Elements hidden in screen view may need to be shown for print, and vice versa
  • Page breaks can be controlled with CSS break-before, break-after, and break-inside properties
  • Background colors and images are not printed by default — browser settings must enable them
  • Print preview layout differs between Chrome, Firefox, and Safari

Common Causes

  • No @media print CSS rules — screen layout applied directly to print
  • JavaScript-dependent content not rendered in print preview
  • Background colors and images disabled in browser print settings
  • Elements with overflow: hidden clipping content that should be visible on paper

Steps

  1. 1Add print styles: @media print { .no-print { display: none; } .print-only { display: block; } }
  2. 2Control page breaks: .avoid-break { break-inside: avoid; } .page-break { break-before: page; }
  3. 3Enable backgrounds: in print dialog, check 'Background graphics' option
  4. 4Test with browser DevTools: Chrome DevTools > three dots > More tools > Rendering > Emulate CSS media type > print
  5. 5For wide tables: @media print { table { font-size: 10px; } } to fit content on the page

Tags

printcss-printpage-breakprint-previewlayout

More in General

printer-offlinePrinter Offline Error
Warning
driver-unavailablePrinter Driver Is Unavailable
Warning
spooler-errorPrint Spooler Error
Warning
pcl-xl-errorPCL XL Error — Subsystem Kernel
Warning
printer-duplex-printing-errorsPrinter Duplex (Double-Sided) Printing Errors — Jams, Alignment & Blank Pages
Warning
printer-usb-connection-errorsUSB Printer Errors — Not Detected, Driver Issues, and Connection Troubleshooting
Warning

Frequently Asked Questions

Browsers disable background printing by default to save ink. Users must enable 'Background graphics' in the print dialog. You can hint with -webkit-print-color-adjust: exact; but the user setting takes precedence.