Footnotes and endnotes
Add numbered notes in page footers or collect them as endnotes.
Footnotes add supporting detail without interrupting the main text. Format leaves a numbered marker where you write each note and places its content in the page footer. You can also collect notes at the end of a chapter or document.
Footnotes work without a Numbering element.
Add a footnote
Write each note in a <Footnote> where you want its marker to appear. Add a <Footnotes> region to the Layout scaffolding to choose where page notes appear. Place it outside the Flow so it acts as a page footer:
<template>
<Document title="Student handbook" lang="en">
<Layout id="page" :width="793.71" :height="1122.52">
<main>
<Flow>
<p>
Fees include teaching materials
<Footnote>
Travel and accommodation are billed separately.
</Footnote>.
</p>
</Flow>
</main>
<Footnotes />
</Layout>
</Document>
</template><template data-type="document" data-title="Student handbook" data-lang="en">
<template data-type="layout" data-id="page" data-width="793.71px" data-height="1122.52px">
<main>
<template data-type="flow">
<p>
Fees include teaching materials
<template data-type="footnote">
Travel and accommodation are billed separately.
</template>.
</p>
</template>
</main>
<template data-type="footnotes"></template>
</template>
</template>Numbers start at 1 and continue through the document. Notes can contain emphasis, links, and other markup.
Choose the footer location
The example above places the notes after the page body. Add these rules to the Layout's stylesheet to arrange the body and notes vertically. The footnotes region's default margin-top: auto pushes it to the bottom of the page:
:host {
display: flex;
flex-direction: column;
}
main {
flex: 0 1 auto;
}If you omit Footnotes, Format adds a basic notes region after the Layout's content. Add your own region to control its placement and settings.
Format reserves space for notes during pagination, so adding a note can move body text onto the next page. Footer notes stay with their markers and aren't split across pages. For notes too long to fit alongside their markers, use endnotes.
Add a heading
Put a heading or introductory text inside Footnotes to show it above the generated note list:
<Footnotes>
<p>Notes</p>
</Footnotes><Footnotes>
<p>Notes</p>
</Footnotes><template data-type="footnotes">
<p>Notes</p>
</template>In a page footer, this content repeats on every page that has notes. Set repeatHead to false to show it only once:
<Footnotes repeatHead={false}>
<p>Notes</p>
</Footnotes><Footnotes :repeat-head="false">
<p>Notes</p>
</Footnotes><template data-type="footnotes" data-repeat-head="false">
<p>Notes</p>
</template>Keep the heading inside the region when it should appear only with notes. A heading placed before the region in Layout scaffolding repeats even on pages without notes.
Set the numbering
Notes use a continuous count by default, including across chapters and Layouts. Adding another Footnotes region doesn't restart that count.
Restart on each page
Set restartEachPage on a Layout's footer region to number each page's notes from 1. Format updates the inline markers to match:
<Footnotes restartEachPage /><Footnotes restart-each-page /><template data-type="footnotes" data-restart-each-page></template>This setting applies to page footers. Endnotes retain their continuous numbers. For documents with several Layouts, use the same footnote numbering settings throughout. See the current scope of per-page restarting.
Change the number style
Set counterStyle on a Layout's footer region to change both its note numbers and inline markers:
<Footnotes counterStyle="lower-roman" /><Footnotes counter-style="lower-roman" /><template data-type="footnotes" data-counter-style="lower-roman"></template>This produces i, ii, iii, and so on. Without an override, notes use the document's numbering style, or decimal if none is set.
Collect endnotes
Place Footnotes in the Flow's content, after the notes you want to gather. The markers stay in the text, and the note bodies appear together at that position. This example gives each chapter its own notes:
<Document title="Student handbook" lang="en">
<Layout id="page" width={793.71} height={1122.52}>
<Flow>
<h1>Admissions</h1>
<p>
Applications close on 1 August
<Footnote>
Late applications are considered if places remain.
</Footnote>.
</p>
<Footnotes>
<h2>Admission notes</h2>
</Footnotes>
<h1>Fees</h1>
<p>
Fees include teaching materials
<Footnote>
Travel and accommodation are billed separately.
</Footnote>.
</p>
<Footnotes>
<h2>Fee notes</h2>
</Footnotes>
</Flow>
</Layout>
</Document><template>
<Document title="Student handbook" lang="en">
<Layout id="page" :width="793.71" :height="1122.52">
<Flow>
<h1>Admissions</h1>
<p>
Applications close on 1 August
<Footnote>
Late applications are considered if places remain.
</Footnote>.
</p>
<Footnotes>
<h2>Admission notes</h2>
</Footnotes>
<h1>Fees</h1>
<p>
Fees include teaching materials
<Footnote>
Travel and accommodation are billed separately.
</Footnote>.
</p>
<Footnotes>
<h2>Fee notes</h2>
</Footnotes>
</Flow>
</Layout>
</Document>
</template><template data-type="document" data-title="Student handbook" data-lang="en">
<template data-type="layout" data-id="page" data-width="793.71px" data-height="1122.52px">
<template data-type="flow">
<h1>Admissions</h1>
<p>
Applications close on 1 August
<template data-type="footnote">
Late applications are considered if places remain.
</template>.
</p>
<template data-type="footnotes">
<h2>Admission notes</h2>
</template>
<h1>Fees</h1>
<p>
Fees include teaching materials
<template data-type="footnote">
Travel and accommodation are billed separately.
</template>.
</p>
<template data-type="footnotes">
<h2>Fee notes</h2>
</template>
</template>
</template>
</template>Each endnotes list collects notes since the previous endnotes list, in document order. It can collect notes from earlier Flows and Layouts. Place one after each chapter for chapter notes, or one at the end for all notes. Each note appears in only one list.
To start the notes on a new page, add a <PageBreak> before Footnotes. Its children, such as the headings above, appear once before the entries. Endnotes flow with the document's content and use its pagination rules.
Mix footnotes and endnotes
Notes collected by an endnotes list don't also appear in page footers. Notes after the last endnotes list go to their page footers, using an automatic footer if you haven't supplied one. Numbering remains continuous by default across both kinds of notes.
Style endnote numbers
Endnotes keep the numbers assigned to their inline markers. Set the document default to change their number style:
<Numbering defaultHeadings={false} counterStyle="lower-roman" /><Numbering :default-headings="false" counter-style="lower-roman" /><template data-type="numbering" data-default-headings="false" data-counter-style="lower-roman"></template>Setting defaultHeadings to false leaves headings unnumbered. If the document already uses Numbering, update its counterStyle instead. A Layout footer's counterStyle takes precedence for notes written in that Layout. Setting it on an endnotes list has no effect.
Style markers and notes
Use the generated data-type attributes in your Layout's stylesheet. For example, set the note text size, space the entries, and emphasize their numbers:
[data-type="footnotes"] {
font-size: 12px;
line-height: 1.4;
color: #444;
border-top-color: #ccc;
}
[data-type="footnote-entries"] {
column-gap: 0.75em;
row-gap: 0.5em;
}
[data-type="footnote-marker"],
[data-type="footnote-number"] {
color: #222;
font-weight: 600;
}The default note list uses two grid columns: one for numbers and one for content. To style endnotes separately, target [data-type="footnotes"][data-variant="inline"]. See the DOM contract for the full set of styling attributes.