# Chino vertical con citas en notas dentro del renglón

> Un capítulo vertical en caracteres tradicionales, encuadernado por la derecha, cuyas citas de nota GB/T 7714 se componen como 夾注 dentro de la columna.

- Versión HTML: https://postext.dev/es/cookbook/vertical-book-with-jiazhu-citations
- Receta N.º 091 · Estructura del libro · Nivel 3 (Avanzado) · Salidas: Canvas, PDF
- Géneros: Cualquier género
- Requiere postext ≥ 1.12.0, postext-pdf ≥ 1.12.0 · probada con 1.12.0, postext-pdf 1.12.0 el 2026-10-01
- Páginas: [四十五](https://postext.dev/cookbook/vertical-book-with-jiazhu-citations/es/p01.webp?v=07f8ae4e), [四十六](https://postext.dev/cookbook/vertical-book-with-jiazhu-citations/es/p02.webp?v=07f8ae4e), [四十七](https://postext.dev/cookbook/vertical-book-with-jiazhu-citations/es/p03.webp?v=07f8ae4e)
- PDF: https://postext.dev/cookbook/vertical-book-with-jiazhu-citations/es/vertical-book-with-jiazhu-citations.pdf?v=07f8ae4e
- Abrir en el Sandbox: https://postext.dev/es/sandbox#recipe=vertical-book-with-jiazhu-citations&lang=es (.postext: https://postext.dev/cookbook/vertical-book-with-jiazhu-citations/es/vertical-book-with-jiazhu-citations.postext)
- Última actualización: 2026-10-01
- Otros idiomas: [en](https://postext.dev/en/cookbook/vertical-book-with-jiazhu-citations.md), [zh](https://postext.dev/zh/cookbook/vertical-book-with-jiazhu-citations.md)

## En pocas palabras

Un capítulo de un libro chino compuesto en columnas de arriba abajo. Cada fuente se cita en una nota pequeña de dos líneas dentro de la columna, y al final se listan las obras citadas.

## Lo que vas a componer

El final de un capítulo de un libro inventado sobre la imprenta china, 版刻叢談 («Charlas sobre la impresión xilográfica»), compuesto en caracteres tradicionales, de arriba abajo en columnas que se leen desde la derecha, en una página 大32開 de 140 × 203 mm encuadernada por la derecha. El capítulo trata de la disposición de las ediciones Song y cita cinco obras reales. Cada cita se compone como los libros chinos han compuesto el comentario durante siglos: como un 夾注, una nota en dos filas a medio cuerpo, dentro de la columna donde está la cita. Una nota que no cabe en lo que queda de columna sigue en la cabeza de la siguiente, y una de ellas sigue tras el paso de página. Las notas siguen la forma de nota de la GB/T 7714—2015, la norma de referencias de la China continental, y el capítulo acaba con una lista numerada de las obras que cita, las inglesas giradas. El mismo capítulo con las notas al pie de página se compondría como [Notas al pie de la columna que las cita](https://postext.dev/es/cookbook/novel-footnotes-column-foot.md).

**Esta receta responde a:**

- ¿Cómo compongo las citas como notas de dos líneas dentro del renglón (夾注) en un libro chino vertical?
- ¿Cómo pongo las citas en notas al pie, al estilo de Chicago, con forma breve en las siguientes?

## La respuesta corta

```js
// script.js, líneas 29–43
// The GB/T 7714 note style turns each citation into a note. notes: 'warichu' sets the note
// in the column where the citation stands, in two rows at half the text size, the right
// row read first; a note longer than what is left of the column goes on in the next one.
// The list at the chapter's end comes from :::bibliography{scope=chapter}, numbered in
// the order the works are cited. Latin words turn sideways in the notes and in the list.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const citations = {
  style: 'china-national-standard-gb-t-7714-2015-note',
  notes: 'warichu', // 夾注; 'footnote' sets the same notes at the foot of the page
  bibliography: { fontSize: em(0.9), entrySpacing: pt(0) },
};
const cjk = {
  grid: { enabled: true, charsPerLine: 36, linesPerPage: 15 },
  warichu: { fontSize: em(0.5), color: col('ink') }, // no brackets: the half size sets it off
};
```

## Ingredientes

**Enseña**

- [Citas en notas](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía): Un estilo de notas (Chicago notas, OSCOLA, GB/T 7714 notas) pone cada cita en una nota al pie, con forma breve en las citas siguientes, o en una nota de dos líneas dentro del renglón chino.
- [Citas en un estilo de cita](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía): Obras citadas como [@clave, pág. 33] y formateadas en un estilo CSL (APA, Chicago, MLA, IEEE, Vancouver, ISO 690, GB/T 7714…) elegido en los ajustes, enlazadas con sus entradas.

**También usa**

- [Warichu: notas a dos líneas dentro de la línea](https://postext.dev/es/docs/document-format.md#marcas-chinas-ruby-y-warichu)
- [Bibliografía a partir de las referencias](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía)
- [Texto vertical](https://postext.dev/es/docs/configuration.md#escritura-vertical)
- [Libros encuadernados por la derecha](https://postext.dev/es/docs/configuration.md#encuadernación)
- [Retícula de caracteres](https://postext.dev/es/docs/configuration.md#retícula-de-caracteres)
- [Numeración china](https://postext.dev/es/docs/configuration.md#numeración)
- [Anchura de la puntuación china](https://postext.dev/es/docs/configuration.md#anchos-de-la-puntuación)
- [Fuentes chinas, japonesas y coreanas](https://postext.dev/es/docs/configuration.md#fuentes-chinas-japonesas-y-coreanas)
- [Aperturas diseñadas](https://postext.dev/es/docs/configuration.md#span-y-diseño-avanzado)
- [Títulos numerados](https://postext.dev/es/docs/configuration.md#configuración-por-nivel)
- [Cabeceras y folios](https://postext.dev/es/docs/configuration.md#encabezados-y-pies)
- [Cabeceras según el tipo de página](https://postext.dev/es/docs/configuration.md#elementos-de-texto)
- [Márgenes simétricos](https://postext.dev/es/docs/configuration.md#márgenes-simétricos-espejo)
- [Paleta de color semántica](https://postext.dev/es/docs/configuration.md#paleta-de-colores)
- [Exportación a PDF](https://postext.dev/es/docs/configuration.md#generación-de-pdf)
- [Corte de líneas en chino](https://postext.dev/es/docs/configuration.md#tipografía-de-asia-oriental)
- [Equilibrado de columnas](https://postext.dev/es/docs/configuration.md#equilibrado-de-columnas)
- [Atributos de título](https://postext.dev/es/docs/document-format.md#atributos-de-encabezado)
- [Color del papel](https://postext.dev/es/docs/configuration.md#página)
- [Fuentes incrustadas en el PDF](https://postext.dev/es/docs/configuration.md#por-qué-un-proveedor-de-fuentes)
- [Preliminares en romanos](https://postext.dev/es/docs/document-format.md#numbering)

**La configuración de un vistazo**

- [`bodyText`](https://postext.dev/es/docs/configuration.md#texto-de-cuerpo), [`citations`](https://postext.dev/es/docs/configuration.md#citas), [`cjk`](https://postext.dev/es/docs/configuration.md#tipografía-de-asia-oriental), [`colorPalette`](https://postext.dev/es/docs/configuration.md#paleta-de-colores), [`footer`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), [`header`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), [`headings`](https://postext.dev/es/docs/configuration.md#encabezados), [`layout`](https://postext.dev/es/docs/configuration.md#disposición), [`locale`](https://postext.dev/es/docs/configuration.md#separación-silábica), [`page`](https://postext.dev/es/docs/configuration.md#página)

**API**

- [`LOCALES`](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía), [`STYLES`](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía), [`buildDocument`](https://postext.dev/es/docs/configuration.md#construir-un-documento), [`clearMeasurementCache`](https://postext.dev/es/docs/configuration.md#caché-de-medidas), [`createCiteprocEngine`](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía), [`decompressWoff2`](https://postext.dev/es/docs/configuration.md#proveedor-de-fuentes-en-el-navegador-fontsource--woff2), `loadVerticalAlternates`, [`registerCitationEngine`](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía), [`renderPageToCanvas`](https://postext.dev/es/docs/configuration.md#renderizar-una-página-a-un-bitmap), [`renderToPdf`](https://postext.dev/es/docs/configuration.md#generación-de-pdf)

**Tipografías**

- Noto Serif SC (OFL-1.1), Noto Sans SC (OFL-1.1), LXGW WenKai TC (OFL-1.1)

## Elaboración

### 1 · Un estilo de notas, compuesto dentro del renglón

El código es [la respuesta corta](#la-respuesta-corta) de arriba. El estilo de notas de la GB/T 7714 (`china-national-standard-gb-t-7714-2015-note`) convierte cada cita en una nota que nombra la obra entera ([Citas](/es/docs/configuration#citas)). Por defecto, un estilo de notas manda las notas al pie de la página. `notes: 'warichu'` deja cada nota en la columna, compuesta como warichu: dos filas a `cjk.warichu.fontSize`, medio cuerpo del texto, centradas en la columna, y se lee primero la fila derecha ([Marcas, ruby y warichu](/es/docs/configuration#marcas-ruby-y-warichu)). El Markdown es el de cualquier estilo, `[@su1999]` tras las palabras que respalda, y la nota ocupa el lugar de la cita, antes del 。 que cierra la frase.

![Página de apertura 四十五: 第三章 宋刻本的版式. La página de apertura, a la izquierda del lomo: desde la derecha, 第三章 en Hei negrita y el título 宋刻本的版式 en Kai, cada uno en su columna entre tres filetes bermellón, y después el texto en columnas de 36 caracteres. Dos citas van dentro de las columnas como notas en dos filas de medio cuerpo: el libro de 宿白 al pie de la tercera columna, que sigue en la cabeza de la cuarta, y el de 張秀民 más adelante. El folio 四十五 está abajo en el margen izquierdo; al pie, una línea de letra latina pequeña dice que el libro es inventado y que las obras citadas son reales.](https://postext.dev/cookbook/vertical-book-with-jiazhu-citations/es/p01.webp?v=07f8ae4e)

*Página 1: la nota del libro de 宿白 empieza al pie de la tercera columna y sigue en la cabeza de la cuarta, cada vez con la fila derecha primero.*

Las filas se llenan por tramos. Al pie de la tercera columna solo caben 宿白. 唐宋時期, que se reparten en dos filas de tres y cuatro casillas; el resto de la nota llena la cabeza de la columna siguiente, otra vez en dos filas. En la página 2 la nota de Twitchett empieza al pie de la última columna, y el lector pasa la página para acabarla.

### 2 · Las obras citadas, al final del capítulo

`:::bibliography{title="本章引用書目" scope=chapter}` coloca la lista donde está y solo incluye las obras que cita este capítulo ([La bibliografía](/es/docs/document-format#la-bibliografía)). Las referencias salen de un bloque BibTeX. Cada entrada lleva un `langid`, `chinese` o `english`, que el estilo lee como lengua de la obra, y los nombres escritos en caracteres quedan enteros. La lista se numera por orden de primera cita, y las columnas siguientes de cada entrada empiezan debajo de su etiqueta.

### 3 · Caracteres tradicionales con las reglas del continente

`locale: 'zh-Hant-CN'` pide caracteres tradicionales con las reglas de la China continental, como componen los editores de Pekín y Shanghái los estudios clásicos: la coma y el punto van en la esquina superior derecha de su casilla, y un libro vertical se encuaderna por la derecha. Las citas siguen la etiqueta: la escritura tradicional elige el locale CSL zh-TW, así que las palabras que añade el estilo también van en caracteres tradicionales. Noto Serif SC dibuja los caracteres tradicionales con las formas del continente, que es lo que pide esta edición; LXGW WenKai TC, una fuente de Taiwán, solo compone el título del capítulo, que no lleva puntuación ([Números en texto vertical](/es/docs/configuration#números-en-texto-vertical) explica qué pasa con las cifras).

En las notas y en la lista, un título latino y un año de cuatro cifras se giran y bajan por la columna. Un número corto junto a texto chino, como el 1 de una etiqueta, queda derecho en su casilla.

### 4 · La apertura entre filetes

```js
// script.js, líneas 47–64
// In the flow frame x runs down the column and y across the page, right to left, so a
// 'horizontal' rule is a vertical line on the sheet: three of them rule the two columns.
const [TITLE, PITCH] = [15, 1.6 * LEAD]; // pt: the title's size and its column pitch
const rule = (n) => ({ kind: 'rule', id: `rule-${n}`, direction: 'horizontal',
  thickness: pt(n === 1 ? 0.4 : 0.8), color: col('vermilion'),
  placement: { anchor: { to: 'container', edge: 'top-left' },
    offset: { y: pt(LEAD + n * PITCH) }, size: { width: 'fill' } } });
// A line of PITCH in column n (0, 1), its characters centred between two rules.
const title = (id, content, n, family, size, weight) => ({ kind: 'text', id, content,
  fontFamily: family, fontWeight: weight, fontSize: pt(size), lineHeight: PITCH / size,
  color: col('ink'), letterSpacing: pt(size * 0.25), align: 'left',
  placement: { anchor: { to: 'container', edge: 'top-left' },
    offset: { x: pt(2 * BODY), y: pt(LEAD + n * PITCH) } } }); // two characters down
const opener = { enabled: true, minHeight: cols(5), slot: { elements: [
  rule(0), rule(1), rule(2),
  title('number', '{number}', 0, HEI, 12, 700), // 第三章 in the first column, in 黑
  title('title', '{titleText}', 1, KAI, TITLE, 400), // the title in the second, in 楷
] } };
```

En una página vertical, un diseño de título se coloca en el marco del flujo: `x` baja por la columna e `y` cruza la página desde su borde derecho, así que un filete `'horizontal'` es una línea vertical en el pliego. Tres filetes enmarcan dos columnas a 30,4 pt. 第三章 va en la primera en Hei negrita, y el título en la segunda en Kai ([Span y diseño avanzado](/es/docs/configuration#span-y-diseño-avanzado)). El número del capítulo sale de `startAt=3` en el título y de la plantilla `第{1:一}章`, y los folios de `pageNumbering`: `trad-chinese-informal` desde 45. Las cabeceras y los folios bajan por el margen exterior como en [Una novela china vertical, encuadernada por la derecha](https://postext.dev/es/cookbook/vertical-novel-right-bound.md) ([Elementos de texto verticales](/es/docs/configuration#elementos-de-texto-verticales)).

```js
// script.js, líneas 17–22
const palette = {
  ink: '#22201c', vermilion: '#a8352a', muted: '#6d665d', paper: '#fbf8f1',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.vermilion })
  .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
```

## 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/vertical-book-with-jiazhu-citations

### script.js

```js
// ═══ Postext Cookbook · Nº 091 · Vertical Chinese with citations in inline notes ══════
// https://postext.dev/en/cookbook/vertical-book-with-jiazhu-citations
// Code: MIT · Text: original (CC BY 4.0) · Pictures: none
// Fonts: Noto Serif SC, Noto Sans SC, LXGW WenKai TC (SIL OFL 1.1) · Needs postext ≥ 1.12.0
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerCitationEngine,
  loadVerticalAlternates,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';
import { createCiteprocEngine, STYLES, LOCALES } from 'https://esm.sh/postext-citeproc';

const LANG = 'es'; // @lang: the language of the frame; the chapter is Chinese in both editions
const RECIPE = 'vertical-book-with-jiazhu-citations';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: black ink, one vermilion for the opener's rules, the paper of the page
const palette = {
  ink: '#22201c', vermilion: '#a8352a', muted: '#6d665d', paper: '#fbf8f1',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.vermilion })
  .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
// #endregion
const [SONG, HEI, KAI] = ['Noto Serif SC', 'Noto Sans SC', 'LXGW WenKai TC']; // 宋, 黑, 楷
const [BODY, LEAD] = [10.5, 19]; // pt: 五號 on a column pitch of 1.8 em
const cols = (n) => pt(n * LEAD); // n columns across the page

// #region answer: a note style set as 夾注, two half-size rows inside the column
// The GB/T 7714 note style turns each citation into a note. notes: 'warichu' sets the note
// in the column where the citation stands, in two rows at half the text size, the right
// row read first; a note longer than what is left of the column goes on in the next one.
// The list at the chapter's end comes from :::bibliography{scope=chapter}, numbered in
// the order the works are cited. Latin words turn sideways in the notes and in the list.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const citations = {
  style: 'china-national-standard-gb-t-7714-2015-note',
  notes: 'warichu', // 夾注; 'footnote' sets the same notes at the foot of the page
  bibliography: { fontSize: em(0.9), entrySpacing: pt(0) },
};
const cjk = {
  grid: { enabled: true, charsPerLine: 36, linesPerPage: 15 },
  warichu: { fontSize: em(0.5), color: col('ink') }, // no brackets: the half size sets it off
};
// #endregion

// #region opener: 第三章 and the title in two ruled columns, the text after a blank one
// In the flow frame x runs down the column and y across the page, right to left, so a
// 'horizontal' rule is a vertical line on the sheet: three of them rule the two columns.
const [TITLE, PITCH] = [15, 1.6 * LEAD]; // pt: the title's size and its column pitch
const rule = (n) => ({ kind: 'rule', id: `rule-${n}`, direction: 'horizontal',
  thickness: pt(n === 1 ? 0.4 : 0.8), color: col('vermilion'),
  placement: { anchor: { to: 'container', edge: 'top-left' },
    offset: { y: pt(LEAD + n * PITCH) }, size: { width: 'fill' } } });
// A line of PITCH in column n (0, 1), its characters centred between two rules.
const title = (id, content, n, family, size, weight) => ({ kind: 'text', id, content,
  fontFamily: family, fontWeight: weight, fontSize: pt(size), lineHeight: PITCH / size,
  color: col('ink'), letterSpacing: pt(size * 0.25), align: 'left',
  placement: { anchor: { to: 'container', edge: 'top-left' },
    offset: { x: pt(2 * BODY), y: pt(LEAD + n * PITCH) } } }); // two characters down
const opener = { enabled: true, minHeight: cols(5), slot: { elements: [
  rule(0), rule(1), rule(2),
  title('number', '{number}', 0, HEI, 12, 700), // 第三章 in the first column, in 黑
  title('title', '{titleText}', 1, KAI, TITLE, 400), // the title in the second, in 楷
] } };
// #endregion

// The fore-edge: the book's title or the chapter's down the outer margin, the folio low.
const foreEdge = (id, content, parity, edge, y, pages) => ({
  kind: 'text', id, content, parity, pages, writingMode: 'vertical-rl',
  fontFamily: HEI, fontSize: pt(8), color: col('muted'), overflow: 'clip',
  placement: { anchor: { to: 'outer', edge }, offset: { y: em(y) } },
});
const header = { elements: [
  foreEdge('book', '{title}', 'even', 'top', 4, 'body'),
  foreEdge('chapter', '{chapterNumber}　{chapterTitle}', 'odd', 'top', 4, 'body'),
  foreEdge('folio', '{pageNumber}', 'all', 'bottom', -5, 'all'),
  // Across the foot of the opening page, in the edition's language: what is invented.
  { kind: 'text', id: 'imprint', content: '{subtitle}', pages: 'opener', fontFamily: SONG,
    fontSize: pt(6.5), color: col('muted'), align: 'center', overflow: 'wrap',
    placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { y: mm(-9) },
      size: { width: mm(100) } } },
] };

const config = () => ({ // a factory: the engine caches resolved configs per object
  // Traditional characters to the mainland's rules, as Beijing and Shanghai publishers set
  // classical scholarship (gotcha: cjk-locale-tag). The citations follow it: zh-TW terms.
  locale: 'zh-Hant-CN',
  colorPalette,
  citations,
  cjk,
  page: { sizePreset: 'custom', width: mm(140), height: mm(203), dpi: 150, // 大32開
    backgroundColor: col('paper'),
    margins: { top: mm(34), bottom: mm(26), left: mm(15), right: mm(19), mirror: true },
    pageNumbering: { format: 'trad-chinese-informal', startAt: 45 } }, // 四十五
  layout: { layoutType: 'single', writingMode: 'vertical-rl' }, // bound on the right
  bodyText: {
    fontFamily: SONG, fontSize: pt(BODY), lineHeight: pt(LEAD), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: em(2), indentAfterHeading: true,
  },
  headings: { fontFamily: SONG, fontWeight: 700, color: col('ink'),
    balancing: { enabled: false }, // the columns stay on the grid
    levels: [{ level: 1, numberingTemplate: '第{1:一}章', numberSeparator: '　',
      breakBefore: { enabled: true, parity: 'odd' }, // gotcha: headings-drop-h1-break
      marginBottom: pt(0), advancedDesign: opener }] },
  header,
  footer: { elements: [] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "版刻叢談"
author: "沈硯秋"
subtitle: "Capítulo de muestra escrito para el Recetario de Postext. El libro y su autor son inventados; las cinco obras citadas son reales."
---

# 宋刻本的版式 {startAt=3}

雕版印書，始於唐而盛於宋。唐代的印本流傳至今的極少，所見多是佛經、曆書一類的零星之物，敦煌所出的咸通九年《金剛經》卷子，是其中有確切紀年的一件[@su1999]。到了宋代，經史子集都有了刻本，官府、書院、私家和書坊競相開雕，書的樣子也大體定了下來[@zhang1989]。後世講版本的人談到書葉的格局，總是從宋本說起。

一塊書版刻成一葉，四周用欄線圍住，叫作版框。欄線只有一道的稱「四周單邊」，外粗內細兩道的稱「四周雙邊」，只在左右兩邊用雙線的稱「左右雙邊」。框內用直線分行，每半葉幾行、每行幾字，叫作行款。同一地方的書坊往往沿用一種行款，所以著錄一部書，行款總是要記的，鑑定版本時也常用它來推斷刻書的地點和年代。

版框正中留出窄窄的一行，不刻正文，是為版心。印好的紙沿這一行對折，版心便落在書口上，翻檢時一眼可見。版心裏刻書名、卷次和葉碼，有時還刻上刻工的姓名和這一版的字數，那是當年計算工錢用的。版心上下各有一個形如魚尾的標記，叫作魚尾；魚尾到欄線之間若刻一道黑線，叫作黑口，空著不刻的叫作白口。

大體說來，浙江一帶的官刻和家刻，字體方整，多作白口、左右雙邊；福建建陽的坊刻，字體瘦勁，版式緊湊，常在框外左上角加一個小方格，刻上篇名，稱為書耳，便於讀者翻檢[@huang2005]。坊刻的書要賣得出去，處處替讀者打算，這一點從版式上也看得出來。

書末或目錄之後，常有一塊刻記，寫明何人於何年在何處刊行，有時兼作書坊的廣告，叫作牌記。牌記的形制有長方的，也有鐘形、亞字形的。後人鑑定版本，牌記是最直接的依據，可也最容易被書賈挖改作偽，所以不能單憑牌記下斷語，還要和行款、字體、紙墨、避諱字一起看。

西方學者系統地研究中國的雕版書，是二十世紀的事。Carter的專著第一次把中國印刷術的發明及其西傳完整地介紹給英語讀者[@carter1925]；Twitchett則從書業和讀者的角度，討論中古時期的印刷與出版[@twitchett1983]。兩書所談雖不限於版式，卻都把宋代看作雕版書定型的時代，和中國學者的看法相合。

:::bibliography{title="本章引用書目" scope=chapter}

:::references{format=bibtex}
@book{su1999, author = {宿白}, title = {唐宋時期的雕版印刷}, publisher = {文物出版社}, address = {北京}, year = 1999, langid = {chinese}}
@book{zhang1989, author = {張秀民}, title = {中國印刷史}, publisher = {上海人民出版社}, address = {上海}, year = 1989, langid = {chinese}}
@book{huang2005, author = {黃永年}, title = {古籍版本學}, publisher = {江蘇教育出版社}, address = {南京}, year = 2005, langid = {chinese}}
@book{carter1925, author = {Carter, Thomas Francis}, title = {The invention of printing in China and its spread westward}, publisher = {Columbia University Press}, address = {New York}, year = 1925, langid = {english}}
@book{twitchett1983, author = {Twitchett, Denis}, title = {Printing and publishing in medieval China}, publisher = {Frederic C. Beil}, address = {New York}, year = 1983, langid = {english}}
:::
`; // content.<lang>.md: the same Chinese text in both

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // every face the pages use, loaded before the build (gotcha: fonts-first)
  'Noto Serif SC': ['400', '700'], // SONG: the text, notes, list, imprint; the list's title
  'Noto Sans SC': ['400', '700'], // HEI: the fore-edge heads and folios; 第三章
  'LXGW WenKai TC': ['400'], // KAI: the chapter's title
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
// Each voice loads the files of what it sets; the Song also what the style writes.
const heading = markdown.match(/^# (.*?)(?: \{.*\})?$/m)[1]; // the title, no attributes
const book = markdown.match(/^title: "(.*)"/m)[1]; // 版刻叢談, the head of the even pages
const numerals = '第章一二三四五六七八九十';
await loadFonts(FONTS, markdown);
await loadCjkFonts({ [SONG]: ['400'] }, `${markdown}卷等頁`, { vertical: true });
await loadCjkFonts({ [HEI]: ['400'] }, `${heading}${book}${numerals}`, { vertical: true });
await loadCjkFonts({ [SONG]: ['700'] }, markdown.match(/bibliography\{title="([^"]*)"/)[1],
  { vertical: true });
await loadCjkFonts({ [HEI]: ['700'] }, numerals);
await loadCjkFonts({ [KAI]: ['400'] }, heading);
const doc = await buildWithFonts(() => buildDocument({ markdown }, config()), markdown);
showBook(doc, { title: t({ en: 'Vertical Chinese with citations in inline notes',
  es: 'Chino vertical con citas en notas dentro del renglón' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: cjkPdfProvider }), `${RECIPE}.pdf`);

// ─── 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 v1 ── the same in every recipe · postext.dev/cookbook ────────
// Postext measures text with the faces the browser has loaded, and caches the
// widths, so every face must be ready before the first build. Faces come from
// Fontsource: the same static files the PDF embeds, so screen and PDF agree.

/** faces = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  letters beyond Latin-1 (č, ł, ő…) also load the latin-ext files. With
 *  `optional`, a face Fontsource does not ship is skipped instead of failing.
 *  Resolves to the number of faces added. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = {
    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',
  };
  const subsets = /[Ā-˿Ḁ-ỿ]/.test(text) ? ['latin', 'latin-ext'] : ['latin'];
  const jobs = [];
  let added = 0;
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const meta = optional ? await fontsourceMeta(family) : null;
    for (const spec of new Set(specs)) {
      const weight = parseInt(spec, 10);
      const style = spec.endsWith('i') ? 'italic' : 'normal';
      if (hasFace(family, weight, style)) continue;
      if (optional && !(meta?.weights.includes(weight) && meta.styles.includes(style))) continue;
      for (const subset of subsets) {
        const url = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/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().then((ready) => { document.fonts.add(ready); added++; }, () => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return added;
}

/** Runs `build` (a buildDocument or buildBundle call) and checks the faces
 *  the pages use. A regular face missing from FONTS is loaded with a warning;
 *  bold and italic variants are loaded when the family ships them. Then the
 *  measurement caches are cleared and the build runs again. */
async function buildWithFonts(build, text = '') {
  const tried = new Set();
  for (let round = 0; round < 3; round++) {
    kitStatus('Laying out…');
    await new Promise(requestAnimationFrame);          // let the status paint first
    const result = await Promise.resolve().then(build).catch((error) => { kitFail(error); throw error; });
    const wanted = { base: {}, variants: {} };
    for (const { font, base } of [result].flat().flatMap(fontStringsOf)) {
      const { family, weight, style } = parseFont(font);
      const key = `${family}|${weight}|${style}`;
      if (tried.has(key) || hasFace(family, weight, style)) continue;
      tried.add(key);
      (wanted[base ? 'base' : 'variants'][family] ??= []).push(`${weight}${style === 'italic' ? 'i' : ''}`);
    }
    if (Object.keys(wanted.base).length) {
      console.warn(`[cookbook] FONTS does not list ${JSON.stringify(wanted.base)}: loading them.`);
    }
    const added = await loadFonts(wanted.base, text) + await loadFonts(wanted.variants, text, { optional: true });
    if (added === 0) return result;
    clearMeasurementCache();
  }
  throw new Error('The fonts did not settle after three builds.');
}

/** Every font string of the layout. `base` marks a block's own face; its
 *  bold, italic and bold-italic variants are listed whether or not used. */
function fontStringsOf(doc) {
  const found = new Map();
  const walk = (node) => {
    if (!node || typeof node !== 'object') return;
    if (Array.isArray(node)) { node.forEach(walk); return; }
    for (const [key, value] of Object.entries(node)) {
      if (typeof value === 'string' && /fontString$/i.test(key)) {
        found.set(value, found.get(value) || key === 'fontString');
      } else if (value && typeof value === 'object') walk(value);
    }
  };
  walk(doc.pages);
  walk(doc.blocks);
  return [...found].map(([font, base]) => ({ font, base }));
}

/** '700 37.5px Open Sans' / 'italic 400 13px "Source Serif 4"' → { family, weight, style }.
 *  A string with no weight ('95.8px Young Serif', from a design text) is 400. */
function parseFont(font) {
  const m = /^(?:(italic|oblique)\s+)?(?:small-caps\s+)?(?:(\d+|bold|normal)\s+)?[\d.]+px\s+(.+)$/.exec(font.trim());
  if (!m) throw new Error(`Unexpected font string: ${font}`);
  const weight = m[2] === 'bold' ? 700 : !m[2] || m[2] === 'normal' ? 400 : Number(m[2]);
  return { family: m[3].replace(/^["']|["']$/g, ''), weight, style: m[1] ? 'italic' : 'normal' };
}

/** True when a loaded FontFace covers exactly this family, weight and style
 *  (document.fonts.check() is also true for families nobody declared). */
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;
}

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

/** The weights and styles a family ships ({ weights: [400, 700], styles: ['normal', 'italic'] }), or null. */
function fontsourceMeta(family) {
  fontsourceMeta.cache ??= new Map();
  const id = fontsourceId(family);
  if (!fontsourceMeta.cache.has(id)) {
    fontsourceMeta.cache.set(id, fetch(`https://api.fontsource.org/v1/fonts/${id}`)
      .then((res) => (res.ok ? res.json() : null), () => null));
  }
  return fontsourceMeta.cache.get(id);
}

// ─── Kit · viewer v1 ── the same in every recipe · postext.dev/cookbook ───────
/** Shows the pages as facing spreads on a dark desk: the first page is a
 *  recto on its own, then verso | recto pairs, as in a bound book. Pages
 *  are painted when they scroll near the screen. */
function showPages(docs, { title, width = 460 } = {}) {
  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, { 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 · pdf v1 ── the same in every recipe that exports a PDF ──────────────
/** postext-pdf embeds TrueType bytes. Fetch the Fontsource file the screen
 *  used, snapping to a weight the family ships and falling back to upright
 *  when it has no italic: the PDF asks for every face a block could use. */
async function fontsourceProvider(family, weight, style) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  const weights = meta?.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
  const res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${w}-${s}.woff2`);
  if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} (${res.status})`);
  return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
}

/** A "Build the PDF" button in the bar. Once built: "Open the PDF" (a new
 *  tab, since CodePen's preview frame cannot show PDFs) and a download link. */
function offerPdf(makePdf, filename) {
  viewer();
  const button = Object.assign(document.createElement('button'), { type: 'button', textContent: 'Build the PDF' });
  button.dataset.postextPdf = filename;
  button.addEventListener('click', async () => {
    button.disabled = true;
    button.textContent = 'Building the PDF…';
    try {
      const bytes = await makePdf();
      const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }));
      const size = `${Math.max(1, Math.round(bytes.length / 1024))} KB`;
      button.replaceWith(
        Object.assign(document.createElement('a'), { href: url, target: '_blank', rel: 'noopener', textContent: 'Open the PDF ↗' }),
        Object.assign(document.createElement('a'), { href: url, download: filename, textContent: `Download ${filename} · ${size}` }));
    } catch (error) {
      button.disabled = false;
      button.textContent = 'Build the PDF';
      kitFail(error);
    }
  });
  document.getElementById('pt-actions').append(button);
}

// ─── Kit · cjk v1 ── Chinese, Japanese and Korean books · postext.dev/cookbook ─
// Fontsource ships a CJK family as about a hundred files per weight, each
// declared in its stylesheet with the unicode-range it covers. The screen
// loads the files the sample touches; the PDF gets the same files for the
// characters its pages set in each face, and embeds each as a subset.
// A book bound on the right (vertical text) is shown with its spreads
// mirrored: page 1 alone on the left of the spine, then [3 | 2].

/** The files of a Fontsource face, read from its stylesheet: { url, range,
 *  ranges }, the last declared first (the order the browser tries them in). */
function cjkSlices(family, weight, style) {
  cjkSlices.cache ??= new Map();
  const id = fontsourceId(family);
  const css = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/${weight}${style === 'italic' ? '-italic' : ''}.css`;
  if (!cjkSlices.cache.has(css)) {
    cjkSlices.cache.set(css, fetch(css)
      .then((res) => {
        if (!res.ok) throw new Error(`Fontsource has no ${family} ${weight} ${style} (${res.status})`);
        return res.text();
      })
      .then((text) => [...text.matchAll(/@font-face\s*{([^}]*)}/g)].map(([, rule]) => {
        const range = /unicode-range:\s*([^;]+);/.exec(rule)?.[1].trim() ?? 'U+0-10FFFF';
        const ranges = range.split(',').map((part) => {
          const [lo, hi = lo] = part.trim().slice(2).split('-');
          return [parseInt(lo, 16), parseInt(hi, 16)];
        });
        return { url: new URL(/url\(([^)]+?\.woff2)\)/.exec(rule)[1], css).href, range, ranges };
      }).reverse()));
  }
  return cjkSlices.cache.get(css);
}

/** The file of `slices` that holds code point `cp`, if any. */
function cjkSliceFor(slices, cp) {
  return slices.find((slice) => slice.ranges.some(([lo, hi]) => cp >= lo && cp <= hi));
}

/** Whether Fontsource serves `family` as a Chinese, Japanese or Korean
 *  family (its subsets name the script). Fails when the API does not
 *  answer: a CJK face taken for a Latin one would paint in a system face. */
async function isCjkFamily(family) {
  const meta = await fontsourceMeta(family);
  if (!meta) throw new Error(`api.fontsource.org did not describe ${family}: reload to try again`);
  return !!meta.subsets?.some((subset) => /^(chinese|japanese|korean)/.test(subset));
}

/** faces = { 'Noto Serif TC': ['400', '700'] }, as for loadFonts: the
 *  whole FONTS object may be passed, its other families are left to
 *  loadFonts. Adds one FontFace per file of each CJK face with its
 *  unicodeRange, then loads the files `text` touches. `text` is what the
 *  faces set: the sample for the text face; a book in several voices calls
 *  it once per voice (loadCjkFonts({ 'LXGW WenKai TC': ['400'] }, quotes)),
 *  so the heading and quotation faces fetch and check only their own
 *  characters. Fails when a character of `text` is in no file of a face.
 *  List every weight the pages use: a weight left to buildWithFonts gets
 *  the latin file only. With { vertical: true } it also loads each
 *  family's vertical forms (brackets, quotes, pause marks) for the canvas,
 *  which needs loadVerticalAlternates imported from postext. Resolves to
 *  the number of files loaded. */
async function loadCjkFonts(faces, text, { vertical = false } = {}) {
  kitStatus('Loading fonts…');
  let loaded = 0;
  try {
    if (vertical && typeof loadVerticalAlternates !== 'function') {
      throw new Error('loadCjkFonts(…, { vertical: true }) needs loadVerticalAlternates imported from postext');
    }
    for (const [family, specs] of Object.entries(faces)) {
      if (!(await isCjkFamily(family))) continue;
      const twin = [];
      for (const spec of new Set(specs)) {
        const weight = parseInt(spec, 10);
        const style = spec.endsWith('i') ? 'italic' : 'normal';
        const slices = await cjkSlices(family, weight, style);
        const missing = [...new Set(text)].filter((ch) => /\S/.test(ch) && !cjkSliceFor(slices, ch.codePointAt(0)));
        if (missing.length) {
          throw new Error(`${family} ${spec} has no file for ${missing.slice(0, 12).join(' ')}: `
            + `give each face the text it sets (loadCjkFonts({ '${family}': ['${spec}'] }, text))`);
        }
        for (const slice of slices) {
          document.fonts.add(new FontFace(family, `url(${slice.url}) format('woff2')`,
            { weight: String(weight), style, unicodeRange: slice.range }));
          twin.push({ source: slice.url, weight: String(weight), style, unicodeRange: slice.range });
        }
        const font = `${style === 'italic' ? 'italic ' : ''}${weight} 16px "${family}"`;
        loaded += (await document.fonts.load(font, text)).length;
        if (!document.fonts.check(font, text)) throw new Error(`${family} ${spec} did not load for the sample`);
      }
      // The same files under a twin name with the `vert` feature on: the
      // canvas paints the punctuation of vertical lines with it.
      if (vertical && twin.length) await loadVerticalAlternates(family, twin);
    }
  } catch (error) {
    kitFail(error);
    throw error;
  }
  return loaded;
}

/** The PDF font provider for recipes with CJK faces: a family whose
 *  Fontsource subsets are Chinese, Japanese or Korean gets the files that
 *  hold the characters its pages set (`request.codePoints`); any other
 *  family goes to fontsourceProvider (the "pdf" block). */
async function cjkPdfProvider(family, weight, style, request) {
  if (!(await isCjkFamily(family))) return fontsourceProvider(family, weight, style);
  const meta = await fontsourceMeta(family);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const slices = await cjkSlices(family, w, s);
  const picked = new Set();
  for (const cp of request?.codePoints ?? []) {
    const slice = cjkSliceFor(slices, cp);
    if (slice) picked.add(slice);
  }
  if (!picked.size) picked.add(slices[0]);
  return Promise.all(slices.filter((slice) => picked.has(slice)).map(async (slice) => {
    const res = await fetch(slice.url);
    if (!res.ok) throw new Error(`Fontsource file ${slice.url} (${res.status})`);
    return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
  }));
}

/** showPages for a book bound on either edge. A right-bound book (the
 *  document says so: doc.binding is 'right' for page.binding 'right' and
 *  for vertical text) lies on the desk as it opens: page 1 alone on the
 *  left of the spine, then [3 | 2], the spine shade on each page's inner
 *  edge. `binding` ('left' | 'right') overrides the document's. */
function showBook(docs, { binding, ...options } = {}) {
  const count = showPages(docs, options);
  const right = (binding ?? [docs].flat()[0]?.binding) === 'right';
  if (!document.getElementById('pt-kit-cjk')) {
    // The pages keep direction ltr: a canvas draws text in the direction its
    // element inherits, and under rtl each run would end where the engine
    // starts it, its brackets mirrored.
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit-cjk">
      .pt-spread[dir="rtl"] canvas { direction: ltr; }
      .pt-spread[dir="rtl"] 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); }
    </style>`);
  }
  // Each pair stays [verso, recto] in the page; right to left, the verso
  // sits on the right. Phones stack the pages in reading order either way.
  for (const spread of document.querySelectorAll('#pages > .pt-spread')) spread.dir = right ? 'rtl' : 'ltr';
  document.getElementById('pages').dataset.binding = right ? 'right' : 'left';
  return count;
}

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

## Variantes

### Corchetes alrededor de cada nota

Algunas ediciones cierran el 夾注 entre corchetes al cuerpo del texto. `cjk.warichu` los pone en todas las notas, también en las de las citas.

```diff
-  warichu: { fontSize: em(0.5), color: col('ink') }, // no brackets: the half size sets it off
+  warichu: { fontSize: em(0.5), color: col('ink'), open: '〔', close: '〕' },
```

### Números en la columna en vez de notas

El estilo numérico de la GB/T 7714 con corchetes de esquina imprime 〔1〕 derecho en la columna, y la lista no cambia.

```diff
-  style: 'china-national-standard-gb-t-7714-2015-note',
-  notes: 'warichu', // 夾注; 'footnote' sets the same notes at the foot of the page
+  style: 'china-national-standard-gb-t-7714-2015-numeric',
+  marker: 'corner', // 〔1〕, upright in vertical text
```

## Errores frecuentes

- **Etiqueta el documento zh-Hans o zh-Hant, no con LANG.** Las ediciones de una receta son en y es, pero una muestra china es china en las dos: `locale: LANG` la etiquetaría como inglés o español, separaría sus palabras latinas, llamaría Figure o Figura a sus figuras y daría al PDF un idioma equivocado. Escribe tú la etiqueta: 'zh-Hans' (convenciones de la China continental: corte GB, puntuación Kaiming) o 'zh-Hant' (Taiwán: puntuación de ancho completo centrada); 'zh-HK' para Hong Kong. Un 'zh' a secas se lee como chino simplificado continental.
- **Las fuentes chinas se cargan por fragmentos, con el bloque cjk.** Fontsource sirve una familia china, japonesa o coreana en un centenar de archivos por peso, cada uno con un intervalo de caracteres. loadFonts solo descarga el archivo latin, así que en pantalla los caracteres chinos salen de una fuente del sistema y se miden mal, y fontsourceProvider entrega al PDF ese archivo latin, que los imprime como cajas vacías. Añade el bloque cjk del kit, llama a loadCjkFonts(FONTS, markdown) después de loadFonts (una vez por voz, con el texto que compone, si el libro usa varias fuentes chinas) y pasa a renderToPdf fontProvider: cjkPdfProvider: ambos toman los archivos que contienen los caracteres del texto.
- **Compón la puntuación de cada región con una fuente de esa región.** Los anchos de la puntuación mueven el blanco de cada signo al lado donde lo pone la región del documento, no al lado donde lo dibuja la fuente: con zh-Hans, una coma Kaiming conserva la mitad izquierda de su caja, donde una fuente simplificada dibuja el signo, y cede la derecha. Una fuente tradicional centra ，。 en la caja, así que la mitad que se va se lleva parte del signo y la coma se pega al carácter siguiente. LXGW WenKai TC, la única Kai de texto de Fontsource, lo hace en texto simplificado. Compón el texto, las notas y las citas continentales en Noto Serif SC o Noto Sans SC, deja las fuentes TC para zh-Hant y usa una letra de pincel simplificada (Ma Shan Zheng) solo en líneas de exhibición, donde el texto de diseño no aplica anchos de puntuación. Además dibuja formas heredadas que no imprime ni el estándar continental ni el de Taiwán, 為 con el 爫 de 爲 y 令 (en 冷, 領) con el pie de 卩: revisa los caracteres que compone en cada página.
- **Un libro encuadernado por la derecha muestra sus pliegos con showBook.** En un libro encuadernado por la derecha (chino vertical, o page.binding 'right') la página 1 sigue siendo impar, pero queda a la izquierda del lomo, y los pliegos se leen [3 | 2]. showPages compone todos los libros como si se encuadernaran por la izquierda; showBook, del bloque cjk, lee doc.binding y refleja los pliegos. capture.hero sigue nombrando un pliego en orden de lectura, [par, impar]: [2, 3].
- **En una retícula de caracteres, desactiva el equilibrado de columnas.** El equilibrado de columnas llena una página que acaba corta (un título que se queda con su texto deja líneas en blanco al pie) añadiendo líneas de la retícula encima de los títulos y componiendo un párrafo una línea más holgado. Una línea china más holgada separa sus caracteres (0,13 em en una página GB/T 9704, muy por encima de balancing.maxTracking), así que los caracteres se salen de las columnas de la retícula y los títulos de sus líneas. Una página contada en casillas acaba corta: pon headings.balancing: { enabled: false }.
- **Cualquier objeto headings desactiva el salto de página del H1.** Por defecto un H1 salta a una página impar (always-odd), pero cualquier objeto headings anula ese valor, así que los capítulos van seguidos y span: 'page' no hace nada. Vuelve a declarar headings.levels[0].breakBefore: { enabled: true, parity } en cada configuración.
- **Entrecomilla cada valor del frontmatter.** YAML lee title: 1984 como un número y una fecha como un objeto Date, y los valores que no son cadenas se imprimen vacíos en los marcadores y dejan el PDF sin título. Entrecomilla cada valor: title: "1984".
- **Carga todas las fuentes antes de componer.** La composición mide el texto con las fuentes que el navegador ha cargado y guarda los anchos, así que una fuente que llega después de la primera composición deja cortes de línea erróneos y un PDF que ya no coincide con la pantalla. Carga antes todos los pesos y estilos, y llama a clearMeasurementCache() antes de recomponer si alguna llega tarde.

- Un estilo de notas abrevia la segunda cita de una obra, y el de la GB/T 7714 la reduce a 同1, «como en la nota 1». Un warichu no tiene número, así que el lector no encuentra la nota 1. Este capítulo cita cada obra una vez; un texto que vuelva a citar una obra debe escribir la segunda cita a mano o usar el estilo numérico de la segunda variante.
- El estilo escribe puntuación occidental en las entradas chinas, `宿白. 唐宋時期的雕版印刷[M]. 北京: 文物出版社, 1999.`, como las imprime la norma. En una columna vertical esos signos conservan su forma occidental: se giran y ocupan menos de una casilla, a diferencia del 。 y la ， del texto.
- Una fila de warichu va a medio cuerpo: con un texto de 10,5 pt, cada fila mide 5,25 pt, la letra más pequeña de la página. Compón el texto a 五號 o mayor, o sube `cjk.warichu.fontSize`; las dos filas comparten siempre el ancho de una columna.

## Créditos

- Receta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Tipografías: Noto Serif SC (OFL-1.1), Noto Sans SC (OFL-1.1), LXGW WenKai TC (OFL-1.1)
- Código: MIT · Contenido de ejemplo: CC-BY-4.0

## Relacionadas

- [N.º 075 · Una novela china vertical, encuadernada por la derecha](https://postext.dev/es/cookbook/vertical-novel-right-bound.md): El capítulo 1 de 三國演義 en una página 25開 de Taiwán: 40 caracteres por 16 columnas, un 回目 entre filetes, cabeceras en el corte y folios chinos. · Nivel 3 (Avanzado) · Narrativa, teatro y prosa literaria
- [N.º 071 · Notas al pie de la columna que las cita](https://postext.dev/es/cookbook/novel-footnotes-column-foot.md): Las llamadas [^id] pasan a notas numeradas al pie de la columna que las cita, con interruptores para una columna, notas finales y numeración continua. · Nivel 2 (Intermedio) · Narrativa, teatro y prosa literaria
- [N.º 089 · Un ensayo de historia con notas de Chicago](https://postext.dev/es/cookbook/history-essay-chicago-notes.md): Un ensayo de historia de cuatro páginas cuyas citas [@clave, 87] salen como notas de Chicago al pie: completas la primera vez, breves después. · Nivel 2 (Intermedio) · Artículos y trabajos académicos