A running header that shows the current section on every page

Why this block is harder than it looks

A static running header is trivial. A running header that says which section you are in is not, because it has to change as the pages pass through the sections, and the content of a margin box is written in the page rule, which knows nothing about the body. The mechanism that connects them is string-set: a heading writes its text into a named string, and the margin box reads the current value of that string. It is elegant, it is not widely known, and its support varies, so the fallback matters as much as the technique.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Use string-set on the heading to capture its text, then read it in the margin box with the string function. That is the whole mechanism.
• Choose deliberately between the first and last value on a page. A page that starts in one section and ends in another can show either, and for a reference document the last is usually more useful because the reader is looking at the bottom.
• Keep the header short. It is one line at small size, so a long section title has to be truncated at the source rather than allowed to wrap and change the header height.
• Suppress it on the cover and on any full-page figure using a named page, the same as the folio.
• Provide a static fallback: if string-set does not resolve, the header shows nothing, and an empty header line is a silent failure. Put the document title in the same box so something is always there.
• Separate it from the body with space rather than with a rule, unless the document is dense. A rule under a running header on every page adds a lot of ink for very little.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<h2 class="section">Findings</h2>

<style>
  .section {
    string-set: section content();     /* capture the heading text */
    break-after: avoid;
  }

  @page {
    size: A4;
    margin: 26mm 20mm 24mm;

    @top-left {
      content: "Structural condition survey";
      font-size: 8pt;
      color: #777;
      vertical-align: top;
    }
    @top-right {
      /* the section this page ends in */
      content: string(section, last);
      font-size: 8pt;
      color: #777;
      vertical-align: top;
    }
  }
</style>

What breaks when it is built the obvious way

Assuming string-set resolved because the header line is present. The box is there either way, so a failure shows as an empty right-hand side rather than as an error, and on a document where every page happens to be inside one section it looks deliberate.

How to prove it survived pagination

Render a document with three sections and read the header on the first page of each. It should change. Then find a page that spans a section boundary and confirm it shows the value you chose rather than the other one.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The multi-page report template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.