demo · v131

running headers from string-set + string()

The print equivalent of "running header that tracks the current chapter". string-set: chapter content() grabs the latest H2's text. @top-left { content: string(chapter); } renders it in the page margin. The header automatically follows as new chapters start mid-page.

Chapter 1 — Origins

Chapter 1 — Origins

The web's print model was always a coarse approximation of paged media. The first browsers shipped a single @page ruleset with margins and that was it. No corner boxes, no running headers, no named strings.

What changed in v131 is the realisation of the long-spec'd paged media model. Sixteen margin boxes, named strings, and counters all pull through to @page declarations.

1
Chapter 2 — Adoption

Chapter 2 — Adoption

Adoption of print-CSS features has always tracked enterprise print needs. Invoices, reports, statements — all of these need running headers and footers. Without them, a multi-page document looks amateurish.

2
Chapter 3 — Tooling

Chapter 3 — Tooling

Tooling has caught up. print-color-adjust, named strings, page margin boxes — these were all once browser-specific or polyfill-only.

3

the api

h2 { string-set: chapter content(); }

@page {
  margin: 48px;
  @top-left  { content: string(chapter); font: 9px monospace; }
  @bottom-right { content: counter(page); font: 10px monospace; }
}

see also