demo · v150

Multi-page Document

env(safe-printable-inset) works with every @page selector — :first, :left, :right, and :blank. A book-style layout where the first page has a wider top margin for a title, recto/verso pages have a gutter on alternating sides, and all pages respect the printer's physical unprintable zone.

Drag the printer margin slider to simulate printers with narrow vs wide unprintable zones. The page spread updates in real time. Red areas = unprintable zone consumed by the printer hardware. Ivory areas = printable safe zone for content.

Printer margin: 8mm

Strategy:

@page :first

——

env(safe-printable-inset)

1 (Title)

@page :right (recto)

—gutter

recto — gutter at right

2 →

@page :left (verso)

gutter—

verso — gutter at left

← 3

Strategy	Strict printer (18mm)	Standard printer (8mm)	Wide-margin printer (4mm)
Fixed `margin: 1cm`	Clips — 1cm < 18mm required	Safe (8mm < 10mm)	Safe, but wasteful
`env(safe-printable-inset, 1cm)`	Adapts to 18mm — no clipping	Uses 8mm exactly	Uses 4mm — minimal waste
`max(1cm, env(…, 1cm))`	Adapts above 1cm	Uses 1cm (floor)	Uses 1cm (floor)

/* Multi-page layout with env(safe-printable-inset) */
@media print {

  /* Title page: extra top margin for title block */
  @page :first {
    margin-top:    max(2cm, env(safe-printable-inset, 2cm));
    margin-bottom: env(safe-printable-inset, 1cm);
    margin-left:   env(safe-printable-inset, 1.5cm);
    margin-right:  env(safe-printable-inset, 1.5cm);
  }

  /* Recto (right-hand) pages: gutter on right for binding */
  @page :right {
    margin-top:    env(safe-printable-inset, 1cm);
    margin-bottom: env(safe-printable-inset, 1cm);
    margin-left:   env(safe-printable-inset, 1.5cm);
    /* gutter: at least 2cm or the safe inset, whichever is larger */
    margin-right:  max(2cm, env(safe-printable-inset, 1.5cm));
  }

  /* Verso (left-hand) pages: gutter on left */
  @page :left {
    margin-top:    env(safe-printable-inset, 1cm);
    margin-bottom: env(safe-printable-inset, 1cm);
    margin-left:   max(2cm, env(safe-printable-inset, 1.5cm));
    margin-right:  env(safe-printable-inset, 1.5cm);
  }

}

implementation reference

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

see also

implementation reference