v131 · css

@page margin boxes

Add support for page margin boxes, when printing a web document, or exporting it as PDF.

concepts

  1. @page margins

    @page learns the full set of margin boxes (top-left, top-center, …, bottom-right). Real print headers and footers in CSS without per-printer hacks.

  2. Print template gallery

    Pick a real-world template (letterhead, report, invoice, manuscript) and watch the corner boxes and generated @page rebuild.

  3. Page numbers + 16 corners

    Pick a layout (report, book, manuscript, invoice) and inspect the generated @page rules for the 16 corner boxes.

  4. Running headers via string()

    Use string-set + string() for headers that track the current chapter across pages. Add a chapter dynamically and watch the header follow.

  5. Book Spread

    A simulated two-page spread showing how @page :left and @page :right assign mirrored margin box content to even and odd pages — chapter title outer-top-left on left pages, author outer-top-right on right pages, page numbers outer-bottom. Switch between book, report, thesis, and magazine templates to see how the margin box assignments shift.

why it shipped

Without this feature, authors have no means of providing their own headers, footers, or, say, a logo in one corner of every page, when printing, if the built-in CSS layout engine of the browser is to be used.

references