Doodle Press

# Print Styles & Media

While CSS is often used for screen experiences, print styles remain essential for documents, reports, and offline reading. This chapter covers print media queries, page rules, controlling pagination, and tailoring content for print.

# Table of Contents

# Print Media Queries & @page

Use @media print to apply styles exclusively for printing. The @page rule controls page margins, size, and marks. Combine with region-specific @page selectors like :first or :left/:right.

@media print {
  body { color: #000; background: none; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

@page {
  size: A4;
  margin: 1in;
  marks: crop;
}
@page :first {
  margin-top: 2in;
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
<a href="https://example.com">Link to example.com</a>

  
        Copied!
1

Specify standard page sizes (A4, Letter) or custom dimensions. Crop marks assist printers; avoid them for personal printing.

# Sizing & Units for Print

Print uses physical units (cm, mm, in), and the default resolution is 96 DPI. Keep text legible by using fixed sizes (e.g., 12pt for body text). Control page flow with columns and avoid vh/vw units.

@media print {
  h1 { font-size: 18pt; }
  p { font-size: 12pt; line-height: 1.4; }
  .two-column {
    column-count: 2;
    column-gap: 2cm;
  }
}

  
        Copied!
1
2
3
4
5
6
7
8
<div class="two-column">
  <p>Print-specific typography with physical units.</p>
  <p>Second paragraph flows into the next column.</p>
</div>

  
        Copied!
1
2
3
4

# Page Breaks & Pagination

Control page breaks using break-before, break-after, and break-inside properties. Avoid splitting elements that must stay together (like images and captions). Use orphans and widows properties to manage lines at the start and end of pages.

@media print {
  h2 { break-before: page; }
  figure { break-inside: avoid; }
  p { widows: 2; orphans: 2; }
}

  
        Copied!
1
2
3
4
5
<h2>Section Title</h2>
<p>Content starts on a new page because of break-before.</p>
<figure>
  <img src="diagram.png" alt="Diagram">
  <figcaption>Illustration stays intact with caption.</figcaption>
</figure>

  
        Copied!
1
2
3
4
5
6

# Hiding & Adjusting Content

Hide interactive elements and unnecessary UI components from print. Provide links inline and adjust backgrounds to conserve ink.

@media print {
  nav, footer, .interactive { display: none; }
  button { display: none; }
  .print-only { display: block; }
}

  
        Copied!
1
2
3
4
5
<nav>Main navigation won't appear in print.</nav>
<div class="interactive">Interactive widget</div>
<div class="print-only" style="display:none">Printed version of interactive content</div>

  
        Copied!
1
2
3

Ensure printed documents are accessible: use clear headings, alternate text for images, and high contrast colors. When generating PDFs via browsers, include metadata and maintain a logical reading order. Avoid color-only differentiation and provide descriptive link names.

# Gotchas & Best Practices

  • Don’t forget to reset backgrounds or images that may print poorly (use background: none).
  • Provide link URLs inline or as footnotes for offline reference.
  • Use consistent margins and line heights to improve readability.
  • Avoid fixed positioning for elements in print; they may overlap content when paginated.
  • Test print styles across browsers (Chrome, Firefox, Safari) for consistent results.

# Quick Cheatsheet

  • @media print: apply print-specific styles.
  • @page: set page size, margins, and marks.
  • Units: pt, cm, mm, in for print; avoid vh, vw.
  • Breaks: break-before, break-after, break-inside, orphans, widows.
  • Hide/Show: hide interactive elements; show print-only content.

# Practice Tasks

  1. Create a print stylesheet for a blog post that hides navigation and footers and adds URLs after each link.
  2. Use @page to create a custom page size and margins, then print a report to PDF.
  3. Experiment with break-inside on figure elements to prevent splitting images and captions.
  4. Adjust typography sizes using physical units for a printable brochure.

# Review Questions

  1. How does the @page rule influence printed output?
  2. What units are appropriate for print, and why?
  3. Describe how to prevent page breaks within a figure or table.
  4. Why should interactive elements be hidden for print?
  5. How can you add link URLs to printed pages for offline reading?

← 14 — Real-World CSS Recipes →