# Notas al pie de la columna que las cita
> Las llamadas [^id] pasan a notas numeradas al pie de la columna que las cita, con interruptores para una columna, notas finales y numeración continua.
- Versión HTML: https://postext.dev/es/cookbook/novel-footnotes-column-foot
- Receta N.º 071 · Recuadros y notas · Nivel 2 (Intermedio) · Salidas: Canvas, PDF, Controles en vivo
- Géneros: Narrativa, teatro y prosa literaria
- Requiere postext ≥ 1.6.0, postext-pdf ≥ 1.6.0 · probada con 1.6.0, postext-pdf 1.6.0 el 2026-09-28
- Páginas: [1](https://postext.dev/cookbook/novel-footnotes-column-foot/es/p01.webp?v=a54e4840), [2](https://postext.dev/cookbook/novel-footnotes-column-foot/es/p02.webp?v=a54e4840), [3](https://postext.dev/cookbook/novel-footnotes-column-foot/es/p03.webp?v=a54e4840)
- PDF: https://postext.dev/cookbook/novel-footnotes-column-foot/es/novel-footnotes-column-foot.pdf?v=a54e4840
- Abrir en el Sandbox: https://postext.dev/es/sandbox#recipe=novel-footnotes-column-foot&lang=es (.postext: https://postext.dev/cookbook/novel-footnotes-column-foot/es/novel-footnotes-column-foot.postext)
- Última actualización: 2026-09-28
- Otros idiomas: [en](https://postext.dev/en/cookbook/novel-footnotes-column-foot.md)
## Lo que vas a componer
Una edición escolar del *Lazarillo de Tormes*, de 210 × 280 mm y a dos columnas de EB Garamond: el prólogo y el comienzo del tratado primero, donde Lázaro nace en una aceña del Tormes y sale al mundo con un ciego. Las notas aclaran lo que un lector de 1554 sabía y uno de hoy ignora: la aldea de Tejares, la armada contra los Gelves, el toro de piedra del puente de Salamanca. Cada nota va al pie de la columna que la cita, en cuerpo menor y bajo un filete corto de color burdeos, de modo que la vista baja del número a la nota y vuelve sin pasar página. Las notas de la edición en español adaptan las de Clements Markham, de 1908, y añaden algunas glosas de vocabulario.
**Esta receta responde a:**
- ¿Cómo compongo las notas al pie de la columna donde se citan?
## La respuesta corta
```js
// script.js, líneas 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') },
});
```
## Ingredientes
**Enseña**
- [Notas al pie](https://postext.dev/es/docs/document-format.md#notas-al-pie): Notas citadas con [^id] y compuestas al pie de la columna que las cita, o tras el capítulo, numeradas por capítulo o por todo el libro.
**También usa**
- [Superíndices y subíndices](https://postext.dev/es/docs/document-format.md#formato-en-línea)
- [Una o dos columnas](https://postext.dev/es/docs/configuration.md#tipos-de-disposición)
- [Aperturas diseñadas](https://postext.dev/es/docs/configuration.md#span-y-diseño-avanzado)
- [Atributos de título](https://postext.dev/es/docs/document-format.md#atributos-de-encabezado)
- [Cabeceras y folios](https://postext.dev/es/docs/configuration.md#encabezados-y-pies)
- [Márgenes simétricos](https://postext.dev/es/docs/configuration.md#márgenes-simétricos-espejo)
- [Cabeceras según el tipo de página](https://postext.dev/es/docs/configuration.md#elementos-de-texto)
- [Estilos de párrafo](https://postext.dev/es/docs/configuration.md#estilos-de-párrafo)
- [Paleta de color semántica](https://postext.dev/es/docs/configuration.md#paleta-de-colores)
- [Color del papel](https://postext.dev/es/docs/configuration.md#página)
- [Viudas, huérfanas y líneas cortas](https://postext.dev/es/docs/configuration.md#huérfanas-viudas-runts-y-reglas-de-cohesión)
- [Exportación a PDF](https://postext.dev/es/docs/configuration.md#generación-de-pdf)
- [PDF accesible etiquetado](https://postext.dev/es/docs/configuration.md#generación-de-pdf-configuración)
- [Banda de capítulo a todo el ancho](https://postext.dev/es/docs/configuration.md#span-y-diseño-avanzado)
- [Fuentes incrustadas en el PDF](https://postext.dev/es/docs/configuration.md#por-qué-un-proveedor-de-fuentes)
**La configuración de un vistazo**
- [`bodyText`](https://postext.dev/es/docs/configuration.md#texto-de-cuerpo), [`colorPalette`](https://postext.dev/es/docs/configuration.md#paleta-de-colores), [`footer`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), `footnotes`, [`header`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), [`headings`](https://postext.dev/es/docs/configuration.md#encabezados), [`layout`](https://postext.dev/es/docs/configuration.md#disposición), [`locale`](https://postext.dev/es/docs/configuration.md#separación-silábica), [`page`](https://postext.dev/es/docs/configuration.md#página), [`paragraphStyles`](https://postext.dev/es/docs/configuration.md#estilos-de-párrafo)
**API**
- [`buildDocument`](https://postext.dev/es/docs/configuration.md#construir-un-documento), [`clearMeasurementCache`](https://postext.dev/es/docs/configuration.md#caché-de-medidas), [`decompressWoff2`](https://postext.dev/es/docs/configuration.md#proveedor-de-fuentes-en-el-navegador-fontsource--woff2), [`renderPageToCanvas`](https://postext.dev/es/docs/configuration.md#renderizar-una-página-a-un-bitmap), [`renderToPdf`](https://postext.dev/es/docs/configuration.md#generación-de-pdf)
**Tipografías**
- EB Garamond (OFL-1.1), Bodoni Moda (OFL-1.1), IBM Plex Sans Condensed (OFL-1.1)
## Elaboración
### 1 · Cita la nota donde toca y defínela donde quieras
La configuración es [la respuesta corta](#la-respuesta-corta) de arriba; lo demás es Markdown. `naturales de Tejares[^tejares]` imprime un número volado pegado a la palabra, y un párrafo que empieza por `[^tejares]:` contiene la nota. Las definiciones salen del flujo estén donde estén, así que esta muestra las reúne al final del capítulo. Los números siguen el orden de las llamadas: los ids del Markdown pueden ser palabras, y renumerar un capítulo nunca obliga a tocar las notas.
### 2 · Deja sitio en la columna para sus notas
Antes de colocar una línea, la maquetación suma la altura de las notas que esa línea cita por primera vez, y la del filete si es la primera nota de la columna. Una línea cuya nota no cabe debajo pasa a la columna siguiente con su párrafo, según las reglas de viudas y huérfanas, de modo que un número nunca remite a una nota de otra columna. Las notas se apilan desde el pie con su propio cuerpo e interlineado, fuera de la rejilla base, y el texto de encima sigue en ella; el equilibrado de columnas solo cuenta el texto.
### 3 · Hunde todas las aperturas hasta la misma línea
```js
// script.js, líneas 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) } } },
] },
};
```
La apertura ocupa las dos columnas y toma el antetítulo del atributo `kicker` del título. `minHeight` reserva diez líneas de la rejilla, lo que cabe un título de dos líneas en Bodoni con su filete, así que el texto de cada capítulo empieza en la misma línea y el filete nunca cae sobre la primera línea de texto.
### 4 · Pon el libro en la página par y el capítulo en la impar
```js
// script.js, líneas 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' }] };
```
Las cabeceras se anclan a la página según su paridad, con el folio en el borde exterior; `pages: 'body'` las quita de las aperturas, que llevan un folio centrado al pie. Un título de capítulo largo acaba en puntos suspensivos a los 120 mm en vez de chocar con el folio.
### 5 · Prueba las otras posiciones
```js
// script.js, líneas 224–250
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);
```
Cada interruptor vuelve a componer el capítulo con una opción cambiada. **Una columna** pone las notas al pie de la página, que ahí es la columna. **Final del capítulo** las compone tras el último párrafo y las baja al pie de la columna que cierran, bajo el mismo filete. **Continua** sigue la numeración del prólogo en el tratado en lugar de volver a empezar en 1.
## La receta completa
Los archivos de abajo se componen a partir de la carpeta de la receta, con el texto de ejemplo y el kit común del Recetario ya incluidos. Para ejecutarlos como una sola página, pon el HTML en ``, el CSS en un elemento ``);
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 ───────────────────────────────────────────────────────────────────────
```
## Variantes
### Deja las notas finales bajo el texto
Con `placement: 'chapterEnd'` las notas quedan por defecto al pie de la última columna; `chapterEndAlign: 'text'` las pone justo debajo del último párrafo.
```diff
placement: options.placement,
+ chapterEndAlign: 'text',
```
### Quita el filete
Sin filete, las notas siguen separadas del texto por `spaceAbove` y `spaceBelowRule`.
```diff
- separator: { width: 0.25, lineWidth: pt(0.5), color: col('oxblood') },
+ separator: { enabled: false },
```
## Errores frecuentes
- **Cualquier objeto headings desactiva el salto de página del H1.** Por defecto un H1 salta a una página impar (always-odd), pero cualquier objeto headings anula ese valor, así que los capítulos van seguidos y span: 'page' no hace nada. Vuelve a declarar headings.levels[0].breakBefore: { enabled: true, parity } en cada configuración.
- **Carga todas las fuentes antes de componer.** La composición mide el texto con las fuentes que el navegador ha cargado y guarda los anchos, así que una fuente que llega después de la primera composición deja cortes de línea erróneos y un PDF que ya no coincide con la pantalla. Carga antes todos los pesos y estilos, y llama a clearMeasurementCache() antes de recomponer si alguna llega tarde.
- **Una paleta cambiada no llega a los elementos de diseño ni al color de las remisiones.** postext 1.4.1 aplica colorPalette a los estilos de texto (cuerpo, títulos, listas, pies, tablas, recuadros), pero no a los elementos de cabeceras, pies de página, aperturas y portadillas, ni a bodyText.referenceColor: conservan el hex escrito junto a su paletteId. Si cambias la paleta, para una edición de pantalla oscura o para recolorear, reescribe cada color enlazado a partir de colorPalette antes de componer.
- **El desbordamiento del texto de diseño es 'ellipsis-end' por defecto.** Un elemento de texto de diseño que no cabe en su ancho termina en puntos suspensivos por defecto. Pon overflow: 'wrap' en los títulos que deban pasar a más líneas.
- **Solo 8 idiomas tienen separación silábica, con el código exacto.** La separación silábica existe para en-us, es, fr, de, it, pt, ca y nl, con el código exacto: 'es-ES' o cualquier otro idioma pasa sin aviso al inglés americano.
- **Una configuración se cachea por identidad: crea un objeto nuevo.** El motor guarda en caché las configuraciones resueltas según la identidad del objeto, así que modificar el mismo objeto y volver a componer reutiliza el resultado anterior. Crea un objeto nuevo en cada composición: por eso la configuración de una receta es una función, config().
- **Una apertura reserva altura hasta su elemento anclado más bajo.** Una apertura de diseño avanzado reserva la altura de su elemento más bajo, y cuentan también los anclados a la página o a la sangre que quedan por debajo del título, así que un adorno al pie de la página empuja el texto a la siguiente. Deja esos adornos por encima del título, pásalos a una ranura de cabecera o de pie, o fija la reserva con minHeight.
- **Aviso de maquetación: Nota sin definición** (`undefinedFootnote`). Una marca [^id] cita una nota que ningún párrafo [^id]: define, así que el número se imprime sobre una nota vacía. Solución: Añade un párrafo [^id]: con la nota o corrige el id de la marca. ([Documentación](https://postext.dev/es/docs/configuration.md#notas-al-pie))
- **Aviso de maquetación: Nota sin citar** (`unusedFootnote`). Una definición [^id]: no tiene marca en el texto, así que la nota no se compone. Solución: Cítala con [^id] donde corresponda o borra la definición. ([Documentación](https://postext.dev/es/docs/configuration.md#notas-al-pie))
- Una llamada en un pie de figura, una celda de tabla o un título se imprime tal cual: las notas se leen en párrafos, elementos de lista, citas y recuadros.
- Una nota nunca se parte entre columnas: una más alta que su columna la desborda. Mantén las notas en pocas líneas, como hacen los editores.
## Créditos
- Receta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Texto: La vida de Lazarillo de Tormes, edición de Burgos de 1554: el prólogo y el comienzo del tratado primero: Anonymous ([fuente](https://www.gutenberg.org/ebooks/320)), dominio público
- Texto: The Life of Lazarillo de Tormes, traducción de Clements Markham (1908), con sus notas: el prólogo y el primer capítulo, abreviados: Clements Markham ([fuente](https://www.gutenberg.org/ebooks/53489)), dominio público
- Texto: Las notas en español, adaptadas de las de Markham y escritas para esta edición: Ignacio Ferro, CC-BY-4.0
- Tipografías: EB Garamond (OFL-1.1), Bodoni Moda (OFL-1.1), IBM Plex Sans Condensed (OFL-1.1)
- Código: MIT · Contenido de ejemplo: CC-BY-4.0
## Relacionadas
- [N.º 032 · Clásico anotado con glosas al margen](https://postext.dev/es/cookbook/annotated-classic-glosses.md): La merienda de locos de Alicia en edición anotada: glosas verdes y rojas en el margen exterior, junto a lo que explican, con llamadas de su mismo color. · Nivel 3 (Avanzado) · Narrativa, teatro y prosa literaria
- [N.º 044 · Edición crítica: numeración de versos y notas por verso](https://postext.dev/es/cookbook/critical-edition-line-numbers.md): El Lycidas de Milton, texto de 1645: una función cuenta los versos, pone el número cada cinco en un recuadro lateral y abre cada nota con el número del verso. · Nivel 3 (Avanzado) · Poesía
- [N.º 007 · Un libro hecho de capítulos sueltos](https://postext.dev/es/cookbook/book-from-chapters.md): buildBundle compone cinco archivos Markdown como un solo libro: cada capítulo abre en página impar y páginas, capítulos y figuras se numeran de corrido. · Nivel 3 (Avanzado) · Manuales, guías y obras de consulta