# Resaltados por colores en un libro de lecturas

> Un libro de lecturas de historia con tres colores de resaltado (verde para términos, ámbar para fechas, azul para nombres) definidos en markStyles.

- Versión HTML: https://postext.dev/es/cookbook/colour-coded-study-highlights
- Receta N.º 180 · Texto y tipografía · Nivel 2 (Intermedio) · Salidas: Canvas
- Géneros: Libros de texto
- Requiere postext ≥ 1.65.0 · probada con 1.65.0 el 2026-10-31
- Páginas: [1](https://postext.dev/cookbook/colour-coded-study-highlights/es/p01.webp?v=908d896b), [2](https://postext.dev/cookbook/colour-coded-study-highlights/es/p02.webp?v=908d896b), [3](https://postext.dev/cookbook/colour-coded-study-highlights/es/p03.webp?v=908d896b), [4](https://postext.dev/cookbook/colour-coded-study-highlights/es/p04.webp?v=908d896b)
- Abrir en el Sandbox: https://postext.dev/es/sandbox#recipe=colour-coded-study-highlights&lang=es (.postext: https://postext.dev/cookbook/colour-coded-study-highlights/es/colour-coded-study-highlights.postext)
- Última actualización: 2026-10-31
- Otros idiomas: [en](https://postext.dev/en/cookbook/colour-coded-study-highlights.md), [ca](https://postext.dev/ca/cookbook/colour-coded-study-highlights.md), [de](https://postext.dev/de/cookbook/colour-coded-study-highlights.md), [fr](https://postext.dev/fr/cookbook/colour-coded-study-highlights.md), [it](https://postext.dev/it/cookbook/colour-coded-study-highlights.md), [pt](https://postext.dev/pt/cookbook/colour-coded-study-highlights.md), [zh](https://postext.dev/zh/cookbook/colour-coded-study-highlights.md), [ja](https://postext.dev/ja/cookbook/colour-coded-study-highlights.md), [ar](https://postext.dev/ar/cookbook/colour-coded-study-highlights.md)

## En pocas palabras

Una lectura escolar sobre la historia de la imprenta. Los términos clave van en verde, las fechas en ámbar y las personas y lugares en azul, y una clave en la primera página explica qué significa cada color.

## Lo que vas a componer

La lectura 2 de una unidad de un libro escolar de historia, *Lecturas de historia moderna*: cuatro páginas sobre cómo se extendió la imprenta desde Maguncia por Europa entre 1450 y 1550, en una página de 170 × 240 mm. Los editores han marcado el texto como lo haría un buen estudiante, con un código que no cambia en todo el libro: los términos clave sobre una franja verde, las fechas sobre ámbar, las personas y los lugares sobre azul pálido. Una clave bajo el título explica el código con los tres colores, y el glosario de la última página abre cada entrada con su término en verde. Las marcas son franjas debajo de texto corriente, así que las líneas se cortan, se dividen y se justifican como si no estuvieran.

**Esta receta responde a:**

- ¿Cómo resalto un texto de estudio con colores que signifiquen algo: términos, fechas y nombres?

## La respuesta corta

```js
// script.js, líneas 37–52
// :mark[Mainz]{style="name"} in the text picks a style by id. The band is painted under
// words that stay ordinary text, so the lines break, hyphenate and justify as if the
// mark were not there, and a mark that runs over a line end gets a band on each line.
const band = (id, name) => ({
  id, name,
  background: col(id), // pale enough for ink at full contrast on top
  color: col('ink'), // the words keep the colour of the text
  // borderRadius: 0 is the default (square ends, as a highlighter pen leaves them)
  paddingX: em(0.12), // the band reaches a little past the first and the last letter
  paddingTop: em(0.04), paddingBottom: em(0.1), // and down past the descenders
});
const markStyles = [
  band('term', t({ en: 'Key term', es: 'Término clave' })),
  band('date', t({ en: 'Date', es: 'Fecha' })),
  band('name', t({ en: 'Name', es: 'Nombre' })),
];
```

## Ingredientes

**Enseña**

- [Marcas de resaltado](https://postext.dev/es/docs/document-format-inline.md#marcas-de-resaltado): Una franja de color detrás de una frase, como un libro de texto resalta sus palabras clave: las palabras siguen siendo texto corriente y pasan de línea, la franja acompaña cada trozo.

**También usa**

- [Recuadros](https://postext.dev/es/docs/configuration-callouts.md#estilos-de-recuadro)
- [Paleta de color semántica](https://postext.dev/es/docs/configuration-fonts-colors-viewers.md#paleta-de-colores)
- [Aperturas diseñadas](https://postext.dev/es/docs/configuration-headings.md#apertura-a-toda-página-y-diseño-avanzado)
- [Imágenes en los diseños de página](https://postext.dev/es/docs/configuration-headers-footers.md#elementos-de-imagen)
- [Atributos de título](https://postext.dev/es/docs/document-format.md#atributos-de-encabezado)
- [Cabeceras y folios](https://postext.dev/es/docs/configuration-headers-footers.md#cabeceras-y-pies)
- [Cabeceras según el tipo de página](https://postext.dev/es/docs/configuration-headers-footers.md#elementos-de-texto)
- [Márgenes simétricos](https://postext.dev/es/docs/configuration-page-layout.md#márgenes-simétricos-espejo)
- [Estilos de párrafo](https://postext.dev/es/docs/configuration-styles.md#estilos-de-párrafo)
- [Viudas, huérfanas y líneas cortas](https://postext.dev/es/docs/configuration-page-flow.md#huérfanas-viudas-líneas-cortas-y-reglas-de-cohesión)
- [Bibliografías y glosarios](https://postext.dev/es/docs/configuration-styles.md#estilos-de-párrafo)
- [Figura y Tabla en tu idioma](https://postext.dev/es/docs/configuration-resources.md#tipos-de-recurso)
- [Tipos de recurso propios](https://postext.dev/es/docs/configuration-resources.md#tipos-de-recurso)
- [Figuras y tablas como recursos](https://postext.dev/es/docs/document-format-resources.md#recursos)

**La configuración de un vistazo**

- [`bodyText`](https://postext.dev/es/docs/configuration-text.md#texto-base), [`calloutStyles`](https://postext.dev/es/docs/configuration-callouts.md#estilos-de-recuadro), [`captionStyle`](https://postext.dev/es/docs/configuration-resources.md#estilo-de-pies-de-recurso), [`colorPalette`](https://postext.dev/es/docs/configuration-fonts-colors-viewers.md#paleta-de-colores), [`footer`](https://postext.dev/es/docs/configuration-headers-footers.md#cabeceras-y-pies), [`header`](https://postext.dev/es/docs/configuration-headers-footers.md#cabeceras-y-pies), [`headings`](https://postext.dev/es/docs/configuration-headings.md#encabezados), [`layout`](https://postext.dev/es/docs/configuration-page-layout.md#disposición), [`locale`](https://postext.dev/es/docs/configuration-language.md#separación-silábica), [`markStyles`](https://postext.dev/es/docs/configuration-styles.md#estilos-de-resaltado), [`orderedLists`](https://postext.dev/es/docs/configuration-lists-math.md#listas-ordenadas), [`page`](https://postext.dev/es/docs/configuration-page-layout.md#página), [`paragraphStyles`](https://postext.dev/es/docs/configuration-styles.md#estilos-de-párrafo), [`resourceTypes`](https://postext.dev/es/docs/configuration-resources.md#tipos-de-recurso), [`unorderedLists`](https://postext.dev/es/docs/configuration-lists-math.md#listas-no-ordenadas)

**API**

- [`buildDocumentWithFonts`](https://postext.dev/es/docs/configuration-programmatic-usage.md#cargar-las-fuentes-antes-de-componer), [`defaultResourceTypes`](https://postext.dev/es/docs/configuration-resources.md#tipos-de-recurso), [`registerResourceImage`](https://postext.dev/es/docs/architecture.md#api-pública), [`renderPageToCanvas`](https://postext.dev/es/docs/configuration-programmatic-usage.md#renderizar-una-página-como-mapa-de-bits)

**Tipografías**

- Source Serif 4 (OFL-1.1), Source Sans 3 (OFL-1.1)

## Elaboración

### 1 · Un estilo para cada clase de palabra

El código es [la respuesta corta](https://postext.dev/es/cookbook/colour-coded-study-highlights.md#la-respuesta-corta) de arriba. `markStyles` declara tres estilos con nombre, y el texto elige uno en cada marca: `:mark[Johann Fust]{style="name"}`, `:mark[1455]{style="date"}`, `:mark[colofón]{style="term"}` ([marcas de resaltado](https://postext.dev/es/docs/document-format-inline.md#marcas-de-resaltado)). Cada estilo dice lo que significa (`name` es lo que ve quien edita), de modo que el Markdown guarda por qué se marca una palabra y no de qué color va. Si cambias el color de un estilo, cambian con él todas las fechas del libro. Los extremos son rectos, como por defecto desde postext 1.52 ([estilos de resaltado](https://postext.dev/es/docs/configuration-styles.md#estilos-de-resaltado)): un fosforito deja los extremos rectos, y una franja redondeada se lee como un chip.

### 2 · Tres tintas de la paleta

```js
// script.js, líneas 14–29
const palette = {
  ink: '#1f1c19', // text: a warm near-black
  accent: '#8a3220', // kickers, rules, numbers: an iron-gall red
  tint: '#f5f0e7', // the key's background
  rule: '#d3cabc', // hairlines
  muted: '#6b645b', // running heads, colophon
  paper: '#ffffff',
  term: '#cce8c8', // key terms: a pale green
  date: '#fbe0a1', // dates: amber
  name: '#cfe0f4', // people and places: a pale blue
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'accent (defaults)', value: { hex: palette.accent, model: 'hex' } },
];
```

Las tres franjas son entradas de la paleta, igual que la tinta y el acento, así que quien abra el libro en el Sandbox puede cambiar el código desde una sola muestra de color. Son pálidas, de una luminosidad parecida a la del fondo del recuadro, y el texto sobre ellas conserva un contraste de 12,6:1 o más; las tres se distinguen cuando se juntan en una línea, como en «En 1517, Martín Lutero» en la página 3. Una marca no ocupa sitio: `paddingX` entra 0,12 em en el espacio junto a la frase y `paddingBottom` baja la franja por debajo de los trazos descendentes, y ambos se pintan en un espacio que ya existía.

### 3 · La apertura: una pintura sobre el título

```js
// script.js, líneas 56–81
const opener = {
  enabled: true,
  minHeight: mm(122), // the floor of the opener: the key starts on the same line
  marginBottom: pt(0),
  slot: {
    elements: [
      { kind: 'image', id: 'press', resourceId: 'press', fit: 'cover',
        placement: { anchor: { to: 'page', edge: 'top-left' },
          size: { width: mm(170), height: mm(96) } } },
      { kind: 'text', id: 'kicker', content: '{attr.kicker}', fontFamily: SANS,
        fontSize: pt(8.5), fontWeight: 700, letterSpacing: pt(1.6),
        textTransform: 'uppercase', color: col('accent'), align: 'left',
        placement: { anchor: { to: 'container', edge: 'top-left' },
          offset: { x: mm(0), y: mm(82) } } },
      { kind: 'text', id: 'title', content: '{titleText}', fontFamily: SERIF,
        fontSize: pt(26), lineHeight: 1.08, fontWeight: 700, color: col('ink'), align: 'left',
        placement: { anchor: { to: '#kicker', edge: 'below' }, offset: { x: mm(0), y: mm(2) },
          size: { width: mm(126), height: 'auto' } } },
      { kind: 'text', id: 'standfirst', content: '{attr.standfirst}', fontFamily: SERIF,
        italic: true, fontSize: pt(10.5), lineHeight: LEAD / 10.5, color: col('ink'),
        align: 'left',
        placement: { anchor: { to: '#title', edge: 'below' }, offset: { x: mm(0), y: mm(3) },
          size: { width: mm(118), height: 'auto' } } },
    ],
  },
};
```

El título de primer nivel imprime un diseño. La pintura se ancla a la página, así que sangra por arriba y por los dos lados, 170 por 96 mm, con `fit: 'cover'`. El antetítulo y la entradilla salen de atributos de la línea del título ([atributos de título](https://postext.dev/es/docs/document-format.md#atributos-de-encabezado)), y la clave sigue como un `:::callout` corriente cuyos elementos de lista empiezan por las tres marcas. `minHeight` fija la profundidad: la clave empieza en la misma línea por mucho que ocupe el título.

### 4 · Cabeceras según la paridad

```js
// script.js, líneas 85–106
const head = (id, content, parity, edge, x, extra = {}) => ({
  kind: 'text', id, content, parity, pages: 'body',
  fontFamily: SANS, fontSize: pt(7.5), fontWeight: 600, letterSpacing: pt(1.2),
  textTransform: 'uppercase', color: col('muted'),
  placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(13) } },
  ...extra,
});
const folio = { fontWeight: 700, color: col('ink') };
const header = {
  elements: [
    head('verso-folio', '{pageNumber}', 'even', 'top-left', OUTER, folio),
    head('verso-title', '{title}', 'even', 'top-left', OUTER + 9),
    head('recto-title', '{chapterTitle}', 'odd', 'top-right', -(OUTER + 9)),
    head('recto-folio', '{pageNumber}', 'odd', 'top-right', -OUTER, folio),
  ],
};
const footer = {
  elements: [head('drop-folio', '{pageNumber}', 'all', 'top', 0, {
    ...folio, pages: 'opener',
    placement: { anchor: { to: 'container', edge: 'top' }, offset: { x: mm(0), y: mm(9) } },
  })],
};
```

La página par lleva el título de la colección y la impar el de la lectura, ambas filtradas por `parity` y fuera de la apertura gracias a `pages: 'body'` ([elementos de texto](https://postext.dev/es/docs/configuration-headers-footers.md#elementos-de-texto)). La apertura lleva el folio al pie.

## La receta completa

Un solo archivo, compuesto a partir de la carpeta de la receta con el texto de ejemplo y el kit común del Recetario ya incluidos; construye su propia página. Para ejecutarlo, ponlo en un `<script type="module">` de una página vacía o pégalo en el panel JS de un pen nuevo de CodePen (como módulo). Importa postext desde esm.sh, así que no hay nada que instalar ni compilar.

- Carpeta de la receta: https://github.com/drnachio/postext/tree/main/cookbook/colour-coded-study-highlights

### script.js

```js
// ═══ Postext Cookbook · Nº 180 · Colour-coded highlights in a study reader ════════
// https://postext.dev/en/cookbook/colour-coded-study-highlights
// Code: MIT · Text: original (CC BY 4.0) · Picture: painting made for the recipe
// Fonts: Source Serif 4, Source Sans 3 (SIL OFL 1.1) · Needs postext ≥ 1.65.0
import {
  buildDocumentWithFonts, renderPageToCanvas, registerResourceImage, defaultResourceTypes,
} from 'https://esm.sh/postext';

const LANG = 'es'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'colour-coded-study-highlights';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: semantic colours, three of them for the highlighter
const palette = {
  ink: '#1f1c19', // text: a warm near-black
  accent: '#8a3220', // kickers, rules, numbers: an iron-gall red
  tint: '#f5f0e7', // the key's background
  rule: '#d3cabc', // hairlines
  muted: '#6b645b', // running heads, colophon
  paper: '#ffffff',
  term: '#cce8c8', // key terms: a pale green
  date: '#fbe0a1', // dates: amber
  name: '#cfe0f4', // people and places: a pale blue
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'accent (defaults)', value: { hex: palette.accent, model: 'hex' } },
];
// #endregion
const OUTER = 20; // outer margin in mm: the running heads align to it
const LEAD = 14.5; // body leading in pt
const SANS = 'Source Sans 3';
const SERIF = 'Source Serif 4';

// #region answer: three highlight styles, one per kind of word, linked to the palette
// :mark[Mainz]{style="name"} in the text picks a style by id. The band is painted under
// words that stay ordinary text, so the lines break, hyphenate and justify as if the
// mark were not there, and a mark that runs over a line end gets a band on each line.
const band = (id, name) => ({
  id, name,
  background: col(id), // pale enough for ink at full contrast on top
  color: col('ink'), // the words keep the colour of the text
  // borderRadius: 0 is the default (square ends, as a highlighter pen leaves them)
  paddingX: em(0.12), // the band reaches a little past the first and the last letter
  paddingTop: em(0.04), paddingBottom: em(0.1), // and down past the descenders
});
const markStyles = [
  band('term', t({ en: 'Key term', es: 'Término clave' })),
  band('date', t({ en: 'Date', es: 'Fecha' })),
  band('name', t({ en: 'Name', es: 'Nombre' })),
];
// #endregion

// #region opener: the painting bleeds off the top of the page, the title sits under it
const opener = {
  enabled: true,
  minHeight: mm(122), // the floor of the opener: the key starts on the same line
  marginBottom: pt(0),
  slot: {
    elements: [
      { kind: 'image', id: 'press', resourceId: 'press', fit: 'cover',
        placement: { anchor: { to: 'page', edge: 'top-left' },
          size: { width: mm(170), height: mm(96) } } },
      { kind: 'text', id: 'kicker', content: '{attr.kicker}', fontFamily: SANS,
        fontSize: pt(8.5), fontWeight: 700, letterSpacing: pt(1.6),
        textTransform: 'uppercase', color: col('accent'), align: 'left',
        placement: { anchor: { to: 'container', edge: 'top-left' },
          offset: { x: mm(0), y: mm(82) } } },
      { kind: 'text', id: 'title', content: '{titleText}', fontFamily: SERIF,
        fontSize: pt(26), lineHeight: 1.08, fontWeight: 700, color: col('ink'), align: 'left',
        placement: { anchor: { to: '#kicker', edge: 'below' }, offset: { x: mm(0), y: mm(2) },
          size: { width: mm(126), height: 'auto' } } },
      { kind: 'text', id: 'standfirst', content: '{attr.standfirst}', fontFamily: SERIF,
        italic: true, fontSize: pt(10.5), lineHeight: LEAD / 10.5, color: col('ink'),
        align: 'left',
        placement: { anchor: { to: '#title', edge: 'below' }, offset: { x: mm(0), y: mm(3) },
          size: { width: mm(118), height: 'auto' } } },
    ],
  },
};
// #endregion

// #region running-heads: series title on the verso, reading title on the recto
const head = (id, content, parity, edge, x, extra = {}) => ({
  kind: 'text', id, content, parity, pages: 'body',
  fontFamily: SANS, fontSize: pt(7.5), fontWeight: 600, letterSpacing: pt(1.2),
  textTransform: 'uppercase', color: col('muted'),
  placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(13) } },
  ...extra,
});
const folio = { fontWeight: 700, color: col('ink') };
const header = {
  elements: [
    head('verso-folio', '{pageNumber}', 'even', 'top-left', OUTER, folio),
    head('verso-title', '{title}', 'even', 'top-left', OUTER + 9),
    head('recto-title', '{chapterTitle}', 'odd', 'top-right', -(OUTER + 9)),
    head('recto-folio', '{pageNumber}', 'odd', 'top-right', -OUTER, folio),
  ],
};
const footer = {
  elements: [head('drop-folio', '{pageNumber}', 'all', 'top', 0, {
    ...folio, pages: 'opener',
    placement: { anchor: { to: 'container', edge: 'top' }, offset: { x: mm(0), y: mm(9) } },
  })],
};
// #endregion

const config = {
  locale: t({ en: 'en-us', es: 'es' }),
  resourceTypes: defaultResourceTypes(LANG),
  colorPalette,
  markStyles,
  page: {
    sizePreset: 'custom', width: mm(170), height: mm(240), dpi: 150,
    margins: { top: mm(22), bottom: mm(22), left: mm(22), right: mm(OUTER), mirror: true },
  },
  layout: { layoutType: 'single' },
  bodyText: {
    fontFamily: SERIF, fontSize: pt(10.5), lineHeight: pt(LEAD), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: mm(4.5), indentAfterHeading: false,
    hyphenation: { enabled: true }, optimalLineBreaking: true,
    avoidWidows: true, avoidOrphans: true, avoidRunts: true,
  },
  headings: {
    fontFamily: SERIF, color: col('ink'), fontWeight: 700,
    levels: [
      { level: 1, fontSize: pt(26), breakBefore: { parity: 'odd' }, advancedDesign: opener },
      { level: 2, fontFamily: SANS, fontSize: pt(12), lineHeight: pt(LEAD), fontWeight: 700,
        color: col('accent'), marginTop: pt(LEAD), marginBottom: pt(0) },
    ],
  },
  unorderedLists: { bulletChar: '–', color: col('accent'), fontWeight: 400,
    marginTop: pt(0), marginBottom: pt(0) },
  orderedLists: { numberFormat: 'arabic', color: col('accent'), fontWeight: 700,
    marginTop: pt(0), marginBottom: pt(0) },
  paragraphStyles: [
    // The glossary: each green term opens its entry, the turnovers hang 1.5 em.
    { id: 'glossary', fontSize: pt(9.5), lineHeight: pt(13), textAlign: 'left',
      hangingIndent: em(1.5) },
    { id: 'colophon', fontFamily: SANS, fontSize: pt(7.5), lineHeight: pt(10),
      color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(LEAD) },
  ],
  // The key: a tint with a top stripe, its title in the label face.
  calloutStyles: [
    { id: 'key', title: t({ en: 'Key', es: 'Clave' }), background: col('tint'),
      stripe: { enabled: true, side: 'top', width: pt(2.5), color: col('accent') },
      padding: { top: mm(3), right: mm(4), bottom: mm(3), left: mm(4) },
      titleStyle: { fontFamily: SANS, fontSize: pt(8), fontWeight: 700,
        textTransform: 'uppercase', letterSpacing: pt(1.2), color: col('accent') },
      body: { fontFamily: SANS, fontSize: pt(9.5), lineHeight: pt(13), color: col('ink'),
        firstLineIndent: pt(0), textAlign: 'left', boldColor: col('ink'),
        italicColor: col('ink') } },
  ],
  captionStyle: { fontFamily: SANS, fontSize: pt(8), color: col('ink'), labelBold: true,
    labelColor: col('accent'), note: { color: col('muted') } },
  header,
  footer,
};

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "Lecturas de historia moderna"
author: "Edición de estudio"
---

# Cómo se extendió la imprenta por Europa {kicker="Unidad 4 · Lectura 2" standfirst="En cien años, un oficio nacido en una ciudad alemana llenó Europa de libros. Esta lectura sigue la prensa desde Maguncia hasta más de doscientas ciudades y se pregunta qué cambió cuando el libro se abarató."}

:::callout{type="key" title="Cómo leer los resaltados"}
Los editores han marcado tres clases de palabras en esta lectura. Usa los mismos colores en tus apuntes.

- :mark[Término clave]{style="term"}: una palabra que define el glosario al final de la unidad.
- :mark[Fecha]{style="date"}: un año o un periodo que debes situar en tu cronología.
- :mark[Nombre]{style="name"}: una persona o un lugar de la historia.
:::

## Un taller en Maguncia

Hacia :mark[1450]{style="date"}, un orfebre llamado :mark[Johannes Gutenberg]{style="name"} dirigía un taller de imprenta en :mark[Maguncia]{style="name"}, a orillas del Rin. Imprimir no era una novedad. En China se tallaban páginas enteras en planchas de madera desde hacía siglos, y en Corea ya se fundían tipos de metal en el :mark[siglo XIII]{style="date"}. Lo que Gutenberg reunió fue un sistema pensado para las veintitantas letras del alfabeto latino.

El sistema tenía cuatro piezas. La primera eran los :mark[tipos móviles]{style="term"}: letras sueltas fundidas en metal que se componían en líneas, se imprimían y volvían a la caja para la página siguiente. Un molde de mano fundía miles de letras idénticas con una aleación de plomo, estaño y antimonio. Una tinta hecha con aceite de linaza se agarraba al metal, donde una tinta acuosa habría resbalado. Y una :mark[prensa de husillo]{style="term"}, como las que se usaban para prensar la uva o el papel húmedo, apretaba el pliego por igual contra los tipos entintados.

El primer gran libro del taller fue una Biblia latina en dos volúmenes, compuesta a dos columnas de 42 líneas y terminada hacia :mark[1455]{style="date"}. Se tiraron unos 180 ejemplares, casi todos en papel y algunos en vitela. Un copista podía tardar años en copiar una sola Biblia; el taller hizo la edición entera en un plazo parecido.

Para montar todo aquello, Gutenberg se había endeudado mucho. Su prestamista, el comerciante maguntino :mark[Johann Fust]{style="name"}, lo llevó a juicio en :mark[1455]{style="date"} y se quedó con buena parte del material. Fust siguió con el negocio junto a :mark[Peter Schöffer]{style="name"}, que se había formado en el taller. Su Salterio de :mark[1457]{style="date"} es el primer libro impreso cuyo :mark[colofón]{style="term"}, la nota que cierra el libro, da el nombre de los impresores y el día en que se acabó.

## El oficio se pone en camino

Durante unos diez años, la imprenta no salió del entorno de Maguncia. En :mark[1462]{style="date"} la ciudad fue saqueada en la guerra entre dos arzobispos rivales, y muchos de sus artesanos se marcharon. Los impresores formados en el Rin se instalaron allí donde encontraban lectores, papel y dinero: en :mark[Subiaco]{style="name"}, cerca de Roma, en :mark[1465]{style="date"}; en :mark[Venecia]{style="name"}, en :mark[1469]{style="date"}; en :mark[París]{style="name"}, en unas salas de la Sorbona, en :mark[1470]{style="date"}. En :mark[Segovia]{style="name"} trabajaba una prensa hacia :mark[1472]{style="date"}, y :mark[Valencia]{style="name"} tuvo la suya en :mark[1474]{style="date"}.

:mark[William Caxton]{style="name"}, un comerciante inglés que había aprendido el oficio en :mark[Colonia]{style="name"}, instaló su prensa en :mark[Westminster]{style="name"} en :mark[1476]{style="date"}. La mayoría de los impresores de la época trabajaban en latín, la lengua de la Iglesia y de las universidades, y vendían más allá de las fronteras. Caxton imprimió sobre todo en :mark[lengua vulgar]{style="term"}, la que la gente hablaba en casa: novelas de caballerías, historias y los *Cuentos de Canterbury* de Chaucer, para lectores que no sabían latín.

Los libros impresos antes de :mark[1501]{style="date"} se llaman :mark[incunables]{style="term"}, de la palabra latina que designa la cuna: son los libros de la infancia de la imprenta. Los catálogos actuales recogen unas 30 000 ediciones de esos cincuenta años. En :mark[1500]{style="date"} ya había funcionado alguna prensa en más de 250 ciudades, y los cálculos de los ejemplares que salieron de ellas van de ocho a veinte millones.

## Venecia y el libro de bolsillo

A finales de siglo, :mark[Venecia]{style="name"} tenía más talleres de imprenta que ninguna otra ciudad de Europa. Contaba con molinos de papel en tierra firme, con barcos que llevaban los libros a todos los puertos del Mediterráneo y con compradores que podían pagarlos. :mark[Aldo Manucio]{style="name"} abrió allí su prensa a :mark[mediados de la década de 1490]{style="date"} e imprimió los clásicos griegos en ediciones preparadas por humanistas.

En :mark[1501]{style="date"}, Aldo publicó un Virgilio en :mark[octavo]{style="term"}, un pliego doblado tres veces para dar dieciséis páginas, de modo que el libro cabía en la mano. Iba compuesto en una letra inclinada que había tallado :mark[Francesco Griffo]{style="name"} y que hoy llamamos :mark[cursiva]{style="term"}. Las letras estrechas metían más palabras en cada línea, así que los libros pequeños gastaban menos papel y costaban menos. El lector podía llevarse un poeta en el bolsillo en lugar de leerlo en el atril.

## La imprenta y la Reforma

En :mark[1517]{style="date"}, :mark[Martín Lutero]{style="name"}, profesor de teología en :mark[Wittenberg]{style="name"}, escribió noventa y cinco tesis contra la venta de indulgencias. En pocas semanas, impresores de varias ciudades alemanas las habían reimpreso. Lutero siguió escribiendo :mark[panfletos]{style="term"} breves en alemán: unas pocas páginas, rápidas de componer, baratas y fáciles de pasar de mano en mano. Muchos llevaban un grabado en la portada, que hablaba también a quien no sabía leer. Los historiadores calculan que entre :mark[1518]{style="date"} y :mark[1525]{style="date"} sus escritos fueron cerca de un tercio de todos los libros impresos en alemán.

Sus adversarios también respondieron por escrito, y la disputa sobre la Iglesia se libró en miles de panfletos que se leían en voz alta en tabernas y plazas de mercado. La imprenta no causó la Reforma, pero llevó los argumentos de cada bando más lejos y más deprisa que cualquier predicador.

## Comprueba tu lectura

1. ¿Qué hacía cada una de las cuatro piezas del sistema de Gutenberg?
2. ¿Por qué ayudó el saqueo de Maguncia de 1462 a extender la imprenta?
3. ¿Qué es un colofón y por qué se alegraría un historiador de encontrarlo?
4. Caxton eligió la lengua vulgar. ¿Quiénes eran sus lectores y por qué esa elección vendía libros?
5. Sitúa en una cronología de 1450 a 1525 las fechas en ámbar.

## Glosario

:::paragraphs{style="glossary"}
**:mark[colofón]{style="term"}** Nota al final de un libro que indica el impresor, el lugar y la fecha de impresión.

**:mark[cursiva]{style="term"}** Letra inclinada que talló por primera vez Francesco Griffo para Aldo Manucio.

**:mark[incunable]{style="term"}** Libro impreso en Europa antes de 1501.

**:mark[lengua vulgar]{style="term"}** La lengua que la gente habla en casa, frente al latín.

**:mark[octavo]{style="term"}** Libro cuyos pliegos se doblan tres veces, de modo que cada pliego da dieciséis páginas.

**:mark[panfleto]{style="term"}** Folleto breve de unas pocas páginas sin encuadernar, rápido y barato de imprimir.

**:mark[prensa de husillo]{style="term"}** Prensa en la que un tornillo, al girar, baja una platina plana contra el papel y los tipos.

**:mark[tipos móviles]{style="term"}** Letras fundidas una a una que se componen en líneas, se imprimen y se vuelven a usar.
:::

:::paragraphs{style="colophon"}
Compuesto en Source Serif 4 y Source Sans 3 (SIL Open Font License) · Texto: original, CC BY 4.0 · Imagen de apertura: una pintura hecha para esta edición.
:::
`; // content.<lang>.md: the reading, its key and questions

// #region art: a printing workshop around 1460, a painting in assets/ (no lettering)
const resources = [{ id: 'press', typeId: 'figure', kind: 'bitmap', createdAt: 0, updatedAt: 0,
  bitmap: { fileId: 'press-1400.jpg', format: 'jpeg', width: 1400, height: 790 },
  altText: t({
    en: 'A printing workshop: a compositor picks type from a case by the window while a '
      + 'pressman pulls the bar of a wooden screw press; printed sheets hang drying overhead.',
    es: 'Un taller de imprenta: un cajista toma tipos de la caja junto a la ventana mientras '
      + 'un prensista tira de la barra de una prensa de husillo; arriba se secan los pliegos.',
  }) }];
await loadImage(resources[0].bitmap.fileId, asset(resources[0].bitmap.fileId));
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = {
  'Source Serif 4': ['400', '400i', '700'],
  'Source Sans 3': ['400', '600', '700'],
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const doc = await buildDocumentWithFonts({ markdown, resources }, config, kitFonts(FONTS));
showPages(doc, { title: t({ en: 'A study reader in three highlight colours',
  es: 'Un libro de lecturas resaltado en tres colores' }) });

// ─── Kit ── helpers shared by every Cookbook recipe · postext.dev/cookbook ─────

// ─── Kit · core v1 ── the same in every recipe · postext.dev/cookbook
function mm(value) { return { value, unit: 'mm' }; }
function pt(value) { return { value, unit: 'pt' }; }
function em(value) { return { value, unit: 'em' }; }
/** The sample language's string: t({ en: 'Figure', es: 'Figura' }). */
function t(strings) { return strings[LANG] ?? Object.values(strings)[0]; }
/** A file in this recipe's assets folder, served from the Postext repo by jsDelivr. */
function asset(file) { return `https://cdn.jsdelivr.net/gh/drnachio/postext@main/cookbook/${RECIPE}/assets/${file}`; }

// ─── Kit · fonts v3 ── the same in every recipe · postext.dev/cookbook
// Postext loads the faces a config asks for before layout and asks the kit
// for Fontsource's files, the ones the PDF embeds too.

/** buildDocumentWithFonts' options: the resolver, and FONTS' faces loaded
 *  with the config's. FONTS = { 'Family Name': ['400', '400i', '700'] }. */
function kitFonts(FONTS = {}) {
  const faces = Object.entries(FONTS).flatMap(([family, specs]) => specs.map((spec) =>
    ({ family, weight: parseInt(spec, 10), style: spec.endsWith('i') ? 'italic' : 'normal' })));
  return { resolve: fontsourceResolver, faces };
}

/** A face's files with their ranges: latin, then latin-ext and greek when
 *  `text` needs them (kitSubsetsFor). Null for a face Fontsource lacks. */
async function fontsourceResolver(family, weight, style, { text = '' } = {}) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  if (meta && !(await fontsourceWeights(family, style)).includes(weight)) return null;
  kitStatus('Loading fonts…');
  const at = await fontsourceAt(id);
  return ['latin', ...kitSubsetsFor(text, meta)].map((subset) => ({
    source: `${at}files/${id}-${subset}-${weight}-${style}.woff2`,
    unicodeRange: kitRanges()[subset],
  }));
}

/** Each file's unicode-range (a function: the kit runs after the pen's code). */
function kitRanges() {
  return {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
    greek: 'U+0370-03FF',
  };
}

/** For the cjk, arabic and comics blocks: loads `faces` (as FONTS) for the
 *  sample `text`; `optional` skips a face Fontsource lacks. Files are added in
 *  the order asked, the last winning a shared character. Resolves to the count. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = kitRanges();
  const jobs = [];
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const todo = [...new Set(specs)].map((spec) => [parseInt(spec, 10), spec.endsWith('i') ? 'italic' : 'normal'])
      .filter(([weight, style]) => !hasFace(family, weight, style)); // before any await
    const at = fontsourceAt(id);
    const meta = optional || /[^\0-ÿ]/u.test(text) ? await fontsourceMeta(family) : null;
    const subsets = ['latin', ...kitSubsetsFor(text, meta)];
    for (const [weight, style] of todo) {
      if (optional && !(meta && (await fontsourceWeights(family, style)).includes(weight))) continue;
      for (const subset of subsets) {
        const url = `${await at}files/${id}-${subset}-${weight}-${style}.woff2`;
        const face = new FontFace(family, `url(${url}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: ranges[subset] });
        jobs.push(face.load().catch(() => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  const ready = await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return ready.filter((face) => face && document.fonts.add(face)).length;
}

/** A loaded FontFace covers this face (fonts.check() says yes to any family). */
function hasFace(family, weight, style) {
  for (const face of document.fonts) {
    if (face.status !== 'loaded' || face.style !== style) continue;
    if (face.family.replace(/^["']|["']$/g, '') !== family) continue;
    const [low, high = low] = face.weight.split(' ').map(Number);
    if (weight >= low && weight <= high) return true;
  }
  return false;
}

/** The files beyond latin `text` needs that `meta`'s family ships. */
function kitSubsetsFor(text, meta) {
  return [[/[Ā-˿ᴀ-ᶿḀ-ỿ†ℓⱠ-Ɀ꜠-ꟿ]/u, 'latin-ext'], [/[Ͱ-Ͽ]/u, 'greek']]
    .filter(([re, x]) => re.test(text) && meta?.subsets?.includes(x)).map(([, x]) => x);
}

/** Fontsource's id for a family: 'Source Serif 4' → 'source-serif-4'. */
function fontsourceId(family) { return family.toLowerCase().replace(/\s+/g, '-'); }

/** A package's folder at the one version @5 names now (#766). */
function fontsourceAt(id, u = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@`) {
  return (fontsourceAt.c ??= {})[id] ??= fetch(u + '5/package.json').then((r) => r.json())
    .then((p) => p.version || 5, () => 5).then((v) => `${u}${v}/`);
}

/** The family's Fontsource metadata (weights, styles, subsets), or null. */
function fontsourceMeta(family, id = fontsourceId(family)) {
  return (fontsourceMeta.c ??= {})[id] ??= fetch(`https://api.fontsource.org/v1/fonts/${id}`)
    .then((res) => (res.ok ? res.json() : null), () => null);
}

/** The weights the package ships in `style`: the API pairs none (no Libre
 *  Caslon 700 italic file), so italics are read from latin-italic.css. */
function fontsourceWeights(family, style, id = fontsourceId(family)) {
  return (fontsourceWeights.c ??= {})[id + style] ??= fontsourceMeta(family).then(async (m) => {
    if (!m?.styles.includes(style)) return m ? [] : [400, 700];
    const css = style === 'italic' ? await fetch(`${await fontsourceAt(id)}latin-italic.css`).then((r) => (r.ok ? r.text() : ''), () => '') : '';
    const w = [...css.matchAll(/weight: (\d+)/g)].map((x) => +x[1]);
    return w.length ? w : m.weights;
  });
}

// ─── Kit · viewer v2 ── the same in every recipe · postext.dev/cookbook
/** The pages as spreads on a dark desk, page 1 alone, then verso | recto,
 *  each painted when it scrolls near. Other options go to renderPageToCanvas. */
function showPages(docs, { title, width = 460, ...render } = {}) {
  const root = viewer(title);
  const pages = [docs].flat().flatMap((doc) =>
    doc.pages.map((page) => ({ doc, page, n: (doc.pageIndexOffset ?? 0) + page.index })));
  const spreads = [];
  let verso = null;
  for (const p of pages) {
    if (p.n % 2 === 1) { if (verso) spreads.push([verso, null]); verso = p; }
    else { spreads.push([verso, p]); verso = null; }
  }
  if (verso) spreads.push([verso, null]);
  const density = Math.min(window.devicePixelRatio || 1, 2);
  showPages.painter?.disconnect();
  const painter = new IntersectionObserver((entries) => {
    for (const { isIntersecting, target } of entries) {
      if (!isIntersecting) continue;
      painter.unobserve(target);
      const { doc, page } = target.postext;
      renderPageToCanvas(page, doc, target, { ...render, scale: (width * density) / page.width });
    }
  }, { rootMargin: '800px' });
  showPages.painter = painter;
  root.replaceChildren(...spreads.map((pair) => {
    const spread = document.createElement('div');
    spread.className = 'pt-spread';
    for (const p of pair) {
      const figure = document.createElement('figure');
      if (p) {
        const label = p.page.pageLabel || String(p.n + 1);
        const canvas = document.createElement('canvas');
        canvas.postext = p;
        canvas.style.aspectRatio = `${p.page.width} / ${p.page.height}`;
        canvas.setAttribute('role', 'img');
        canvas.setAttribute('aria-label', `Page ${label}`);
        const folio = document.createElement('figcaption');
        folio.textContent = label;
        figure.append(canvas, folio);
        painter.observe(canvas);
      } else figure.className = 'pt-blank';
      spread.append(figure);
    }
    return spread;
  }));
  kitStatus(`${pages.length} ${pages.length === 1 ? 'page' : 'pages'}`);
  document.documentElement.dataset.postext = 'ready';
  return pages.length;
}

/** The desk, the bar and the error reporting, created once. */
function viewer(title) {
  if (!document.getElementById('pt-kit')) {
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit">
      :root { color-scheme: dark; }
      body { margin: 0; background: #0e1014; color: #b9bcc4; font: 13px/1.45 system-ui, sans-serif; }
      #pt-bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px 16px; padding: 10px 16px; background: rgb(14 16 20 / .92); backdrop-filter: blur(6px);
        border-bottom: 1px solid #23262d; }
      #pt-bar strong { color: #f4f1ea; font-weight: 600; }
      #pt-actions { display: flex; gap: 12px; margin-left: auto; }
      #pt-actions a, #pt-actions button { color: #d8a21a; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
      #pages { display: grid; justify-items: center; gap: 48px; padding: 32px 16px 72px; }
      .pt-spread { display: flex; }
      .pt-spread figure { margin: 0; width: min(460px, 44vw); }
      .pt-spread canvas { display: block; width: 100%; background: #fff;
        box-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figure:first-child canvas { box-shadow: inset -14px 0 14px -14px rgb(0 0 0 / .18), 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figcaption { margin-top: 10px; text-align: center; font: 600 10px/1 system-ui, sans-serif;
        letter-spacing: .18em; text-transform: uppercase; color: #6c7079; }
      .pt-blank { visibility: hidden; }
      @media (max-width: 760px) {
        .pt-spread { flex-direction: column; gap: 32px; }
        .pt-spread figure { width: min(460px, 92vw); }
        .pt-blank { display: none; }
      }
    </style>`);
    document.body.insertAdjacentHTML('afterbegin',
      '<header id="pt-bar"><strong id="pt-title"></strong><span id="pt-status" role="status"></span><span id="pt-actions"></span></header>');
    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 · images v3 ── recipes with pictures · postext.dev/cookbook
/** Registers a photo or PNG for the canvas and keeps its bytes for the PDF.
 *  fetch → ImageBitmap never taints the canvas (a plain cross-origin <img> would). */
async function loadImage(fileId, url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Image not found (${res.status}): ${url}`);
  const bytes = new Uint8Array(await res.arrayBuffer());
  registerResourceImage(fileId, await createImageBitmap(new Blob([bytes])));
  (loadImage.bytes ??= new Map()).set(fileId, bytes);
}

/** Registers SVG markup as a vector image, its fonts inside (inlineSvgFonts, ≥ 1.25).
 *  `options` go to registerResourceImage: { singleInk: true } tints it on the canvas. */
async function loadSvg(fileId, svg, options) {
  if (typeof inlineSvgFonts === 'function') svg = await inlineSvgFonts(svg, svgFaces);
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img, options);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

/** A face's Fontsource files: nearest weight; latin + what the SVG sets. */
async function svgFaces(family, weight, style, { codePoints = [] } = {}) {
  const [id, m] = [fontsourceId(family), await fontsourceMeta(family)];
  const w = m?.weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a)) ?? weight;
  const s = m?.styles.includes(style) === false ? 'normal' : style;
  return Promise.all(['latin', ...kitSubsetsFor(String.fromCodePoint(...codePoints), m)].map(async (x) => new Uint8Array(
    await (await fetch(`${await fontsourceAt(id)}files/${id}-${x}-${w}-${s}.woff2`)).arrayBuffer())));
}

/** renderToPdf({ resourceBytes: imageBytes }) */
function imageBytes(fileId) { return loadImage.bytes?.get(fileId); }

/** renderToHtml({ resourceImageUrl: imageUrl }) */
function imageUrl(fileId) {
  const bytes = imageBytes(fileId);
  if (!bytes) return undefined;
  imageUrl.urls ??= new Map();
  if (!imageUrl.urls.has(fileId)) {
    const type = /\.svg$/i.test(fileId) ? 'image/svg+xml' : /\.png$/i.test(fileId) ? 'image/png' : 'image/jpeg';
    imageUrl.urls.set(fileId, URL.createObjectURL(new Blob([bytes], { type })));
  }
  return imageUrl.urls.get(fileId);
}

// ─── /Kit ───────────────────────────────────────────────────────────────────────
```

## Variantes

### Redondea los extremos de las franjas

Un radio de una quinta parte del cuerpo da los extremos suaves de un rotulador.

```diff
-  // borderRadius: 0 is the default (square ends, as a highlighter pen leaves them)
+  borderRadius: em(0.2), // soft ends, as a felt-tip pen leaves them
```

### Da a cada línea su propia franja

Con `decorationBreak: 'clone'`, una marca que pasa de línea lleva el relleno en los dos extremos de cada trozo, en lugar de quedar recta donde se corta la línea.

```diff
   paddingX: em(0.12), // the band reaches a little past the first and the last letter
+  decorationBreak: 'clone', // each line piece gets a whole band
```

## Errores frecuentes

- El color solo no sobrevive a una fotocopia en blanco y negro, que es como llegan muchas lecturas al aula. El glosario pone además los términos en negrita; si tus lectores van a fotocopiar las páginas, da a una de las tres clases una segunda señal propia.
- Un id de estilo que `markStyles` no declara toma el primer estilo, sin ningún error en la página (el Sandbox lo señala). Usa ids cortos y revisa cómo los escribes en el texto.

## Créditos

- Receta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Texto: La lectura, su clave, las preguntas de repaso y el colofón: Ignacio Ferro, CC-BY-4.0
- Imágenes: El taller de imprenta de la página de apertura, una pintura: Generated With Diffusion Models, original
- Tipografías: Source Serif 4 (OFL-1.1), Source Sans 3 (OFL-1.1)
- Código: MIT · Contenido de ejemplo: CC-BY-4.0

## Relacionadas

- [N.º 076 · Una cartilla con pinyin: la lectura sobre cada carácter](https://postext.dev/es/cookbook/pinyin-primer.md): Ruby carácter a carácter en una cartilla de Hong Kong: {人之初|rén zhī chū} centra una sílaba de pinyin sobre cada carácter, en Andika, en 28 pt de interlineado. · Nivel 2 (Intermedio) · Libros de texto, Cuadernos y ejercicios
- [N.º 163 · Un manual de armonía con ejemplos musicales en ABC](https://postext.dev/es/cookbook/harmony-textbook-abc-examples.md): Un capítulo sobre las cadencias cuyos ejemplos son bloques ABC en el Markdown, grabados al ancho de la columna; uno de ellos sigue en la página siguiente. · Nivel 2 (Intermedio) · Libros de texto
- [N.º 122 · Kanbun con sus marcas de lectura y la lectura japonesa](https://postext.dev/es/cookbook/kanbun-kundoku.md): Tres dichos de las Analectas y una cuarteta Tang como en un libro escolar japonés: marcas de retorno y okurigana en bermellón, y la lectura en kana debajo. · Nivel 2 (Intermedio) · Libros de texto