demo · v131
page numbers, headers, footers — all 16 corner boxes
@page learns the full set of margin boxes (@top-left, @top-center, …, @bottom-right-corner). Counters and named strings finally compose: print "Page 3 of 12" in the bottom-center, chapter title in the top-left, document title in the top-right. Choose a layout and hit print — Chrome 131+ honours it.
Page Margin Boxes in CSS
Paged media has always needed sixteen edges. Top-left for the document title, top-center for the running header, top-right for the section name. Centered footers for "page X of Y" pulled from counters. Corner boxes for crop marks. Before v131, browsers ignored most of them.
Now @page + @top-left + @bottom-center { content: "Page " counter(page) " of " counter(pages); } just works in Chrome's print pipeline.
Use the dropdown to swap layouts. Hit "print preview" to see the boxes render in the real paged engine.
Page 1 of 1 v131