Why Your Website Prints Incorrectly: 6 CSS Print Problems and How to Debug Them

You build a beautiful invoice page. It looks perfect in Chrome.

Then someone presses Ctrl + P.

Suddenly, the table breaks across pages, background colors disappear, and the right edge of the document gets cut off.

Sound familiar?

Printing is one of the most overlooked parts of frontend development. Browsers are optimized for screens, but printed documents have fixed dimensions, physical margins, and very different layout constraints.

Here are six common problems I've encountered when working with printable web pages, along with practical ways to debug them.

1. Your Screen Layout Is Not Your Print Layout

The browser doesn't automatically convert a responsive screen layout into a well-designed printed document.

A layout that fits a 1440px monitor might be completely unsuitable for A4 paper.

The first step is to create print-specific styles:

@media print {
  .navigation,
  .sidebar,
  .no-print {
    display: none !important;
  }

  body {
    margin: 0;
    background: white;
    color: black;
  }

  .document {
    width: 100%;
    max-width: none;
    box-shadow: none;
  }
}

This removes interface elements that make sense on a screen but not on paper.

It also prevents decorative shadows and fixed-width containers from creating unexpected printed layouts.

The important thing is to treat the printable document as its own output format.

2. A4 and US Letter Are Not Interchangeable

One of the easiest mistakes is designing for one paper size and printing on another.

A4 measures 210 × 297 mm.

US Letter measures 8.5 × 11 inches, approximately 216 × 279 mm.

The difference may seem small, but it becomes significant when you're printing invoices, forms, or documents with precise page boundaries.

You can control page margins with the CSS @page rule:

@page {
  margin: 12mm;
}

You can also request a specific paper size when that is appropriate:

@page {
  size: A4;
  margin: 12mm;
}

However, the browser and printer settings can still affect the final output.

Don't assume that specifying size: A4 guarantees the user's physical printer contains A4 paper.

For applications serving international audiences, letting users select the intended paper size is usually a better approach.

3. Browser Print Scaling Can Break Your Layout

Suppose your CSS is correct, but the printed document still looks smaller than expected.

The problem might not be your code.

Browser print dialogs often provide scaling options such as:

• Default
• Fit to page
• Actual size
• Custom percentage

These settings can change the dimensions of the resulting document.

A useful debugging technique is to compare a known reference sheet against the same printer settings.

For example, PrintPageCheck provides free printable test pages for checking paper margins, scaling, text, and fine lines.

It supports A4 and US Letter with both browser printing and downloadable PDFs.

I find this kind of reference useful because it separates two possible problems:

Problem A: The printer or print dialog is applying unexpected scaling.

Problem B: The application's CSS layout is incorrect.

If even a reference sheet prints at the wrong size, changing your application's CSS probably isn't the first thing to investigate.

4. Background Colors Disappear

This issue is particularly common with dashboards, charts, and invoices that use colored table headers.

Your website displays a colored section correctly, but the printed document has a white background.

Browsers may omit background graphics depending on print settings.

You can request more faithful color reproduction:

@media print {
  .invoice-header {
    background: #e8eef5;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

But here's the catch:

print-color-adjust: exact is not a guarantee.

Browser settings, printer drivers, and device limitations may still affect the output.

For important documents, avoid relying exclusively on background colors to communicate essential information.

Use borders, labels, text, and sufficient contrast so the document remains understandable in black and white.

5. Tables Break Across Pages

A long HTML table may look fine on a screen but become difficult to read when printed.

For example, a row might be split between two pages.

You can request better pagination behavior:

@media print {
  thead {
    display: table-header-group;
  }

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

This encourages browsers to keep rows together and repeat table headers where supported.

However, page-break behavior varies by browser and content structure.

If a single row is taller than the available page space, the browser may still need to split or overflow content.

Always test realistic datasets rather than only a short example table.

6. Printed Text Looks Blurry or Thin

Not every printing problem comes from CSS.

Sometimes the page structure is correct, but the physical output contains broken letters, inconsistent lines, or faint text.

Possible causes include printer quality settings, paper, consumables, or hardware-related issues.

A useful way to investigate is to print a page containing several font sizes and line thicknesses.

Look for:

• Small characters that lose detail
• Horizontal lines with unexpected gaps
• Vertical strokes that appear faint
• Irregular text darkness
• Differences between regular and bold text

If these problems also appear on a dedicated text and fine-line test sheet, the issue may be outside your web application.

Use the printer manufacturer's diagnostic procedures to investigate further.

A Practical Print Debugging Workflow

Instead of randomly changing CSS properties, I recommend this process:

Step 1: Verify the HTML layout

Make sure the content is structured correctly before applying print-specific styling.

Step 2: Test print media rules

Use your browser's developer tools to inspect styles under print media where supported.

Step 3: Check the paper size

Confirm that the CSS, print dialog, and physical paper are consistent.

Step 4: Check scaling

Compare Actual Size against automatic fitting when investigating dimension problems.

Step 5: Print a reference page

Use a dedicated printer test page to distinguish a browser layout issue from a physical output issue.

Step 6: Test multiple browsers

Chrome, Firefox, and Safari can differ in their print rendering behavior.

Step 7: Test the actual printer

A PDF preview is useful, but it cannot guarantee what a physical printer will produce.

Final Thoughts

Printing from the web is more complicated than displaying content on a screen.

There are several layers involved:

1. HTML structure
2. CSS print styles
3. Browser print rendering
4. Print dialog configuration
5. Printer driver behavior
6. Physical printer output

Debugging becomes much easier when you investigate each layer separately.

If you're building printable web applications, use controlled test documents and consistent printer settings rather than guessing.

A reference tool such as PrintPageCheck can help you check the physical output, while your browser's developer tools help you investigate the CSS.

Good print design isn't just about making the preview look right.

It's about making the final document reliable.