v150 · CSS · Print

Expose unprintable areas via CSS

The new env(safe-printable-inset) CSS environment variable reports the unprintable margin imposed by the physical printer — the strip at each edge the printer's paper-handling mechanism cannot reach. Use it in @page rules to guarantee content stays inside the safe area without guessing.

concepts

  1. Safe Print Layout

    A document that uses @page { margin: env(safe-printable-inset, 1cm); } to respect the physical printer margin. A visual simulation shows the safe area versus the full page area.

  2. Print Margin Inspector

    Read and display env(safe-printable-inset) via a CSS custom property and JS, showing the fallback and live value side by side with a diagram of the unprintable zones.

  3. Print Preview

    Side-by-side simulation of a hardcoded @page { margin: 1cm } versus env(safe-printable-inset). Drag the printer-margin slider to see the fixed layout clip content on strict printers, while the adaptive layout always keeps content in the safe zone.

  4. Stylesheet Generator

    Build a complete print stylesheet with a live @page rule builder. Choose a margin strategy — env() only, with fallback, max(), or calc() — and toggle body reset, media query wrapper, and comments. A page diagram updates in real time as you drag the printer-margin slider. Copy the generated CSS in one click.

  5. Printer Compare

    Three margin strategies — hardcoded 5mm, hardcoded 20mm, and env(safe-printable-inset, 1cm) — rendered side by side across a range of simulated printer margin widths (2–22mm). Drag the slider to see which strategy keeps content safe and which clips or wastes space at each printer margin value.

  6. Multi-page Document

    env(safe-printable-inset) works with every @page selector. A book-layout simulation shows :first (title page with a taller top margin), :right (recto with binding gutter on the right), and :left (verso with gutter on the left) — all adapting to the printer's physical margin. Toggle between three strategies and drag the printer-margin slider to see how each page type responds.

why it shipped

Printers have physical constraints — the paper-feeding mechanism holds the paper at the edges, leaving a strip (often 4–6 mm) at each side that the print head cannot reliably reach. CSS did not previously expose this information, so print stylesheets either guessed at conservative margins or let content fall into the unprintable area and get clipped. env(safe-printable-inset) exposes the largest unprintable inset from any edge as a CSS length, letting print stylesheets adapt to the actual printer rather than hardcoding a safety margin. It is used inside @page and regular rules in print media queries.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗