Expose unprintable areas via CSS

at a glance

why it exists

Every printer has a small "safety margin" — an unprintable strip around the edges of the paper caused by the paper-handling mechanism gripping or feeding the sheet. The default CSS page margins are expected to be larger than these strips so content doesn't fall into the unprintable zone. In practice, web print stylesheets either use fixed oversized margins (wasting paper) or risk clipping near the edges on printers with larger hardware margins.

By exposing the actual hardware margins as CSS environment variables, print stylesheets can set margins to exactly the hardware limit, avoiding both waste and clipping. The values are read-only and device-specific; they are 0 in non-print media.

shape of the API

Four new CSS environment variables, available inside @page rules and print stylesheets:

The values are <length>s (e.g. 4mm). They are 0px in screen media. The exact variable names are as defined in the CSS Paged Media spec draft; check the spec for any renames before the standard is final.

example

@media print {
  @page {
    /* Use the hardware margin as the minimum margin on each side */
    margin-top: max(12mm, env(page-margin-safety-top, 4mm));
    margin-right: max(10mm, env(page-margin-safety-right, 4mm));
    margin-bottom: max(12mm, env(page-margin-safety-bottom, 4mm));
    margin-left: max(10mm, env(page-margin-safety-left, 4mm));
  }

  body {
    font-size: 11pt;
    line-height: 1.4;
  }
}

browser support

see also

• Chrome Platform Status — Expose unprintable areas via CSS
• CSS Paged Media Level 3 — page-margin-safety