v150 · CSS · Print · demo

Print Margin Inspector

Read env(safe-printable-inset) via a CSS custom property, report the value in the UI, and visualise the unprintable zones on a page diagram. Use the slider to simulate different printer margins.

On-screen, env(safe-printable-inset) resolves to 0px (no physical printer constraint). The value becomes non-zero when the page is sent to a real printer in Chrome 150. Use the slider below to simulate different printer margin values.

CSS env() values

env(safe-printable-inset) 0px
fallback (1cm) 1cm
@page margin applied env(safe-printable-inset, 1cm)
simulated inset 0mm

Page diagram

unprintable zone safe area 
/* Chrome 150: read the physical printer's unprintable inset */
:root {
  --safe-inset: env(safe-printable-inset, 0px);
}

/* Read via JS (computed style on :root) */
const inset = getComputedStyle(document.documentElement)
  .getPropertyValue('--safe-inset').trim();
/* → "6.35mm" on a typical laser printer */
/* → "0px" when viewed on screen */

/* Use in @page — the canonical use case */
@media print {
  @page {
    margin: env(safe-printable-inset, 1cm);
  }
}

see also

implementation reference

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