Part Four — Paged Media Chapter Seventeen

Page Furniture

Running headers, folios, and section markers are the document's navigational system. Done well, they are invisible. Done poorly, they compete with the text they exist to serve.

Running headers and footers with Paged.js
Page numbers: placement, style, and numbering systems
Chapter titles and section markers in margins
Implementing these with Paged.js margin boxes

The term page furniture comes from the print shop. It refers to everything on the page that is not the primary content — the running headers that tell you where you are in the book, the folio that gives the page its number, the section markers and chapter titles that appear in the margin or at the head of the page. These elements are structural, not decorative. They exist to help the reader navigate. And like all good navigational systems, their success is measured by how rarely the reader consciously notices them. You notice a running header when it is wrong, or when it is too prominent, or when it is missing. When it is working, you simply know where you are — without knowing how you know.

Implementing page furniture in Paged.js requires understanding three things: the margin box system introduced in Chapter 16, which provides the positions where furniture can appear; the content property and its generated content functions, which provide the text for those positions; and the string-set property, which captures content from the document flow and makes it available in the margin boxes. This chapter covers all three, and ends with the complete page furniture implementation for The Compositor's Garden.

· · ·

Running headers The design and the conventions

A running header is a line of text that appears at the top of every page — or every page of a section — identifying the reader's current position in the document. In a book, the convention is for the verso (left-hand) page to carry the book title, and the recto (right-hand) page to carry the current chapter title. This arrangement allows the reader to locate themselves at two scales simultaneously: which book they are in, and which chapter. It is a convention old enough that departing from it requires a clear reason.

In a shorter document — a report, a long article, an academic paper — a single running header on every page is typically sufficient: the document title, or the current section title. The convention for reports and papers is to place the running header centered at the top of the page, or left-aligned on a single-sided document. For a two-sided report, the verso-recto convention can be applied even if the document is a report rather than a book — the formality it adds is appropriate for professional documents.

The typography of the running header should be clearly subordinate to the body text. It should be smaller — typically at the --text-xs size from the type scale — lighter in color than the body text, and set in a typeface or style that distinguishes it from the content. The most common approaches are: all-caps with tracking in the UI typeface, or small caps in the body typeface. Both work; both signal that this is navigational text rather than content.

A rule — a thin horizontal line — between the running header and the body text is a classical convention that clearly delineates the navigational zone from the content area. It is optional but useful, particularly in documents where the visual weight of the running header is close to that of the body text. In The Compositor's Garden, we use a very light rule, which creates a clear separation without adding visual weight.

· · ·

Capturing text with string-set How Paged.js reads the document

The key mechanism that makes running headers work in CSS Paged Media is the string-set property. This property, applied to an element in the document content, captures that element's text content and stores it in a named string. The stored string can then be retrieved in a margin box using the string() function in the content property.

The string-set property takes two values: a name for the string, and a content value. The most common content value is content(text), which captures the text content of the element (without any child elements' styles). You can set multiple strings on the same element, and the same named string can be updated by multiple elements throughout the document — when a new chapter heading is encountered, it updates the stored chapter-title string, and subsequent pages show the new chapter title.

/* ── Capture text for running headers ─────────── */

/* Capture the book title from the title-page h1  */
.title-page h1 {
  string-set: book-title content(text);
}

/* Capture each chapter title as it appears       */
.chapter-opener h1 {
  string-set: chapter-title content(text);
}

/* Use the captured strings in margin boxes       */
@page body:left {   /* verso pages: book title   */
  @top-left {
    content:        string(book-title);
    font-family:    var(--font-ui);
    font-size:      var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ink-faint);
  }
}

@page body:right {  /* recto pages: chapter title */
  @top-right {
    content:        string(chapter-title);
    font-family:    var(--font-ui);
    font-size:      var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ink-faint);
  }
}

The :left and :right pseudo-classes on named page rules target verso and recto pages respectively. This is the mechanism that enables the classic book convention of different running headers on left and right pages. A page rule without either pseudo-class applies to all pages of that type.

The string() function has a second optional argument that controls which value of the string to use on a given page: first (the first value set on the page), last (the last value set on the page), or start (the value at the start of the page — the value that was set on or before the current page). The default is start, which means the running header shows the chapter title that was current when the page began — the correct behavior for most documents. If a chapter heading appears mid-page, the header still shows the previous chapter title on that page, and updates from the next page onward.¹

Running headers on a book spread — verso and recto @page :left / :right

Figure 17.1 — Running headers on a book spread. Verso (left page): the book title appears at @top-left, aligned to the outer edge of the text column. The folio appears at the outer edge of the foot margin. Recto (right page): the current chapter title appears at @top-right, also aligned to the outer edge. The folio mirrors the verso placement. Both headers and folios are set in the UI typeface at --text-xs, in a faint color that clearly subordinates them to the body text. A light rule separates both from the content area.

· · ·

Page numbers Placement, style, and numbering systems

The folio — the page number — is the most functionally important piece of page furniture. Without it a reader cannot navigate by page reference, cannot easily return to a passage, cannot follow a cross-reference. Designing it well means choosing an appropriate position, an appropriate typographic treatment, and the correct numbering system for each section of the document.

Position is the first decision. The most legible placement for a folio in a book is at the outer edge of the foot margin — the bottom corner farthest from the spine on each page. This placement is visible when fanning the pages from the outer edge (as a reader does when searching for a specific page), is consistent between recto and verso, and sits below the reading area without competing with it. A centered folio is more symmetrical and works well for single-sided documents. A header folio — placed in the running header zone rather than the foot — is common in academic papers and technical documents, often combined with the section title.

Typographic treatment should match the running header: same typeface, same size, same color. The folio should not call attention to itself. In The Compositor's Garden, folios are set in Outfit at --text-xs, in the --ink-faint color, at the outer-bottom corner of each page.

Numbering systems vary by document section. Front matter — the pages before the main text begins — is conventionally numbered in lowercase roman numerals (i, ii, iii, iv). The main text resets to arabic numerals (1, 2, 3). An appendix or second volume might use a prefix system (A-1, A-2). In CSS Paged Media, different numbering systems are applied using named pages with different counter styles:

/* ── Page counter styles by section ──────────── */

/* Front matter: lowercase roman numerals         */
@page front-matter {
  @bottom-center {
    content: counter(page, lower-roman);
    font-family: var(--font-ui);
    font-size:   var(--text-xs);
    color:       var(--ink-faint);
  }
}

/* Reset counter at start of main body            */
.main-body {
  counter-reset: page 1;
}

/* Body: arabic, outer edge                       */
@page body:left {
  @bottom-left {
    content: counter(page);
    font-family: var(--font-ui);
    font-size:   var(--text-xs);
    color:       var(--ink-faint);
    letter-spacing: 0.06em;
  }
}

@page body:right {
  @bottom-right {
    content: counter(page);
    font-family: var(--font-ui);
    font-size:   var(--text-xs);
    color:       var(--ink-faint);
    letter-spacing: 0.06em;
  }
}

Outer foot — book

@bottom-left on verso, @bottom-right on recto. Visible when fanning pages. The classic book convention.

Centre foot — report

@bottom-center. Symmetrical, appropriate for single-sided reports and academic papers.

Header folio — technical

§ 3.2 · 47

@top-right with section number and page. Common in technical manuals and multi-part documents.

· · ·

Section markers and chapter decorations Signalling structure in the margin

Beyond the running header and folio, some documents use additional elements to mark structure within the page. Chapter numbers displayed large and ghosted behind the chapter title text, part names in the outer margin, section indicators in a narrow side margin — these are all examples of what might be called decorative furniture: elements that are primarily structural but that also contribute to the visual character of the page.

In The Compositor's Garden, we use one such element: a large, ghosted chapter number behind the chapter title on chapter opener pages. This is implemented not in a margin box but in the HTML itself — a <span> with the chapter number, positioned absolutely behind the title text using CSS. This approach is appropriate when the decorative element is content-dependent (the chapter number changes for each chapter) and too large or complex for a margin box.

Another common decorative element is the drop folio — a folio at the foot of the page that incorporates a short rule or ornament above it. In Paged.js, this can be implemented using the @bottom-center margin box with a custom content value that includes a CSS-generated decoration:

/* ── Styled folio with rule above ─────────────── */
@page body {
  @bottom-center {
    content:        counter(page);
    font-family:    var(--font-ui);
    font-size:      var(--text-xs);
    color:          var(--ink-faint);
    letter-spacing: 0.1em;

    /* Rule above the folio number                 */
    border-top:     1px solid var(--rule);
    padding-top:    0.4rem;
    width:          3rem;
    text-align:     center;
  }
}

/* ── Chapter opener: no folio on first page ────── */
@page chapter-opener {
  @bottom-center {
    content: none; /* suppress folio on opener */
  }
}

The content: none declaration in the chapter opener page rule suppresses the folio on chapter-opening pages — a standard book convention. The folio resumes from the next page (the first body page of the chapter) automatically.

· · ·

The complete furniture CSS Bringing it all together for the project

The following is the complete page furniture implementation for The Compositor's Garden. It brings together the named page rules from Chapter 16 with the running header strings, folio styles, and section markers from this chapter, into a single stylesheet block that completes the Paged.js layer of the project:

/* ════════════════════════════════════════════
   Page furniture — The Compositor's Garden
   ════════════════════════════════════════════ */

/* 1. Capture strings from content              */
.title-page h1 {
  string-set: book-title content(text);
}

.chapter-opener h1 {
  string-set: chapter-title content(text);
}

/* 2. Front matter pages — roman numerals,
      centered, no running header               */
@page front-matter {
  @bottom-center {
    content:     counter(page, lower-roman);
    font-family: var(--font-ui);
    font-size:   var(--text-xs);
    color:       var(--ink-faint);
  }
}

/* 3. Chapter openers — no header, no folio     */
@page chapter-opener {
  @top-left       { content: none; }
  @top-center     { content: none; }
  @top-right      { content: none; }
  @bottom-center  { content: none; }
  @bottom-left    { content: none; }
  @bottom-right   { content: none; }
}

/* 4. Body pages — verso: book title left,
      folio outer-left                          */
@page body:left {
  @top-left {
    content:        string(book-title);
    font-family:    var(--font-ui);
    font-size:      var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ink-faint);
    border-bottom:  1px solid var(--rule);
    padding-bottom: 0.3rem;
    width:          100%;
  }
  @bottom-left {
    content:        counter(page);
    font-family:    var(--font-ui);
    font-size:      var(--text-xs);
    letter-spacing: 0.06em;
    color:          var(--ink-faint);
  }
}

/* 5. Body pages — recto: chapter title right,
      folio outer-right                         */
@page body:right {
  @top-right {
    content:        string(chapter-title);
    font-family:    var(--font-ui);
    font-size:      var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ink-faint);
    border-bottom:  1px solid var(--rule);
    padding-bottom: 0.3rem;
    width:          100%;
    text-align:     right;
  }
  @bottom-right {
    content:        counter(page);
    font-family:    var(--font-ui);
    font-size:      var(--text-xs);
    letter-spacing: 0.06em;
    color:          var(--ink-faint);
  }
}

/* 6. Reset page counter at main body start     */
.main-body {
  counter-reset: page 1;
}

Project checkpoint

The page furniture for The Compositor's Garden is now complete. The book title appears on every verso, the chapter title on every recto, and the folio at the outer foot corner. Chapter openers suppress all furniture. Front matter uses roman numeral folios. The counter resets to 1 at the start of the main body.

At this point, opening the project HTML in a browser with Paged.js loaded will show a document that looks, for the first time, genuinely like a book. The pages are the right size, the margins are proportional, the running headers are in place, and the folios are correctly positioned. The next chapter — Chapter 18 — adds the last major layer: break controls, widows and orphans, and the fine-grained pagination decisions that separate a well-made document from one that merely paginated correctly.

· · ·

Page furniture is the quietest work in typesetting. The running header never asks to be noticed. The folio never calls for attention. Their success is measured entirely in terms of what the reader does not experience: disorientation, searching, uncertainty about location. Getting this work right is invisible — and invisibility, in this context, is the highest standard.

Chapter 18 addresses the noisier problems: controlling where pages break, preventing widows and orphans, keeping headings with their following text, and managing the specific pagination challenges that appear in The Compositor's Garden as the document moves toward its final form.

Notes

The three values of the second argument to string() — first, last, and start — handle edge cases that arise when a string is updated multiple times on a single page. start (the default) is correct for running headers that should reflect the state at the beginning of the page. last would update the running header mid-page — useful if you want the header to reflect the last heading on the page, as some reference books do. first is rarely used in practice. For most document work, the default start behavior is correct and no second argument is needed.
The CSS counter-reset property, when applied to the element that begins the main body, resets the page counter to 1 at that point in the document. Paged.js respects this reset — pages before the element are numbered in whatever system is specified by the front-matter page rule, and pages from the element onward restart from 1. This two-counter convention (roman numerals for front matter, arabic for body) is so established in book production that most readers never consciously register it — they simply know that page 1 is where the text begins.
For documents where the running header needs to reflect a section title rather than a chapter title — for instance, a long chapter with clearly numbered sections — a second string-set on the section heading elements can capture section titles independently of chapter titles. Two named strings (chapter-title and section-title) can then be used in different margin boxes, providing two levels of location information simultaneously. This is common in textbooks and technical references.