# Ressaltats per colors en un llibre de lectures

> Un llibre de lectures d'història amb tres colors de ressaltat (verd per als termes, ambre per a les dates, blau per als noms) definits a markStyles.

- Versió HTML: https://postext.dev/ca/cookbook/colour-coded-study-highlights
- Recepta Núm. 180 · Text i tipografia · Nivell 2 (Intermedi) · Sortides: Canvas
- Gèneres: Llibres de text
- Requereix postext ≥ 1.65.0 · provada amb 1.65.0 el 2026-10-31
- Pàgines: [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)
- Obre al Sandbox: https://postext.dev/ca/sandbox#recipe=colour-coded-study-highlights&lang=es (.postext: https://postext.dev/cookbook/colour-coded-study-highlights/es/colour-coded-study-highlights.postext)
- Última actualització: 2026-10-31
- Altres idiomes: [en](https://postext.dev/en/cookbook/colour-coded-study-highlights.md), [es](https://postext.dev/es/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 poques paraules

Una lectura escolar sobre la història de la impremta. Els termes clau van en verd, les dates en ambre i les persones i els llocs en blau, i una clau a la primera pàgina explica què vol dir cada color.

## Què compondràs

La lectura 2 d'una unitat d'un llibre escolar d'història, *Lecturas de historia moderna*: quatre pàgines sobre com la impremta es va estendre per Europa des de Magúncia entre el 1450 i el 1550, en una pàgina de 170 × 240 mm. Els editors han marcat el text com ho faria un bon estudiant, amb un codi que no canvia en tot el llibre: els termes clau sobre una franja verda, les dates sobre ambre, les persones i els llocs sobre blau pàl·lid. Una clau sota el títol explica el codi amb els tres colors, i el glossari de l'última pàgina obre cada entrada amb el seu terme en verd. Les marques són franges sota text corrent, de manera que les línies es tallen, es divideixen i es justifiquen com si no hi fossin.

**Aquesta recepta respon a:**

- Com ressalto un text d'estudi amb colors que vulguin dir alguna cosa: termes, dates i noms?

## La resposta curta

```js
// script.js, línies 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' })),
];
```

## Ingredients

**Ensenya**

- [Marques de ressaltat](https://postext.dev/ca/docs/document-format-inline.md#marques-de-ressaltat): Una franja de color darrere d'una frase, com un llibre de text ressalta les seves paraules clau: les paraules continuen sent text corrent i passen de línia, la franja acompanya cada tros.

**També fa servir**

- [Requadres](https://postext.dev/ca/docs/configuration-callouts.md#estils-de-requadre)
- [Paleta de color semàntica](https://postext.dev/ca/docs/configuration-fonts-colors-viewers.md#paleta-de-colors)
- [Obertures dissenyades](https://postext.dev/ca/docs/configuration-headings.md#extensió-i-disseny-avançat)
- [Imatges als dissenys de pàgina](https://postext.dev/ca/docs/configuration-headers-footers.md#elements-dimatge)
- [Atributs de títol](https://postext.dev/ca/docs/document-format.md#atributs-dencapçalament)
- [Capçaleres i folis](https://postext.dev/ca/docs/configuration-headers-footers.md#capçaleres-i-peus)
- [Capçaleres segons el tipus de pàgina](https://postext.dev/ca/docs/configuration-headers-footers.md#elements-de-text)
- [Marges simètrics](https://postext.dev/ca/docs/configuration-page-layout.md#marges-simètrics)
- [Estils de paràgraf](https://postext.dev/ca/docs/configuration-styles.md#estils-de-paràgraf)
- [Vídues, òrfenes i línies curtes](https://postext.dev/ca/docs/configuration-page-flow.md#òrfenes-vídues-línies-curtes-i-regles-de-cohesió)
- [Bibliografies i glossaris](https://postext.dev/ca/docs/configuration-styles.md#estils-de-paràgraf)
- [Figura i Taula en la teva llengua](https://postext.dev/ca/docs/configuration-resources.md#tipus-de-recurs)
- [Tipus de recurs propis](https://postext.dev/ca/docs/configuration-resources.md#tipus-de-recurs)
- [Figures i taules com a recursos](https://postext.dev/ca/docs/document-format-resources.md#recursos)

**La configuració d'un cop d'ull**

- [`bodyText`](https://postext.dev/ca/docs/configuration-text.md#text-de-cos), [`calloutStyles`](https://postext.dev/ca/docs/configuration-callouts.md#estils-de-requadre), [`captionStyle`](https://postext.dev/ca/docs/configuration-resources.md#estil-dels-peus-de-recurs), [`colorPalette`](https://postext.dev/ca/docs/configuration-fonts-colors-viewers.md#paleta-de-colors), [`footer`](https://postext.dev/ca/docs/configuration-headers-footers.md#capçaleres-i-peus), [`header`](https://postext.dev/ca/docs/configuration-headers-footers.md#capçaleres-i-peus), [`headings`](https://postext.dev/ca/docs/configuration-headings.md#encapçalaments), [`layout`](https://postext.dev/ca/docs/configuration-page-layout.md#disposició), [`locale`](https://postext.dev/ca/docs/configuration-language.md#partició-de-mots), [`markStyles`](https://postext.dev/ca/docs/configuration-styles.md#estils-de-ressaltat), [`orderedLists`](https://postext.dev/ca/docs/configuration-lists-math.md#llistes-numerades), [`page`](https://postext.dev/ca/docs/configuration-page-layout.md#pàgina), [`paragraphStyles`](https://postext.dev/ca/docs/configuration-styles.md#estils-de-paràgraf), [`resourceTypes`](https://postext.dev/ca/docs/configuration-resources.md#tipus-de-recurs), [`unorderedLists`](https://postext.dev/ca/docs/configuration-lists-math.md#llistes-amb-pics)

**API**

- [`buildDocumentWithFonts`](https://postext.dev/ca/docs/configuration-programmatic-usage.md#carregar-les-fonts-abans-de-compondre), [`defaultResourceTypes`](https://postext.dev/ca/docs/configuration-resources.md#tipus-de-recurs), [`registerResourceImage`](https://postext.dev/ca/docs/architecture.md#superfície-dapi), [`renderPageToCanvas`](https://postext.dev/ca/docs/configuration-programmatic-usage.md#renderitzar-una-pàgina-en-un-mapa-de-bits)

**Tipus de lletra**

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

## Elaboració

### 1 · Un estil per a cada mena de paraula

El codi és [la resposta curta](https://postext.dev/ca/cookbook/colour-coded-study-highlights.md#la-resposta-curta) de més amunt. `markStyles` declara tres estils amb nom, i el text en tria un a cada marca: `:mark[Johann Fust]{style="name"}`, `:mark[1455]{style="date"}`, `:mark[colofón]{style="term"}` ([marques de ressaltat](https://postext.dev/ca/docs/document-format-inline.md#marques-de-ressaltat)). Cada estil diu què vol dir (`name` és el que veu qui edita), de manera que el Markdown guarda per què es marca una paraula i no de quin color va. Si canvies el color d'un estil, canvien amb ell totes les dates del llibre. Els extrems són rectes, com per defecte des de postext 1.52 ([estils de ressaltat](https://postext.dev/ca/docs/configuration-styles.md#estils-de-ressaltat)): un retolador fluorescent deixa els extrems rectes, i una franja arrodonida es llegeix com un xip.

### 2 · Tres tintes de la paleta

```js
// script.js, línies 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' } },
];
```

Les tres franges són entrades de la paleta, igual que la tinta i l'accent, així que qui obri el llibre al Sandbox pot canviar el codi des d'una sola mostra de color. Són pàl·lides, d'una lluminositat semblant a la del fons del requadre, i el text a sobre conserva un contrast de 12,6:1 o més; les tres es distingeixen quan es troben en una línia, com a «En 1517, Martín Lutero» a la pàgina 3. Una marca no ocupa espai: `paddingX` entra 0,12 em a l'espai del costat de la frase i `paddingBottom` baixa la franja per sota dels traços descendents, i tots dos es pinten en un espai que ja hi era.

### 3 · L'obertura: una pintura sobre el títol

```js
// script.js, línies 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ítol de primer nivell imprimeix un disseny. La pintura s'ancora a la pàgina, així que surt a sang per dalt i pels dos costats, 170 per 96 mm, amb `fit: 'cover'`. L'avanttítol i l'entradeta surten d'atributs de la línia del títol ([atributs de títol](https://postext.dev/ca/docs/document-format.md#atributs-dencapçalament)), i la clau segueix com un `:::callout` corrent amb uns elements de llista que comencen per les tres marques. `minHeight` fixa la profunditat: la clau comença a la mateixa línia per molt que ocupi el títol.

### 4 · Capçaleres segons la paritat

```js
// script.js, línies 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 parella porta el títol de la col·lecció i la senar el de la lectura, totes dues filtrades per `parity` i fora de l'obertura gràcies a `pages: 'body'` ([elements de text](https://postext.dev/ca/docs/configuration-headers-footers.md#elements-de-text)). L'obertura porta el foli al peu.

## La recepta completa

Un sol fitxer, compost a partir de la carpeta de la recepta amb el text d'exemple i el kit comú del Receptari ja inclosos; construeix la seva pròpia pàgina. Per executar-lo, posa'l en un `<script type="module">` d'una pàgina buida o enganxa'l al tauler JS d'un pen nou de CodePen (com a mòdul). Importa postext des d'esm.sh, així que no cal instal·lar ni compilar res.

- Carpeta de la recepta: 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 ───────────────────────────────────────────────────────────────────────
```

## Variants

### Arrodoneix els extrems de les franges

Un radi d'una cinquena part del cos dona els extrems suaus d'un retolador.

```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
```

### Dona a cada línia la seva franja

Amb `decorationBreak: 'clone'`, una marca que passa de línia porta el farciment als dos extrems de cada tros, en lloc de quedar recta on es talla la línia.

```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
```

## Errors freqüents

- El color sol no sobreviu a una fotocòpia en blanc i negre, que és com arriben moltes lectures a l'aula. El glossari posa a més els termes en negreta; si els teus lectors fotocopiaran les pàgines, dona a una de les tres menes un segon senyal propi.
- Un id d'estil que `markStyles` no declara pren el primer estil, sense cap error a la pàgina (el Sandbox l'assenyala). Fes servir ids curts i revisa com els escrius al text.

## Crèdits

- Recepta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Text: The reading, its key, the review questions and the colophon: Ignacio Ferro, CC-BY-4.0
- Imatges: The printing workshop on the opening page, a painting: Generated With Diffusion Models, original
- Tipus de lletra: Source Serif 4 (OFL-1.1), Source Sans 3 (OFL-1.1)
- Codi: MIT · Contingut d'exemple: CC-BY-4.0

## Relacionades

- [Núm. 076 · Una cartilla amb pinyin: la lectura sobre cada caràcter](https://postext.dev/ca/cookbook/pinyin-primer.md): Ruby caràcter a caràcter en una cartilla de Hong Kong: {人之初|rén zhī chū} centra una síl·laba de pinyin sobre cada caràcter, en Andika, en 28 pt d'interlínia. · Nivell 2 (Intermedi) · Llibres de text, Quaderns i exercicis
- [Núm. 163 · Un manual d'harmonia amb exemples musicals en ABC](https://postext.dev/ca/cookbook/harmony-textbook-abc-examples.md): Un capítol sobre les cadències amb exemples en blocs ABC dins del Markdown, gravats a l'amplada de la columna; un d'ells continua a la pàgina següent. · Nivell 2 (Intermedi) · Llibres de text
- [Núm. 122 · Kanbun amb les marques de lectura i la lectura japonesa](https://postext.dev/ca/cookbook/kanbun-kundoku.md): Tres dites de les Analectes i una quarteta Tang com en un llibre escolar japonès: marques de retorn i okurigana en vermelló, i la lectura en kana a sota. · Nivell 2 (Intermedi) · Llibres de text