DEV Community

Akbo Ichou
Akbo Ichou

Posted on

Print CSS Is Still Hard: Making Web Pages Print Perfectly on US Letter at 100% Scale

#css #html #webdev #frontend

Most web developers never think about the print button. Then you build a site whose entire purpose is printing, and discover that browsers add headers and footers, "fit to page" shrinks everything, and one stray element pushes your artwork onto a second sheet.

Cute Coloring Pages is a free library of 200+ printable coloring pages across 20 categories — kawaii animals, dinosaurs, mandalas, holidays and more — designed to print on standard US Letter paper at 100% scale. Here's what I learned about making printing reliable.

1. Declare the page size and margins

@page tells the browser what paper you're designing for. Browsers don't all respect every property, but setting it removes a lot of guesswork:

@page {
  size: letter portrait;   /* 8.5in × 11in */
  margin: 0.4in;
}
Enter fullscreen mode Exit fullscreen mode

Setting margins here, rather than relying on browser defaults, also reduces the space where browsers put their own header/footer text.

2. Hide everything that isn't the artwork

Navigation, ads, buttons, related links — none of it should print. A single class convention keeps it manageable:

@media print {
  header, nav, footer, aside, .no-print { display: none !important; }
  body { margin: 0; background: #fff; }
}
Enter fullscreen mode Exit fullscreen mode

3. Size the artwork in physical units

Screen layouts use flexible widths; print layouts should use the printable area. With 0.4in margins on Letter paper, that's 7.7in × 10.2in:

@media print {
  .artwork {
    width: 7.7in;
    height: 10.2in;
    object-fit: contain;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
Enter fullscreen mode Exit fullscreen mode

Using object-fit: contain keeps the aspect ratio so a landscape design doesn't get stretched.

4. Prefer SVG line art

Coloring pages are pure black line art, which makes them ideal for SVG: crisp at any printer resolution, tiny file sizes, and no JPEG artifacts around lines. If you do use raster images, export them at 300 DPI for the print size (2,550 × 3,300 px for a full Letter sheet), and serve a smaller version for the on-screen preview:

<picture>
  <source media="print" srcset="/art/trex-print.svg">
  <img src="/art/trex-preview.webp" alt="T-Rex coloring page" class="artwork">
</picture>
Enter fullscreen mode Exit fullscreen mode

5. Ensure pure black lines and no background ink

Gray lines print faded on cheap inkjets, and background colors waste ink. Force the essentials:

@media print {
  .artwork { filter: grayscale(1) contrast(1.2); }
  * { -webkit-print-color-adjust: economy; print-color-adjust: economy; }
}
Enter fullscreen mode Exit fullscreen mode

6. Tell users the two settings that matter

Even with perfect CSS, browsers default to "fit to page" and include headers/footers. The single most useful thing on each page is a short instruction: print at 100% scale and turn off headers and footers. Without "fit to page" turned off, a T-Rex can end up looking like a potato with legs.

7. A dedicated print button

window.print() on a clean, art-only route gives the most predictable results:

document.querySelector("#print").addEventListener("click", () => {
  const w = window.open(`/print/${slug}`, "_blank");
  w?.addEventListener("load", () => w.print());
});
Enter fullscreen mode Exit fullscreen mode

Takeaways

  • Use @page to declare paper size and margins.
  • Hide everything except the artwork in @media print.
  • Size print content in inches, and prefer SVG for line art.
  • Tell users to print at 100% with headers/footers off.

Grab a free page at cutecoloringpages.co — no signup. What's your worst print-CSS bug story?

Top comments (0)