RunningHead

A RunningHead shows the current chapter or section in a page header or footer. Place it in the scaffolding of a Layout or Flow. Format selects a heading for each page and displays its title and number, if numbered.

Use match to select headings and show to choose which one appears. Set data-running-head on a heading to override its title for the running head. An empty value hides that heading's entry. Set data-bookmark on a heading to override its PDF bookmark title separately.

Fields

Example

This header shows the chapter number and title, such as "01. General information", and the page number.

<Numbering defaultHeadings={false}>
	<NumberingRule match="h1" format="{h1:decimal-leading-zero}." />
</Numbering>
<Layout id="page" width={793.71} height={1122.52}>
	<header>
		<RunningHead match="h1" show="start" />
		<PageNumber />
	</header>
	<Flow>
		<h1>General information</h1>
		<p>Read this chapter before submitting your application.</p>
	</Flow>
</Layout>

<Numbering :default-headings="false">
	<NumberingRule match="h1" format="{h1:decimal-leading-zero}." />
</Numbering>
<Layout id="page" :width="793.71" :height="1122.52">
	<header>
		<RunningHead match="h1" show="start" />
		<PageNumber />
	</header>
	<Flow>
		<h1>General information</h1>
		<p>Read this chapter before submitting your application.</p>
	</Flow>
</Layout>

<template data-type="numbering" data-default-headings="false">
	<template data-type="numbering-rule" data-match="h1" data-format="{h1:decimal-leading-zero}."></template>
</template>
<template data-type="layout" data-id="page" data-width="793.71px" data-height="1122.52px">
	<header>
		<span data-type="running-head" data-match="h1" data-show="start"></span>
		<span data-type="page-number"></span>
	</header>
	<template data-type="flow">
		<h1>General information</h1>
		<p>Read this chapter before submitting your application.</p>
	</template>
</template>

Select a heading

Set match to a CSS selector for the headings to follow. Set show to choose which heading appears on each page.

The default, first, shows the first matching heading on the page. Use start to show the section active at the top of the page. For example, if chapter two starts halfway down a page, first shows chapter two and start shows chapter one.

If the page opens with several matching headings, start uses the last of those headings. Pages without a match keep the previous section, even across Layouts, until a within match or reset ends it. See RunningHeadShow for all options.

Pair chapter and section headers

Use within to limit a section header to its parent chapter:

<RunningHead match="h1" show="start" />
<RunningHead match="h2" within="h1" show="start" />

<RunningHead match="h1" show="start" />
<RunningHead match="h2" within="h1" show="start" />

<span data-type="running-head" data-match="h1" data-show="start"></span>
<span data-type="running-head" data-match="h2" data-within="h1" data-show="start"></span>

Each h1 ends the previous section. The section header stays empty until an h2 in the selected chapter applies. Use the same show value on both headers to keep them in the same chapter, except when showing a range.

For a catalog or dictionary, use show="range" to show the first and last sections on a page. If both entries have the same text, Format shows it once. With within, the range covers the chapter active at the top of the page. Pair it with show="start" on the chapter header.

Customize the text

By default, a RunningHead uses the heading's title and number. It also works without <Numbering>, showing the title alone. To change the number format, use the same {counter} placeholders as a <NumberingRule>.

Set data-running-head on a heading to use a shorter title:

<h1 data-running-head="Financial support">Tuition fees, scholarships, and financial support</h1>

<h1 data-running-head="Financial support">Tuition fees, scholarships, and financial support</h1>

<h1 data-running-head="Financial support">Tuition fees, scholarships, and financial support</h1>

An empty value, data-running-head="", hides the entire entry for that heading, including its number. Add data-running-head-reset to an element to end the current section, for example on an appendix title page.

Set data-bookmark on a heading to override its PDF bookmark title separately.

Size the running head

Format fills running heads after placing the page's content. Each running head needs space reserved in the layout so its text cannot move other content.

The default height is one line. In a flex row, the running head fills the remaining width. In a grid, give it a column with an explicit or flexible width. Use align-items: center to align it with a page number. Baseline alignment uses the bottom of the running head's box.

To reserve two lines, set --running-head-lines:

[data-type='running-head'] {
	--running-head-lines: 2;
}

Text beyond the reserved lines ends with an ellipsis. If you set a height smaller than those lines, the box clips the text. Format reports both cases in numbering.truncatedRunningHeads in the document summary.

Styling

The text inherits font and color from the RunningHead. Use ::part() to style individual parts, such as the number:

[data-type='running-head']::part(number) {
	font-weight: 700;
}

The text is inside a shadow root. Ordinary selectors cannot reach it: :has() cannot detect its contents, and :empty matches even a filled RunningHead.

Constraints

• Follow one Flow per Layout. If match selects headings in multiple Flows of the same Layout, narrow it with a class or another selector.
• Use a supported element. The default is span. The as prop also accepts div, p, h1–h6, article, aside, blockquote, body, footer, header, main, nav, and section.
• Reserve width and height. A visible running head with text must have both.
• Keep CSS containment. Format applies contain: strict to keep the text from affecting the page layout. Do not override it in the element's inline style. Supported display values are block, flow-root, list-item, inline-block, flex, inline-flex, grid, and inline-grid. You can hide a running head with display: none.

Violations return INVALID_RUNNING_HEAD. Check styles that apply only to the last page, too.

Related

• RunningHeadShow
• NumberingRule
• TableOfContents
• Numbering guide