# Footnotes at the foot of the column that cites them
> Markdown [^id] markers become numbered notes at the foot of the citing column, with switches for one column, chapter-end notes and continuous numbers.
- HTML version: https://postext.dev/en/cookbook/novel-footnotes-column-foot
- Recipe Nº 071 · Boxes & notes · Level 2 (Intermediate) · Outputs: Canvas, PDF, Live controls
- Genres: Fiction, drama & literary prose
- Requires postext ≥ 1.6.0, postext-pdf ≥ 1.6.0 · tested with 1.6.0, postext-pdf 1.6.0 on 2026-09-28
- Pages: [1](https://postext.dev/cookbook/novel-footnotes-column-foot/en/p01.webp?v=a9d9e510), [2](https://postext.dev/cookbook/novel-footnotes-column-foot/en/p02.webp?v=a9d9e510), [3](https://postext.dev/cookbook/novel-footnotes-column-foot/en/p03.webp?v=a9d9e510)
- PDF: https://postext.dev/cookbook/novel-footnotes-column-foot/en/novel-footnotes-column-foot.pdf?v=a9d9e510
- Open in Sandbox: https://postext.dev/en/sandbox#recipe=novel-footnotes-column-foot&lang=en (.postext: https://postext.dev/cookbook/novel-footnotes-column-foot/en/novel-footnotes-column-foot.postext)
- Last updated: 2026-09-28
- Other languages: [es](https://postext.dev/es/cookbook/novel-footnotes-column-foot.md)
## What you'll build
A school edition of *Lazarillo de Tormes*, 210 × 280 mm in two columns of EB Garamond: the prologue and the start of the first treatise, where Lázaro is born in a mill on the Tormes and goes out into the world with a blind man. The notes explain what a reader of 1554 knew and a reader today does not: the village of Tejares, the expedition to the island of Los Gelves, the stone bull on the bridge of Salamanca. Each one sits at the foot of the column that cites it, set smaller under a short oxblood rule, so the eye drops from the number to the note and back without turning a page. The English edition carries Clements Markham's own notes from his 1908 translation.
**This recipe answers:**
- How do I set footnotes at the foot of the column where they are cited?
## The short answer
The notes at the foot of the column that cites them.
```js
// script.js, lines 40–52
// In the Markdown: `Tejares,[^9]` cites a note (the id may be a word: `[^tejares]`), and
// a paragraph that opens with `[^9]:` anywhere in the chapter defines it. The engine
// numbers the notes in order of citation and keeps each note in the column of the line
// that cites it: a line whose note does not fit under it moves on with the note.
const footnotes = () => ({
placement: options.placement, // 'column' (the foot of the citing column) or 'chapterEnd'
numbering: options.numbering, // 'chapter': 1, 2, 3… again under every chapter heading
fontSize: pt(8.5), // off the baseline grid: the notes stack up from the column's foot
lineHeight: pt(10.5),
hangingIndent: em(0.9), // turnover lines align past the number
spaceBetween: pt(1.5),
separator: { width: 0.25, lineWidth: pt(0.5), color: col('oxblood') },
});
```
## Ingredients
**Teaches**
- [Footnotes](https://postext.dev/en/docs/document-format.md#footnotes): Notes cited with [^id] and set at the foot of the column that cites them, or after the chapter, numbered per chapter or through the book.
**Also uses**
- [Superscripts and subscripts](https://postext.dev/en/docs/document-format.md#inline-formatting)
- [One or two columns](https://postext.dev/en/docs/configuration.md#layout-types)
- [Designed openers](https://postext.dev/en/docs/configuration.md#span-and-advanced-design)
- [Heading attributes](https://postext.dev/en/docs/document-format.md#heading-attributes)
- [Running heads and folios](https://postext.dev/en/docs/configuration.md#headers--footers)
- [Mirrored margins](https://postext.dev/en/docs/configuration.md#mirrored-margins)
- [Heads by page role](https://postext.dev/en/docs/configuration.md#text-elements)
- [Paragraph styles](https://postext.dev/en/docs/configuration.md#paragraph-styles)
- [Semantic colour palette](https://postext.dev/en/docs/configuration.md#color-palette)
- [Paper colour](https://postext.dev/en/docs/configuration.md#page)
- [Widows, orphans and runts](https://postext.dev/en/docs/configuration.md#orphans-widows-runts-and-keep-together-rules)
- [PDF export](https://postext.dev/en/docs/configuration.md#generating-pdfs)
- [Accessible tagged PDF](https://postext.dev/en/docs/configuration.md#pdf-generation-config)
- [Full-width chapter band](https://postext.dev/en/docs/configuration.md#span-and-advanced-design)
- [Fonts embedded in the PDF](https://postext.dev/en/docs/configuration.md#why-a-font-provider)
**Config at a glance**
- [`bodyText`](https://postext.dev/en/docs/configuration.md#body-text), [`colorPalette`](https://postext.dev/en/docs/configuration.md#color-palette), [`footer`](https://postext.dev/en/docs/configuration.md#headers--footers), `footnotes`, [`header`](https://postext.dev/en/docs/configuration.md#headers--footers), [`headings`](https://postext.dev/en/docs/configuration.md#headings), [`layout`](https://postext.dev/en/docs/configuration.md#layout), [`locale`](https://postext.dev/en/docs/configuration.md#hyphenation), [`page`](https://postext.dev/en/docs/configuration.md#page), [`paragraphStyles`](https://postext.dev/en/docs/configuration.md#paragraph-styles)
**APIs**
- [`buildDocument`](https://postext.dev/en/docs/configuration.md#building-a-document), [`clearMeasurementCache`](https://postext.dev/en/docs/configuration.md#measurement-cache), [`decompressWoff2`](https://postext.dev/en/docs/configuration.md#browser-font-provider-fontsource--woff2), [`renderPageToCanvas`](https://postext.dev/en/docs/configuration.md#rendering-a-page-to-a-bitmap), [`renderToPdf`](https://postext.dev/en/docs/configuration.md#generating-pdfs)
**Typefaces**
- EB Garamond (OFL-1.1), Bodoni Moda (OFL-1.1), IBM Plex Sans Condensed (OFL-1.1)
## Method
### 1 · Cite the note where it belongs, define it anywhere
The configuration is [the short answer](#the-short-answer) above; the rest is Markdown. `natives of Tejares,[^9]` prints a superscript number glued to the comma, and a paragraph that opens with `[^9]:` holds the note. Definitions leave the flow wherever you write them, so this sample keeps them all at the end of the chapter, the way Markham's notes stood in the source file. The numbers follow the order of citation, so the Markdown ids can be words (`[^tejares]` in the Spanish edition) and renumbering a chapter never means editing the notes.
### 2 · Leave the column room for its notes
Before it sets a line, the layout adds the height of the notes that line cites for the first time, and the rule when it is the column's first note. A line whose note does not fit under it goes to the next column with its paragraph, under the widow and orphan rules, so a number never points at a note on another column. The notes stack up from the foot at their own size and leading, off the baseline grid, while the text above them stays on it; column balancing counts only the text.
### 3 · Sink every opener to the same line
```js
// script.js, lines 56–74
const opener = {
enabled: true,
// The sink holds a two-line title and its rule, with ~8 mm to the first line of text,
// so every chapter starts on the same grid line whatever its title's length.
minHeight: pt(LEAD * 10),
slot: { elements: [
{ kind: 'text', id: 'kicker', content: '{attr.kicker}', ...label, fontSize: pt(8.5),
letterSpacing: pt(1.8), color: col('oxblood'), align: 'center',
placement: at('container', 'top', 0, 7) },
{ kind: 'text', id: 'title', content: '{titleText}', fontFamily: 'Bodoni Moda', italic: true,
fontSize: pt(26), lineHeight: 1.1, color: col('ink'), align: 'center',
overflow: 'wrap', // design text ends in an ellipsis by default
placement: { ...at('container', 'top-left', 0, 13),
size: { width: 'fill', height: 'auto' } } },
{ kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(0.75), color: col('oxblood'),
placement: { anchor: { to: '#title', edge: 'below' }, // a rule starts at the box's left
offset: { x: mm((MEASURE - 14) / 2), y: mm(4.5) }, size: { width: mm(14) } } },
] },
};
```
The opener spans both columns and draws the chapter kicker from the heading's `kicker` attribute. `minHeight` reserves ten grid lines, enough for a two-line Bodoni title and its rule, so the text of every chapter starts on the same line and the rule never lands on the first line of text.
### 4 · Put the book on the verso and the chapter on the recto
```js
// script.js, lines 78–95
const head = (id, content, parity, edge, x, extra = {}) => ({
kind: 'text', id, content, parity, pages: 'body', // never on openers
...label, fontSize: pt(7.5), letterSpacing: pt(1.3), color: col('muted'),
placement: at('page', edge, x, 13), ...extra,
});
const folio = { color: col('oxblood') };
const header = { elements: [
head('verso-folio', '{pageNumber}', 'even', 'top-left', MARGIN.outer,
{ ...folio, align: 'left' }),
head('verso-title', '{title}', 'even', 'top-left', MARGIN.outer + 9, { align: 'left' }),
head('recto-title', '{chapterTitle}', 'odd', 'top-right', -(MARGIN.outer + 9),
{ align: 'right', overflow: 'ellipsis', size: { width: mm(120) } }),
head('recto-folio', '{pageNumber}', 'odd', 'top-right', -MARGIN.outer,
{ ...folio, align: 'right' }),
] };
// Openers carry a drop folio instead, centred under the text block.
const footer = { elements: [{ ...head('drop-folio', '{pageNumber}', 'all', 'bottom', 0,
{ ...folio, align: 'center', placement: at('page', 'bottom', 0, -11) }), pages: 'opener' }] };
```
The heads are anchored to the page by parity, with the folio on the outer edge; `pages: 'body'` keeps them off the openers, which get a centred drop folio. A long chapter title ends in an ellipsis at 120 mm instead of running into the folio.
### 5 · Try the other placements
```js
// script.js, lines 204–230
const CHOICES = {
columns: [[2, t({ en: 'Two columns', es: 'Dos columnas' })],
[1, t({ en: 'One column', es: 'Una columna' })]],
placement: [['column', t({ en: 'Column foot', es: 'Pie de columna' })],
['chapterEnd', t({ en: 'End of chapter', es: 'Final del capítulo' })]],
numbering: [['chapter', t({ en: 'Per chapter', es: 'Por capítulo' })],
['document', t({ en: 'Continuous', es: 'Continua' })]],
};
const bar = document.createElement('form');
bar.id = 'options';
bar.ariaLabel = t({ en: 'Footnote options', es: 'Opciones de las notas' });
for (const [key, choices] of Object.entries(CHOICES)) {
const group = bar.appendChild(document.createElement('fieldset'));
for (const [value, text] of choices) {
const input = Object.assign(document.createElement('input'), { type: 'radio', name: key,
value: String(value), checked: options[key] === value });
const item = group.appendChild(document.createElement('label'));
item.append(input, text);
}
}
bar.addEventListener('change', (event) => {
const { name, value } = event.target;
options[name] = name === 'columns' ? Number(value) : value;
doc = buildDocument({ markdown }, config()); // the fonts are loaded by now
showPages(doc, { title: TITLE });
});
document.getElementById('pages').before(bar);
```
Each switch builds the chapter again with one option changed. **One column** sets the notes at the foot of the page, which is the column there. **End of chapter** sets them after the chapter's last paragraph and drops them to the foot of the column they close, under the same rule. **Continuous** runs the numbers on from the prologue into the first chapter instead of starting again at 1.
## The whole recipe
The files below are composed from the recipe's folder, with the sample text and the Cookbook's shared kit inlined. To run them as one page, put the HTML in ``, the CSS in a ``);
document.body.insertAdjacentHTML('afterbegin',
'');
document.getElementById('pt-title').textContent = document.title || 'Postext';
addEventListener('error', (event) => kitFail(event.error ?? event.message));
addEventListener('unhandledrejection', (event) => kitFail(event.reason));
}
if (title) document.getElementById('pt-title').textContent = title;
return document.getElementById('pages')
?? document.body.appendChild(Object.assign(document.createElement('main'), { id: 'pages' }));
}
function kitStatus(text) {
viewer();
document.getElementById('pt-status').textContent = text;
}
function kitFail(error) {
document.documentElement.dataset.postext = 'error';
kitStatus(`Error: ${error?.message ?? error}`);
}
// ─── Kit · pdf v1 ── the same in every recipe that exports a PDF ──────────────
/** postext-pdf embeds TrueType bytes. Fetch the Fontsource file the screen
* used, snapping to a weight the family ships and falling back to upright
* when it has no italic: the PDF asks for every face a block could use. */
async function fontsourceProvider(family, weight, style) {
const id = fontsourceId(family);
const meta = await fontsourceMeta(family);
const weights = meta?.weights?.length ? meta.weights : [400, 700];
const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
const res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${w}-${s}.woff2`);
if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} (${res.status})`);
return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
}
/** A "Build the PDF" button in the bar. Once built: "Open the PDF" (a new
* tab, since CodePen's preview frame cannot show PDFs) and a download link. */
function offerPdf(makePdf, filename) {
viewer();
const button = Object.assign(document.createElement('button'), { type: 'button', textContent: 'Build the PDF' });
button.dataset.postextPdf = filename;
button.addEventListener('click', async () => {
button.disabled = true;
button.textContent = 'Building the PDF…';
try {
const bytes = await makePdf();
const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }));
const size = `${Math.max(1, Math.round(bytes.length / 1024))} KB`;
button.replaceWith(
Object.assign(document.createElement('a'), { href: url, target: '_blank', rel: 'noopener', textContent: 'Open the PDF ↗' }),
Object.assign(document.createElement('a'), { href: url, download: filename, textContent: `Download ${filename} · ${size}` }));
} catch (error) {
button.disabled = false;
button.textContent = 'Build the PDF';
kitFail(error);
}
});
document.getElementById('pt-actions').append(button);
}
// ─── /Kit ───────────────────────────────────────────────────────────────────────
```
## Variations
### Keep chapter-end notes under the text
With `placement: 'chapterEnd'` the notes stand at the foot of the last column by default; `chapterEndAlign: 'text'` sets them right under the last paragraph.
```diff
placement: options.placement,
+ chapterEndAlign: 'text',
```
### Drop the rule
Without the rule the notes still stand off the text by `spaceAbove` and `spaceBelowRule`.
```diff
- separator: { width: 0.25, lineWidth: pt(0.5), color: col('oxblood') },
+ separator: { enabled: false },
```
## Pitfalls
- **Any headings object switches off the H1 page break.** By default an H1 breaks to a recto (always-odd), but passing any headings object resets that default, so chapters run on and span: 'page' does nothing. Restate headings.levels[0].breakBefore: { enabled: true, parity } in every config.
- **Load every face before layout.** Layout measures text with the faces the browser has loaded and caches the widths, so a face that arrives after the first build leaves wrong line breaks and a PDF that no longer matches the screen. Load every weight and style first, and call clearMeasurementCache() before rebuilding when one arrives late.
- **A swapped palette misses design elements and the reference colour.** postext 1.4.1 reads colorPalette into the text styles (body, headings, lists, captions, tables, boxes) but not into the elements of headers, footers, openers and part pages, nor into bodyText.referenceColor: they keep the hex written beside their paletteId. When you swap the palette, for a dark screen edition or a retint, rewrite every linked colour from colorPalette before the build.
- **Design text overflow defaults to 'ellipsis-end'.** A design text element that does not fit its width ends in an ellipsis by default. Set overflow: 'wrap' for titles that should break onto more lines.
- **Only 8 locales hyphenate, by exact code.** Hyphenation ships for en-us, es, fr, de, it, pt, ca and nl, matched exactly: 'es-ES' or any other language silently falls back to American English.
- **A config is cached by identity: build a fresh object.** The engine caches resolved configs by object identity, so changing a config in place and building again reuses the old result. Build a fresh object for every build, which is why a recipe's config is a factory: config().
- **An opener reserves height down to its lowest page-anchored element.** An advanced-design opener reserves the height of its lowest element, and page- or bleed-anchored elements below the heading count too, so decoration at the foot of the page pushes the text to the next page. Keep such decoration above the heading, move it to a header or footer slot, or set the reservation with minHeight.
- **Layout warning: Footnote without a definition** (`undefinedFootnote`). A [^id] marker cites a note that no [^id]: paragraph defines, so the number prints over an empty note. Fix: Add a [^id]: paragraph with the note, or correct the id of the marker. ([Documentation](https://postext.dev/en/docs/configuration.md#footnotes))
- **Layout warning: Footnote never cited** (`unusedFootnote`). A [^id]: definition has no marker in the text, so the note is not set. Fix: Cite it with [^id] where it belongs, or delete the definition. ([Documentation](https://postext.dev/en/docs/configuration.md#footnotes))
- A marker in a caption, a table cell or a heading prints as written: notes are read in paragraphs, list items, quotations and boxes.
- A note is never split across columns: one taller than its column runs past the foot. Keep notes to a few lines, as editors do.
## Credits
- Recipe: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Text: La vida de Lazarillo de Tormes, Burgos edition of 1554: the prologue and the beginning of the first treatise: Anonymous ([source](https://www.gutenberg.org/ebooks/320)), public domain
- Text: The Life of Lazarillo de Tormes, translated by Clements Markham (1908), with his notes: the prologue and the first chapter, abridged: Clements Markham ([source](https://www.gutenberg.org/ebooks/53489)), public domain
- Text: The Spanish notes, adapted from Markham's and written for this edition: Ignacio Ferro, CC-BY-4.0
- Type: EB Garamond (OFL-1.1), Bodoni Moda (OFL-1.1), IBM Plex Sans Condensed (OFL-1.1)
- Code: MIT · Sample content: CC-BY-4.0
## Related
- [Nº 032 · Annotated classic with margin glosses](https://postext.dev/en/cookbook/annotated-classic-glosses.md): Alice’s mad tea-party as an annotated edition: green and red glosses in the outer margin, beside the lines they explain, each called by a letter in its colour. · Level 3 (Advanced) · Fiction, drama & literary prose
- [Nº 044 · Critical edition: line numbers and line-keyed notes](https://postext.dev/en/cookbook/critical-edition-line-numbers.md): Milton’s Lycidas in the 1645 text: a script counts the lines and adds a side box after every fifth, and each note opens on its line number, set as a chip. · Level 3 (Advanced) · Poetry
- [Nº 007 · One book from separate chapters](https://postext.dev/en/cookbook/book-from-chapters.md): buildBundle sets five Markdown files as one book: each chapter opens on a recto, and page, chapter and figure numbers run on from file to file. · Level 3 (Advanced) · Manuals, guides & reference