v150 · CSS · Print

Print Preview

Side-by-side print simulation: left uses a hardcoded @page { margin: 1cm }, right uses env(safe-printable-inset). Drag the "printer unprintable margin" slider to see how a strict printer causes the left layout to clip content that the right one safely insets.

8px (simulated ~6mm)
14px
unprintable zone
safe area boundary
content
clipped content
hardcoded margin: 1cm (fixed)
env(safe-printable-inset) — adapts to printer
printer unprintable margin
8px
hardcoded page margin
14px
safe-printable-inset result
env(safe-printable-inset, 1cm)
left content clips?
—

code

/* Old approach: guess a margin that's usually enough */
@page {
  margin: 1cm;  /* might clip on printers with > 1cm unprintable zone */
}

/* Chrome 150: use the actual printer's unprintable inset */
@page {
  margin: env(safe-printable-inset, 1cm);
  /* fallback: 1cm if the env variable isn't supported */
}

/* Also usable in regular styles for print media */
@media print {
  .header {
    padding-top: max(env(safe-printable-inset, 0px), 1rem);
  }
}

see also

implementation reference

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