# Date e sigle diritte nel testo verticale

> Due documenti fondativi del 1912 in verticale, rilegati a destra: i numeri di due cifre stanno diritti in una cella da soli, :tcy e :upright segnano il resto.

- Versione HTML: https://postext.dev/it/cookbook/chinese-dates-upright
- Ricetta Nº 081 · Pagina e griglia · Livello 2 (Intermedio) · Output: Canvas, PDF
- Generi: Libri di testo, Fogli singoli ed effimeri
- Richiede postext ≥ 1.25.0, postext-pdf ≥ 1.25.0 · provata con 1.31.0, postext-pdf 1.31.0 il 2026-10-13
- Pagine: [一](https://postext.dev/cookbook/chinese-dates-upright/en/p01.webp?v=3fe1e1cd), [二](https://postext.dev/cookbook/chinese-dates-upright/en/p02.webp?v=3fe1e1cd), [三](https://postext.dev/cookbook/chinese-dates-upright/en/p03.webp?v=3fe1e1cd), [四](https://postext.dev/cookbook/chinese-dates-upright/en/p04.webp?v=3fe1e1cd), [五](https://postext.dev/cookbook/chinese-dates-upright/en/p05.webp?v=3fe1e1cd), [六](https://postext.dev/cookbook/chinese-dates-upright/en/p06.webp?v=3fe1e1cd), [七](https://postext.dev/cookbook/chinese-dates-upright/en/p07.webp?v=3fe1e1cd)
- PDF: https://postext.dev/cookbook/chinese-dates-upright/en/chinese-dates-upright.pdf?v=3fe1e1cd
- Apri nella Sandbox: https://postext.dev/it/sandbox#recipe=chinese-dates-upright&lang=en (.postext: https://postext.dev/cookbook/chinese-dates-upright/en/chinese-dates-upright.postext)
- Ultimo aggiornamento: 2026-10-10
- Altre lingue: [en](https://postext.dev/en/cookbook/chinese-dates-upright.md), [es](https://postext.dev/es/cookbook/chinese-dates-upright.md), [ca](https://postext.dev/ca/cookbook/chinese-dates-upright.md), [de](https://postext.dev/de/cookbook/chinese-dates-upright.md), [fr](https://postext.dev/fr/cookbook/chinese-dates-upright.md), [pt](https://postext.dev/pt/cookbook/chinese-dates-upright.md), [zh](https://postext.dev/zh/cookbook/chinese-dates-upright.md), [ja](https://postext.dev/ja/cookbook/chinese-dates-upright.md), [ar](https://postext.dev/ar/cookbook/chinese-dates-upright.md)

## In breve

Due documenti cinesi del 1912, stampati in colonne dall’alto in basso. Mostra come comporre date, numeri e lettere latine perché si leggano bene dentro il testo verticale.

## Che cosa comporrai

Una raccolta di sette pagine con due testi fondativi della Repubblica di Cina: il proclama di Sun Wen al suo insediamento, il 1º gennaio 1912, e i primi due capitoli della Costituzione provvisoria dell’11 marzo. Le pagine sono composte in verticale su un formato di 184 × 260 mm rilegato a destra. I documenti mantengono i propri numerali cinesi, 民國元年三月十一日. Le note introduttive e le note, in un carattere Kai, danno date del calendario occidentale, quantità e numeri di protocollo in cifre arabe, e sono queste cifre che la ricetta compone: 10月10日 sta diritto con un numero per cella, 1912 e Sun Yat-sen sono ruotati di lato, 民國115年 fa entrare tre cifre in una cella e ROC impila le sue lettere. Una copertina vermiglia dentro un doppio filetto, una fascia vermiglia dove si apre ogni documento e testatine al taglio esterno con i folii in numerali cinesi incorniciano il testo.

**Questa ricetta risponde a:**

- Come tengo diritte le date nel cinese verticale, e che cosa succede a sigle e parole latine?
- Come compongo un libro cinese in verticale, rilegato a destra?
- Come imposto la gabbia in caratteri, con tanti caratteri per riga e tante righe per pagina?

## La risposta breve

```js
// script.js, righe 41–50
const layout = { layoutType: 'single', writingMode: 'vertical-rl' }; // binding 'auto': right
const cjk = {
  // 10月10日: each number of up to two digits stands upright in one cell (tate-chu-yoko);
  // 1912 and Sun Yat-sen stay on their side, as clreq sets long numbers and Latin words.
  uprightDigits: 2,
  // The type area in characters: 44 down each line, 19 lines to the page.
  grid: { enabled: true, charsPerLine: CHARS, linesPerPage: 19 },
};
// By hand, in the Markdown: 民國:tcy[115]年 puts three digits in one cell, :upright[ROC]
// stands each letter of an acronym upright, :sideways[…] turns any run with the line.
```

## Ingredienti

**Insegna**

- [Numeri diritti nel testo verticale](https://postext.dev/it/docs/configuration-east-asian.md#numeri-nel-testo-verticale): Nel testo verticale un numero fino a cjk.uprightDigits cifre (due per impostazione predefinita) sta diritto in una sola cella, tate-chu-yoko; :tcy[…] mette qualsiasi breve sequenza in una cella, :upright[…] mette diritta ogni lettera di una sigla e :sideways[…] ruota una sequenza con la riga.
- [Testo verticale](https://postext.dev/it/docs/configuration-page-layout.md#scrittura-verticale): Cinese e giapponese composti dall’alto in basso in righe lette da destra (layout.writingMode 'vertical-rl'), con le colonne come fasce, figure e tabelle in piedi e la punteggiatura nelle sue forme verticali.

**Usa anche**

- [Libri rilegati a destra](https://postext.dev/it/docs/configuration-page-layout.md#rilegatura)
- [Griglia dei caratteri](https://postext.dev/it/docs/configuration-east-asian.md#griglia-di-caratteri)
- [Numeri cinesi](https://postext.dev/it/docs/configuration-page-layout.md#numerazione)
- [Font cinesi, giapponesi e coreani](https://postext.dev/it/docs/configuration-programmatic-usage.md#font-cinesi-giapponesi-e-coreani)
- [Larghezze della punteggiatura cinese](https://postext.dev/it/docs/configuration-east-asian.md#larghezza-della-punteggiatura)
- [Divisione in righe del cinese](https://postext.dev/it/docs/configuration-east-asian.md#tipografia-dellasia-orientale)
- [Aperture progettate](https://postext.dev/it/docs/configuration-text.md#estensione-e-progetto-grafico-avanzato)
- [Stili di titolo](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)
- [Attributi dei titoli](https://postext.dev/it/docs/document-format.md#attributi-dei-titoli)
- [Stili di paragrafo](https://postext.dev/it/docs/configuration-styles.md#stili-di-paragrafo)
- [Testatine e folio](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina)
- [Testo, filetti e riquadri nei progetti di pagina](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina)
- [Colore della carta](https://postext.dev/it/docs/configuration-page-layout.md#pagina)
- [Tavolozza di colori semantica](https://postext.dev/it/docs/configuration-fonts-colors-viewers.md#tavolozza-dei-colori)
- [Esportazione in PDF](https://postext.dev/it/docs/configuration-programmatic-usage.md#generare-pdf)
- [Font incorporati nel PDF](https://postext.dev/it/docs/configuration-programmatic-usage.md#perché-un-provider-di-font)
- [Bibliografie e glossari](https://postext.dev/it/docs/configuration-styles.md#stili-di-paragrafo)
- [Testatine secondo il ruolo della pagina](https://postext.dev/it/docs/configuration-page-layout.md#elementi-di-testo)
- [Pagine preliminari in numeri romani](https://postext.dev/it/docs/document-format.md#numbering)
- [Testatine per sezione](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)
- [Capitoli non numerati](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)

**La configurazione in breve**

- [`bodyText`](https://postext.dev/it/docs/configuration-text.md#testo-corrente), [`cjk`](https://postext.dev/it/docs/configuration-east-asian.md#tipografia-dellasia-orientale), [`colorPalette`](https://postext.dev/it/docs/configuration-fonts-colors-viewers.md#tavolozza-dei-colori), [`footer`](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina), [`header`](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina), [`headingStyles`](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli), [`headings`](https://postext.dev/it/docs/configuration-text.md#titoli), [`layout`](https://postext.dev/it/docs/configuration-page-layout.md#impaginazione), [`locale`](https://postext.dev/it/docs/configuration-text.md#sillabazione), [`page`](https://postext.dev/it/docs/configuration-page-layout.md#pagina), [`paragraphStyles`](https://postext.dev/it/docs/configuration-styles.md#stili-di-paragrafo)

**API**

- [`buildDocument`](https://postext.dev/it/docs/configuration-programmatic-usage.md#costruire-un-documento), [`decompressWoff2`](https://postext.dev/it/docs/configuration-programmatic-usage.md#provider-di-font-per-il-browser-fontsource--woff2), `loadVerticalAlternates`, [`renderPageToCanvas`](https://postext.dev/it/docs/configuration-programmatic-usage.md#rendere-una-pagina-come-bitmap), [`renderToPdf`](https://postext.dev/it/docs/configuration-programmatic-usage.md#generare-pdf), [`withLoadedFonts`](https://postext.dev/it/docs/configuration-programmatic-usage.md#caricare-i-font-prima-dellimpaginazione)

**Caratteri**

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

## Preparazione

### 1 · Lascia all’impostazione i numeri brevi

Il codice è nella [risposta breve](https://postext.dev/it/cookbook/chinese-dates-upright.md#la-risposta-breve) qui sopra. Con `cjk.uprightDigits: 2` ogni sequenza di una o due cifre nel testo verticale sta diritta in una cella di un em, con le due cifre affiancate: 10月10日, 第35號 e 7章56條 non hanno bisogno di marcatura. Un numero più lungo si compone intero di lato, come una parola latina, che è il modo in cui clreq compone i numeri di quattro cifre, così 1912 e 1644 si leggono lungo la riga ruotati di un quarto di giro. Un numero di tre cifre che deve stare diritto vuole un segno: `民國:tcy[115]年` stringe 115 nell’em. `:upright[ROC]` mette ogni lettera diritta in una cella propria, una sotto l’altra, e la riga non va mai a capo al suo interno ([numeri nel testo verticale](https://postext.dev/it/docs/configuration-east-asian.md#numeri-nel-testo-verticale)).

![Page 四: 注釋.](https://postext.dev/cookbook/chinese-dates-upright/en/p04.webp?v=3fe1e1cd)

*Pagina 4, le note: 10月10日 e 2月12日 diritti, 1911 e Sun Yat-sen di lato, 268 e 115 stretti da :tcy, ROC impilato da :upright.*

I testi del 1912 restano come furono stampati. Le note del curatore seguono le regole di Taiwan per i numeri, i 公文書橫式書寫數字使用原則 dello Yuan esecutivo del 2004: date, numeri di serie e quantità prendono le cifre arabe (1912年3月8日, 第35號, 7章56條), mentre nomi propri, locuzioni fisse e cifre tonde mantengono i numerali cinesi (東三省, 四萬萬, 四億), come pure la data lunare, 辛亥年八月十九日. Dove una nota cita un titolo o un termine dei documenti ne conserva la forma, 第一章 e 二十二行省. Quelle regole furono scritte per documenti orizzontali; in verticale, le loro cifre sono proprio quelle che la ricetta deve tenere diritte.

### 2 · Apri ogni documento con una fascia a destra

```js
// script.js, righe 54–78
// The margins are minimums: the grid centres the 44 characters (186.3 mm) between them,
// so the type area starts HEAD mm down the sheet. The band's title starts there too.
const HEAD = MARGIN.top + (TRIM.h - MARGIN.top - MARGIN.bottom - LINE) / 2;
const BAND = 42; // mm from the right trim edge: where a reader of vertical text starts
const onBand = { color: col('paper'), overflow: 'wrap' };
// In the flow of a vertical page x runs down the sheet and y leftward from its right edge.
const at = (x, y, extra = {}) => ({ anchor: { to: 'page', edge: 'top-left' },
  offset: { x: mm(x), y: mm(y) }, ...extra });
const opener = {
  enabled: true,
  minHeight: mm(BAND - 15), // past the side margin (21.6 mm), 6 mm of paper before the text
  slot: { elements: [
    { kind: 'box', id: 'band', style: { backgroundColor: col('seal') },
      placement: { anchor: { to: 'bleed', edge: 'top-left' }, size: { height: mm(BAND) } } },
    { kind: 'text', id: 'title', content: '{titleText}', ...onBand, fontFamily: HEI,
      fontWeight: 700, fontSize: pt(34), lineHeight: 1.2, letterSpacing: pt(4), align: 'left',
      placement: at(HEAD, 8) },
    { kind: 'text', id: 'latin', content: '{attr.latin}', ...onBand, fontFamily: HEI,
      fontSize: pt(9), lineHeight: 1.6, align: 'left', placement: at(HEAD, 25) },
    // The date ends where the lines of text end: align 'right' is the foot of a vertical line.
    { kind: 'text', id: 'date', content: '{attr.date}', ...onBand, fontFamily: HEI,
      fontWeight: 500, fontSize: pt(13), lineHeight: 1.2, align: 'right',
      placement: at(HEAD, 24, { size: { width: mm(LINE) } }) },
  ] },
};
```

In un flusso verticale la testa della pagina è il bordo destro del foglio, dove comincia la lettura. Un titolo grafico ancorato alla testa dell’abbondanza è quindi una fascia lungo il bordo destro, e il suo `size.height` è la sua larghezza sul foglio. Gli scostamenti ruotano con il flusso: `x` misura verso il basso del foglio, `y` verso sinistra. La griglia centra la gabbia tra i margini, e `HEAD` ripete quella somma, così il titolo comincia alla pari con il primo carattere di ogni riga. `align: 'right'` mette la data al piede della sua riga, dove finiscono le righe di testo, e `cjk.uprightDigits` arriva anche al testo del titolo grafico: l’11 di 3月11日 sta in una sola cella, come nel corpo del testo. La fascia è quella di [Apertura di capitolo su una fascia al vivo](https://postext.dev/it/cookbook/chapter-opener-bleed-band.md), ruotata di un quarto di giro.

Un titolo grafico non ha parità, quindi la fascia scende sempre lungo il bordo destro del foglio. A pagina 2, una pagina di destra, quel bordo è il taglio esterno; a pagina 5, una pagina di sinistra di un libro rilegato a destra, è il dorso, e il titolo comincia a 8 mm dalla piega, dentro il margine interno di 21,6 mm. Una raccolta spillata si apre abbastanza in piano per permetterlo. Per un libro cucito o incollato, apri ogni documento su una pagina di destra con `breakBefore.parity: 'even'`, che lascia bianca la pagina 5.

![Opening page 二: 臨時大總統宣言書.](https://postext.dev/cookbook/chinese-dates-upright/en/p02.webp?v=3fe1e1cd)

*Pagina 2: il titolo dalla testa della gabbia, la data al piede della fascia, il 10 di 晚上10時 e il 29 di 同月29日 diritti nella nota introduttiva.*

### 3 · Metti le testatine sul taglio esterno

```js
// script.js, righe 82–90
const foreEdge = (id, content, edge, y) => ({
  kind: 'text', id, content, writingMode: 'vertical-rl', pages: 'body', align: 'left',
  fontFamily: HEI, fontSize: pt(9.6), color: col('muted'), overflow: 'clip',
  placement: { anchor: { to: 'outer', edge }, offset: { y: em(y) } },
});
const header = { elements: [
  foreEdge('head', '{chapterTitle}', 'top', 4), // four characters below the type area
  foreEdge('folio', '{pageNumber}', 'bottom', -5), // ends five characters above its foot
] };
```

`anchor.to: 'outer'` è il margine lontano dal dorso, quindi in un libro rilegato a destra le testatine scendono lungo il bordo sinistro di un recto e il bordo destro di un verso. Il titolo sta quattro caratteri sotto la testa della gabbia e il folio finisce cinque sopra il suo piede, entrambi composti in verticale all’80 % del corpo del testo ([elementi di testo verticali](https://postext.dev/it/docs/configuration-page-layout.md#elementi-di-testo-verticale)). `pageNumbering.format: 'trad-chinese-informal'` stampa i folii 三, 四, 六 e 七, e `pages: 'body'` li tiene fuori dalle due aperture.

### 4 · Porta al vivo la copertina con un titolo grafico a tutta pagina

```js
// script.js, righe 94–119
const frame = (id, inset, width) => ({ kind: 'box', id,
  style: { borderColor: col('tint'), borderWidth: pt(width) },
  placement: at(inset, inset, { size: { width: mm(TRIM.h - 2 * inset),
    height: mm(TRIM.w - 2 * inset) } }) });
const coverLine = (id, content, y, align) => ({ kind: 'text', id, content, ...onBand,
  fontFamily: HEI, fontWeight: 500, fontSize: pt(18), lineHeight: 1.2, align,
  placement: at(HEAD, y, { size: { width: mm(LINE) } }) });
const cover = {
  id: 'cover', numbered: false, toc: false, runningChapter: false,
  span: 'page', // a page-wide design is not cut at the foot of the column: the field bleeds
  header: { elements: [] }, footer: { elements: [] },
  advancedDesign: { enabled: true, slot: { elements: [
    { kind: 'box', id: 'field', style: { backgroundColor: col('seal') },
      placement: { anchor: { to: 'bleed', edge: 'top-left' }, size: { height: mm(TRIM.w) } } },
    frame('rule-outer', 11, 1.6), frame('rule-inner', 13, 0.5), // 文武線: thick, then thin
    { kind: 'text', id: 'title', content: '{titleText}', ...onBand, fontFamily: HEI,
      fontWeight: 700, fontSize: pt(56), lineHeight: 1.1, letterSpacing: pt(5.6), align: 'left',
      placement: at(HEAD, 26) },
    { kind: 'text', id: 'latin', content: '{attr.latin}', ...onBand, fontFamily: HEI,
      fontSize: pt(11), lineHeight: 1.4, align: 'left', placement: at(HEAD, 51) },
    coverLine('first', '臨時大總統宣言書', 104, 'left'),
    coverLine('first-date', '1912年1月1日', 104, 'right'),
    coverLine('second', '中華民國臨時約法', 118, 'left'),
    coverLine('second-date', '1912年3月11日', 118, 'right'),
  ] } },
};
```

Un titolo grafico in una colonna viene tagliato al piede della colonna, e su una pagina verticale quel piede è il margine sinistro: un campo ancorato all’abbondanza si fermava 21,6 mm prima del bordo di rifilo sinistro. Con `span: 'page'` il titolo viene impaginato come fascia di pagina, che non si taglia, e il campo raggiunge entrambi i bordi. Le due cornici disegnano il doppio filetto spesso e sottile dei libri stampati cinesi, 1,6 pt e 0,5 pt, a 2 mm l’uno dall’altro.

### 5 · Carica ogni voce con il testo che compone

```js
// script.js, righe 317–322
const voice = (styles) => (markdown.match(
  new RegExp(`:::paragraphs\\{style="(?:${styles})"\\}[\\s\\S]*?:::`, 'g')) ?? []).join('');
const kaiText = voice('headnote|note');
// Hei: headings and their attributes, seals, colophon, the cover's lines, folios 一 to 十.
const heiText = (markdown.match(/^#.*$/gm) ?? []).join('') + voice('seal|colophon')
  + '臨時大總統宣言書1912年1月1日中華民國臨時約法1912年3月11日一二三四五六七八九十';
```

Fontsource serve ogni peso di questi caratteri come un centinaio di file, ciascuno per un intervallo di caratteri, e `loadCjkFonts` carica i file che un testo tocca. Con i soli titoli, annotazioni del sigillo, colophon, righe di copertina e folii, ogni peso di Noto Sans TC carica 10 file; con l’intero esempio ne caricherebbe 35, e i pesi sono tre. LXGW WenKai TC riceve le note introduttive e le note e carica 16 file. Un carattere che riceve troppo poco testo fa fallire la cattura (C12) e nomina i caratteri che ha dovuto prendere in prestito da un carattere di riserva.

## La ricetta completa

Un unico file, composto a partire dalla cartella della ricetta con il testo di esempio e il kit comune del Ricettario già inclusi; costruisce la propria pagina. Per eseguirlo, mettilo in uno `<script type="module">` di una pagina vuota, oppure incollalo nel pannello JS di un nuovo pen di CodePen (come modulo). Importa postext da esm.sh: non c’è niente da installare né da compilare.

- Cartella della ricetta: https://github.com/drnachio/postext/tree/main/cookbook/chinese-dates-upright

### script.js

```js
// ═══ Postext Cookbook · Nº 081 · Dates and acronyms upright in vertical text ═══════
// https://postext.dev/en/cookbook/chinese-dates-upright
// Code: MIT · Text: 1912 documents, zh.wikisource (CC BY-SA 4.0); notes (CC BY 4.0)
// Fonts: Noto Serif TC, Noto Sans TC, LXGW WenKai TC (SIL OFL 1.1) · Needs postext ≥ 1.25.0
// Two founding documents of the Republic of China, 1912, set vertically as a reader.
import {
  buildDocument, withLoadedFonts, renderPageToCanvas, loadVerticalAlternates,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'chinese-dates-upright';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: ink, the vermilion of a seal, and the paper of a gazette
const palette = {
  ink: '#1e1a17', // text: a warm near-black
  seal: '#b1291f', // the one accent: the bands, the seal notes, the chapter heads
  tint: '#f6dccf', // the cover's double rule, a pale vermilion
  muted: '#6d645b', // fore-edge heads, the colophon
  paper: '#fffdf8',
};
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: 'seal (defaults)', value: { hex: palette.seal, model: 'hex' } },
];
// #endregion

const SONG = 'Noto Serif TC'; // 宋/明: the documents
const HEI = 'Noto Sans TC'; // 黑: titles, heads, labels
const KAI = 'LXGW WenKai TC'; // 楷: the editor's headnotes and notes
const BODY = 12; // pt, 小四
const LEAD = 21; // pt: a line gap of 0.75 em
const CHARS = 44; // characters to a line
const LINE = (CHARS * BODY * 25.4) / 72; // mm: the length of a line, 186.3
const TRIM = { w: 184, h: 260 }; // mm, 16开
const MARGIN = { top: 30, bottom: 22, side: 20 }; // mm, minimums: 天头 deeper than 地脚

// #region answer: vertical text where numbers of one or two digits stand upright
const layout = { layoutType: 'single', writingMode: 'vertical-rl' }; // binding 'auto': right
const cjk = {
  // 10月10日: each number of up to two digits stands upright in one cell (tate-chu-yoko);
  // 1912 and Sun Yat-sen stay on their side, as clreq sets long numbers and Latin words.
  uprightDigits: 2,
  // The type area in characters: 44 down each line, 19 lines to the page.
  grid: { enabled: true, charsPerLine: CHARS, linesPerPage: 19 },
};
// By hand, in the Markdown: 民國:tcy[115]年 puts three digits in one cell, :upright[ROC]
// stands each letter of an acronym upright, :sideways[…] turns any run with the line.
// #endregion

// #region opener: a vermilion band down the right edge, where each document begins
// The margins are minimums: the grid centres the 44 characters (186.3 mm) between them,
// so the type area starts HEAD mm down the sheet. The band's title starts there too.
const HEAD = MARGIN.top + (TRIM.h - MARGIN.top - MARGIN.bottom - LINE) / 2;
const BAND = 42; // mm from the right trim edge: where a reader of vertical text starts
const onBand = { color: col('paper'), overflow: 'wrap' };
// In the flow of a vertical page x runs down the sheet and y leftward from its right edge.
const at = (x, y, extra = {}) => ({ anchor: { to: 'page', edge: 'top-left' },
  offset: { x: mm(x), y: mm(y) }, ...extra });
const opener = {
  enabled: true,
  minHeight: mm(BAND - 15), // past the side margin (21.6 mm), 6 mm of paper before the text
  slot: { elements: [
    { kind: 'box', id: 'band', style: { backgroundColor: col('seal') },
      placement: { anchor: { to: 'bleed', edge: 'top-left' }, size: { height: mm(BAND) } } },
    { kind: 'text', id: 'title', content: '{titleText}', ...onBand, fontFamily: HEI,
      fontWeight: 700, fontSize: pt(34), lineHeight: 1.2, letterSpacing: pt(4), align: 'left',
      placement: at(HEAD, 8) },
    { kind: 'text', id: 'latin', content: '{attr.latin}', ...onBand, fontFamily: HEI,
      fontSize: pt(9), lineHeight: 1.6, align: 'left', placement: at(HEAD, 25) },
    // The date ends where the lines of text end: align 'right' is the foot of a vertical line.
    { kind: 'text', id: 'date', content: '{attr.date}', ...onBand, fontFamily: HEI,
      fontWeight: 500, fontSize: pt(13), lineHeight: 1.2, align: 'right',
      placement: at(HEAD, 24, { size: { width: mm(LINE) } }) },
  ] },
};
// #endregion

// #region heads: fore-edge heads, the folio in Chinese numerals
const foreEdge = (id, content, edge, y) => ({
  kind: 'text', id, content, writingMode: 'vertical-rl', pages: 'body', align: 'left',
  fontFamily: HEI, fontSize: pt(9.6), color: col('muted'), overflow: 'clip',
  placement: { anchor: { to: 'outer', edge }, offset: { y: em(y) } },
});
const header = { elements: [
  foreEdge('head', '{chapterTitle}', 'top', 4), // four characters below the type area
  foreEdge('folio', '{pageNumber}', 'bottom', -5), // ends five characters above its foot
] };
// #endregion

// #region cover: the title page, a vermilion field inside a double rule
const frame = (id, inset, width) => ({ kind: 'box', id,
  style: { borderColor: col('tint'), borderWidth: pt(width) },
  placement: at(inset, inset, { size: { width: mm(TRIM.h - 2 * inset),
    height: mm(TRIM.w - 2 * inset) } }) });
const coverLine = (id, content, y, align) => ({ kind: 'text', id, content, ...onBand,
  fontFamily: HEI, fontWeight: 500, fontSize: pt(18), lineHeight: 1.2, align,
  placement: at(HEAD, y, { size: { width: mm(LINE) } }) });
const cover = {
  id: 'cover', numbered: false, toc: false, runningChapter: false,
  span: 'page', // a page-wide design is not cut at the foot of the column: the field bleeds
  header: { elements: [] }, footer: { elements: [] },
  advancedDesign: { enabled: true, slot: { elements: [
    { kind: 'box', id: 'field', style: { backgroundColor: col('seal') },
      placement: { anchor: { to: 'bleed', edge: 'top-left' }, size: { height: mm(TRIM.w) } } },
    frame('rule-outer', 11, 1.6), frame('rule-inner', 13, 0.5), // 文武線: thick, then thin
    { kind: 'text', id: 'title', content: '{titleText}', ...onBand, fontFamily: HEI,
      fontWeight: 700, fontSize: pt(56), lineHeight: 1.1, letterSpacing: pt(5.6), align: 'left',
      placement: at(HEAD, 26) },
    { kind: 'text', id: 'latin', content: '{attr.latin}', ...onBand, fontFamily: HEI,
      fontSize: pt(11), lineHeight: 1.4, align: 'left', placement: at(HEAD, 51) },
    coverLine('first', '臨時大總統宣言書', 104, 'left'),
    coverLine('first-date', '1912年1月1日', 104, 'right'),
    coverLine('second', '中華民國臨時約法', 118, 'left'),
    coverLine('second-date', '1912年3月11日', 118, 'right'),
  ] } },
};
// #endregion

const config = () => ({
  locale: 'zh-Hant', // Taiwan conventions: centred punctuation (gotcha: cjk-locale-tag)
  colorPalette,
  page: {
    sizePreset: 'custom', width: mm(TRIM.w), height: mm(TRIM.h), dpi: 150,
    backgroundColor: col('paper'),
    margins: { top: mm(MARGIN.top), bottom: mm(MARGIN.bottom), left: mm(MARGIN.side),
      right: mm(MARGIN.side), mirror: true },
    pageNumbering: { format: 'trad-chinese-informal' }, // 一, 二, 三…
  },
  layout,
  cjk,
  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: HEI, color: col('seal'), fontWeight: 700,
    levels: [
      // Each document opens on the next page, whichever side that is.
      { level: 1, breakBefore: { enabled: true, parity: 'any' }, advancedDesign: opener },
      { level: 2, fontSize: pt(BODY), lineHeight: pt(LEAD), marginTop: pt(LEAD),
        marginBottom: pt(0) },
    ],
  },
  headingStyles: [cover],
  paragraphStyles: [
    // 低二格: the editor's Kai, two body cells lower (pt: the Kai's own em is off the grid).
    { id: 'headnote', fontFamily: KAI, fontSize: pt(10.5), lineHeight: pt(LEAD), color: col('ink'),
      indent: pt(2 * BODY), firstLineIndent: pt(2 * BODY), marginBottom: pt(LEAD) },
    { id: 'note', fontFamily: KAI, fontSize: pt(10.5), lineHeight: pt(LEAD),
      color: col('ink'), firstLineIndent: pt(0), hangingIndent: em(1) },
    { id: 'order', firstLineIndent: em(2), marginTop: pt(0) },
    { id: 'dateline', textAlign: 'left', indent: em(12), firstLineIndent: pt(0) },
    // The seal notice starts 22 cells down, a cell past the end of 大中華民國元年元旦.
    { id: 'seal', fontFamily: HEI, fontSize: pt(10.5), color: col('seal'), textAlign: 'left',
      indent: pt(22 * BODY), firstLineIndent: pt(0) },
    { id: 'article', firstLineIndent: pt(0), hangingIndent: em(2) },
    { id: 'item', indent: em(2), firstLineIndent: pt(0), hangingIndent: em(2) },
    { id: 'colophon', fontFamily: HEI, fontSize: pt(7.5), lineHeight: pt(LEAD),
      color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(LEAD) },
  ],
  header,
  footer: { elements: [] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "民國元年文告二種"
author: "孫文　臨時參議院"
---

# 民國元年文告二種 {style="cover" latin="Two founding documents of 1912"}

# 臨時大總統宣言書 {date="1912年1月1日" latin="Proclamation of the Provisional President"}

:::paragraphs{style="headnote"}
1912年1月1日晚上10時，孫文在南京就任中華民國臨時大總統，宣誓受印之後，以這篇宣言書布告國民。同月29日《臨時政府公報》創刊，第1號第3至6頁刊出全文，題作〈臨時大總統宣言書〉，字句略異。本篇據廣州市博物館藏原件排印；原件沒有標點，也不分段，標點與分段從維基文庫整理本。
:::

中華民國締造之始，而文以不德，膺臨時大總統之任，夙夜戒懼，慮無以副國民之望。夫中國專制政治之毒，至二百餘年來而滋甚，一旦以國民之力踣而去之，起事不過數旬，光復已十餘行省，自有歷史以來成功未有如是之速也。國民以為於內無統一之機關，於外無對待之主體，建設之事更不容緩，於是以組織臨時政府之責相屬。自推功讓能之觀念以言，文所不敢任也；自服務盡責之觀念以言，則文所不敢辭也。是用黽勉從國民之後，能盡掃專制之流毒，確定共和，以達革命之宗旨，完國民之志願，端在今日。敢披瀝肝膽，為國民告：

國家之本，在於人民。合漢、滿、蒙、回、藏諸地為一國，即合漢、滿、蒙、回、藏諸族為一人。——是曰民族之統一。

武漢首義，十數行省先後獨立。所謂獨立，對於清廷為脫離，對於各省為聯合。蒙古、西藏，意亦同此。行動既一，決無歧趨，樞機成於中央，斯經緯周於四至。——是曰領土之統一。

血鐘一鳴，義旗四起，擁甲帶戈之士遍於十餘行省。雖編製或不一，號令或不齊，而目的所在則無不同。由共同之目的，以為共同之行動，整齊劃一，夫豈其難？——是曰軍政之統一。

國家幅員遼闊，各省自有其風氣所宜。前此清廷強以中央集權之法行之，遂其偽立憲之術；今者各省聯合，互謀自治，此後行政，期於中央政府與各省之關係調劑得宜。大綱既挈，條目自舉。——是曰內治之統一。

滿清時代，借立憲之名，行斂財之實，雜捐苛細，民不聊生。此後國家經費，取給於民，必期合於理財學理，而尤在改良社會經濟組織，使人民知有生之樂。——是曰財政之統一。

以上數者，為政務之方針，持此進行，庶無大過。

若夫革命主義，為吾儕所昌言，萬國所同喻，前此雖屢起屢躓，外人無不鑒其用心。八月以來，義旗飆發，諸友邦對之抱和平之望、持中立之態，而報紙及輿論尤每表其同情。鄰誼之篤，良足深謝。臨時政府成立以後，當盡文明國應盡之義務，以期享文明國應享之權利。滿清時代辱國之舉措與排外之心理，務一洗而去之。與我友邦益增睦誼，持和平主義，將使中國見重於國際社會，且將使世界漸趨於大同。循序以進，不為幸獲。對外方針，實在於是。

夫民國新建，外交內政百緒繁生，文自顧何人，而克勝此？然而臨時之政府，革命時代之政府也。十餘年來從事於革命者，皆以誠摯純潔之精神戰勝所遇之艱難。即使後此之艱難遠逾於前日，而吾人惟保此革命之精神，一往而莫之能阻，必使中華民國之基礎確定於大地，然後臨時政府之職務始盡，而吾人始可告無罪於國民也。今以與我國民初相見之日，披布腹心，惟我四萬萬之同胞共鑒之。

:::paragraphs{style="dateline"}
大中華民國元年元旦
:::

:::paragraphs{style="seal"}
（中華民國臨時大總統印）
:::

## 注釋

:::paragraphs{style="note"}
【中華民國】1912年1月1日建立。英文國號作 Republic of China，縮寫:upright[ROC]。

【文以不德】文，孫文自稱其名；不德，自謙德行不足。孫文號逸仙，西文拼作 Sun Yat-sen（1866—1925）。

【二百餘年】指清朝的統治。清兵1644年入關，至1912年2月12日宣統帝退位，凡:tcy[268]年。

【八月以來】辛亥年八月十九日（1911年10月10日）武昌起義以來。

【四萬萬之同胞】四萬萬，四億。當時以此通稱全國人口。

【大中華民國元年元旦】1912年1月1日，夏曆辛亥年十一月十三日。民國紀年由此日起算，當年稱民國元年。公元2026年是民國:tcy[115]年。
:::

# 中華民國臨時約法 {date="1912年3月11日" latin="Provisional Constitution of the Republic of China"}

:::paragraphs{style="headnote"}
1912年3月8日，南京臨時參議院議決《中華民國臨時約法》；3月11日，臨時大總統孫文公布施行，全文刊於《臨時政府公報》第35號。約法凡7章56條，本篇錄第一章〈總綱〉與第二章〈人民〉，共15條，前冠公布令。原文的「爲」「靑」「敎」「决」，本篇改用通行字形。
:::

:::paragraphs{style="order"}
玆准參議院咨送議決臨時約法前來，合行公布。
:::

:::paragraphs{style="seal"}
孫文印
:::

:::paragraphs{style="dateline"}
中華民國元年三月十一日
:::

## 第一章　總綱

:::paragraphs{style="article"}
第一條　中華民國由中華人民組織之。

第二條　中華民國之主權屬於國民全體。

第三條　中華民國領土，為二十二行省、內外蒙古、西藏、青海。

第四條　中華民國以參議院、臨時大總統、國務院、法院行使其統治權。
:::

## 第二章　人民

:::paragraphs{style="article"}
第五條　中華民國人民一律平等，無種族、階級、宗教之區別。

第六條　人民得享有左列各項之自由權：
:::

:::paragraphs{style="item"}
一、人民之身體，非依法律不得逮捕、拘禁、審問、處罰。

二、人民之家宅，非依法律不得侵入或搜索。

三、人民有保有財產及營業之自由。

四、人民有言論、著作、刊行及集會結社之自由。

五、人民有書信秘密之自由。

六、人民有居住遷徙之自由。

七、人民有信教之自由。
:::

:::paragraphs{style="article"}
第七條　人民有請願於議會之權。

第八條　人民有陳訴於行政官署之權。

第九條　人民有訴訟於法院受其審判之權。

第十條　人民對於官吏違法損害權利之行為，有陳訴於平政院之權。

第十一條　人民有應任官考試之權。

第十二條　人民有選舉及被選舉之權。

第十三條　人民依法律有納稅之義務。

第十四條　人民依法律有服兵之義務。

第十五條　本章所載人民之權利，有認為增進公益、維持治安或非常緊急必要時，得依法律限制之。
:::

## 注釋

:::paragraphs{style="note"}
【參議院】臨時參議院，1912年1月28日在南京開院，參議員由各省都督府選派，每省至多3人。

【二十二行省】清末本部十八省，加上東三省與新疆，合稱二十二行省。
:::

:::paragraphs{style="colophon"}
Set in Noto Serif TC, Noto Sans TC and LXGW WenKai TC (SIL OFL) · Texts: zh.wikisource, CC BY-SA 4.0 · Headnotes and notes: CC BY 4.0
:::
`; // content.<lang>.md, inlined by the Cookbook

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
// Every face the pages paint; the Chinese ones by files (gotcha: cjk-fonts-slices).
const FONTS = { 'Noto Serif TC': ['400'], 'Noto Sans TC': ['400', '500', '700'],
  'LXGW WenKai TC': ['400'] };
// #region voices: each Chinese face loads the files for the text it sets
const voice = (styles) => (markdown.match(
  new RegExp(`:::paragraphs\\{style="(?:${styles})"\\}[\\s\\S]*?:::`, 'g')) ?? []).join('');
const kaiText = voice('headnote|note');
// Hei: headings and their attributes, seals, colophon, the cover's lines, folios 一 to 十.
const heiText = (markdown.match(/^#.*$/gm) ?? []).join('') + voice('seal|colophon')
  + '臨時大總統宣言書1912年1月1日中華民國臨時約法1912年3月11日一二三四五六七八九十';
// #endregion

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown);
await loadCjkFonts({ [SONG]: FONTS[SONG] }, markdown, { vertical: true });
await loadCjkFonts({ [HEI]: FONTS[HEI] }, heiText, { vertical: true });
await loadCjkFonts({ [KAI]: FONTS[KAI] }, kaiText, { vertical: true });
const doc = await withLoadedFonts(() => buildDocument({ markdown }, config()),
  { ...kitFonts(FONTS), text: markdown });
showBook(doc, { title: t({ en: 'Two documents of 1912', es: 'Dos documentos de 1912' }) });
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 v3 ── the same in every recipe · postext.dev/cookbook
// Postext loads the faces a config asks for before layout (prepareFonts,
// buildDocumentWithFonts) and asks the kit for the files: Fontsource's, the
// files the PDF embeds too.

/** The options of buildDocumentWithFonts / prepareFonts / withLoadedFonts:
 *  the Fontsource resolver, and the faces of FONTS loaded with the ones the
 *  config names. 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 Fontsource files, in a fixed order: latin, then latin-ext and greek
 *  when `text` needs them and the family ships them (kitSubsetsFor), each with
 *  its unicode-range. Null for a weight or slant Fontsource does not ship. */
async function fontsourceResolver(family, weight, style, { text = '' } = {}) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  if (meta && !(meta.weights.includes(weight) && meta.styles.includes(style))) 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],
  }));
}

/** The unicode-range of each Fontsource file the kit loads (a function: the
 *  kit is inlined after the pen's code, which runs before a const would be set). */
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, which add their own files: the
 *  faces of `faces` = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  č ł † α χ also load latin-ext and greek files (kitSubsetsFor). With
 *  `optional`, a face Fontsource does not ship is skipped instead of failing.
 *  The files are added once all have loaded, in the order asked (latin, then
 *  latin-ext, then greek), whatever order they arrive in: the last one added
 *  wins a character two files hold. Resolves to the number of faces added. */
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?.weights.includes(weight) && meta.styles.includes(style))) 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 family, weight and style (fonts.check() would
 *  also say yes 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;
}

/** 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) {
  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 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 · pdf v3 ── the same in every recipe that exports a PDF
/** The Fontsource files the screen used, as TrueType, with their range and
 *  place: the nearest weight the family ships, upright with no italic;
 *  latin, then what its letters need (kitSubsetsFor). */
async function fontsourceProvider(family, weight, style, request) {
  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 text = String.fromCodePoint(...(request?.codePoints ?? []));
  const files = await Promise.all(['latin', ...kitSubsetsFor(text, meta)].map(async (subset, order) => {
    const res = await fetch(`${await fontsourceAt(id)}files/${id}-${subset}-${w}-${s}.woff2`);
    if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`);
    return Object.assign(await decompressWoff2(new Uint8Array(await res.arrayBuffer())),
      { unicodeRange: kitRanges()[subset], order });
  }));
  return files.length === 1 ? files[0] : files;
}

/** A "Build the PDF" button; then "Open the PDF" (a new tab: CodePen's frame
 *  shows no 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 v2 ── 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 = `${id}/${weight}${style === 'italic' ? '-italic' : ''}.css`;
  if (!cjkSlices.cache.has(css)) {
    let at;
    cjkSlices.cache.set(css, fontsourceAt(id).then((a) => fetch(at = a + css.slice(id.length + 1)))
      .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], at).href, range, ranges };
      }).reverse()));
  }
  return cjkSlices.cache.get(css);
}

/** The file of `slices` the screen sets code point `cp` in, if any: the
 *  last one loadCjkFonts adds whose range holds it. A numbered file that
 *  repeats a letter of latin is added after latin, and wins it. */
function cjkSliceFor(slices, cp) {
  const holds = (slice) => slice.ranges.some(([lo, hi]) => cp >= lo && cp <= hi);
  return slices.reduce((last, slice) => (holds(slice) ? slice : last), undefined);
}

/** 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 the engine's later round
 *  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 the
 *  screen set its pages' characters in (`request.codePoints`), each marked
 *  with its unicode-range and its place in the order loadCjkFonts added
 *  them: postext-pdf sets a character two files hold in the one added
 *  last, as the browser does. Any other family gets the latin file
 *  fontsourceProvider fetches (the "pdf" block) and, when the face sets
 *  letters only latin-ext has, that file too. */
async function cjkPdfProvider(family, weight, style, request) {
  if (!(await isCjkFamily(family))) return cjkLatinPdfFiles(family, weight, style, request);
  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.map(async (slice, order) => {
    if (!picked.has(slice)) return null;
    const res = await fetch(slice.url);
    if (!res.ok) throw new Error(`Fontsource file ${slice.url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: slice.range, order });
  })).then((files) => files.filter(Boolean));
}

/** A Latin family set next to the CJK faces: its latin file, then its
 *  latin-ext file when the face sets letters only latin-ext has (ō ū in
 *  Hepburn rōmaji, ǎ in pinyin), the file loadFonts adds on screen for
 *  them, each marked with its unicode-range and its place in that order:
 *  the PDF sets a character in the file the browser took it from. A face
 *  Fontsource ships without latin-ext, or whose file does not come, gets
 *  latin alone, and the PDF names the letters it lacks. */
async function cjkLatinPdfFiles(family, weight, style, request) {
  const meta = await fontsourceMeta(family);
  const beyond = [...(request?.codePoints ?? [])].some(cjkLatinExtOnly);
  if (!beyond || !meta?.subsets?.includes('latin-ext')) return fontsourceProvider(family, weight, style);
  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 id = fontsourceId(family);
  const url = `${await fontsourceAt(id)}files/${id}-latin-ext-${w}-${s}.woff2`;
  const [latin, ext] = await Promise.all([fontsourceProvider(family, weight, style), fetch(url)
    .then(async (res) => (res.ok ? decompressWoff2(new Uint8Array(await res.arrayBuffer())) : null), () => null)]);
  const ranges = kitRanges();
  return ext ? [Object.assign(latin, { unicodeRange: ranges.latin, order: 0 }),
    Object.assign(ext, { unicodeRange: ranges['latin-ext'], order: 1 })] : latin;
}

/** Whether code point `cp` is in Fontsource's latin-ext file and not in
 *  its latin file: Latin Extended-A and -B, IPA, the spacing modifiers and
 *  Latin Extended Additional (loadFonts's test for latin-ext), less the
 *  few latin holds too (ı Œ œ ʻ ʼ ˆ ˚ ˜). */
function cjkLatinExtOnly(cp) {
  if (!((cp >= 0x100 && cp <= 0x2ff) || (cp >= 0x1e00 && cp <= 0x1eff))) return false;
  return ![0x131, 0x152, 0x153, 0x2bb, 0x2bc, 0x2c6, 0x2da, 0x2dc].includes(cp);
}

/** 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 ───────────────────────────────────────────────────────────────────────
```

## Varianti

### Tieni diritti anche i numeri di tre cifre

Con 3, il 268 e il 115 delle note prendono la loro cella senza marcatura, e così farebbe qualunque numero di articolo o di pagina fino a 999; 1912 resta di lato.

```diff
-  uprightDigits: 2,
+  uprightDigits: 3,
```

### Ruota di lato ogni numero

Con 0 nessun numero sta diritto da solo: 10月10日 ruota come 1912, e restano diritti solo 268, 115 e ROC, che sono marcati.

```diff
-  uprightDigits: 2,
+  uprightDigits: 0,
```

## Errori frequenti

- **I caratteri cinesi si caricano a fette, tramite il blocco cjk.** Fontsource serve una famiglia cinese, giapponese o coreana come un centinaio di file per peso, ognuno dei quali copre un intervallo di caratteri. loadFonts scarica solo il file latin, così a schermo i caratteri Han vengono da un font di sistema e sono misurati male, e fontsourceProvider passa al PDF quel file latin, che li stampa come riquadri vuoti. Elenca il blocco cjk del kit, chiama loadCjkFonts(FONTS, markdown) dopo loadFonts (una volta per voce tipografica, con il testo che compone, quando il libro usa più caratteri CJK) e passa a renderToPdf fontProvider: cjkPdfProvider: entrambi prendono i file che contengono i caratteri del testo.
- **Assegna al documento il tag zh-Hans o zh-Hant, non LANG.** Le edizioni di una ricetta sono en ed es, ma un esempio cinese è cinese in entrambe: `locale: LANG` gli darebbe il tag inglese o spagnolo, sillaberebbe le sue parole latine, etichetterebbe le figure Figure o Figura e darebbe al PDF la lingua sbagliata. Da postext 1.30 il tag è anche la lingua usata per lo shaping del testo (misura, disegno e incorporamento), quindi con un tag inglese o spagnolo un carattere cinese compone in altre forme le cifre e la punteggiatura che condivide con il testo latino, e le righe vanno a capo altrove. Scrivi tu il tag: 'zh-Hans' (convenzioni della Cina continentale: divisione in righe GB, punteggiatura Kaiming) o 'zh-Hant' (Taiwan: punteggiatura centrata a tutta larghezza); 'zh-HK' per Hong Kong. Un 'zh' da solo vale come semplificato, Cina continentale. Un esempio giapponese prende 'ja' (errore frequente ja-locale-tag).
- **Un libro rilegato a destra mostra le doppie pagine con showBook.** In un libro rilegato a destra (testo arabo, ebraico o persiano, cinese verticale, o page.binding 'right') la pagina 1 resta il recto, ma sta a sinistra del dorso, e le coppie si leggono [3 | 2]. showPages dispone ogni libro come rilegato a sinistra; showBook del blocco book (il blocco cjk porta la stessa funzione) legge doc.binding e rispecchia le coppie. capture.hero indica comunque una doppia pagina in ordine di lettura, [verso, recto]: [2, 3].

- Noto Serif TC, come lo serve Fontsource, non ha 爲 né 敎: il suo foglio di stile li elenca entrambi, ma nessun file contiene un glifo per loro. L’edizione del 1912 della costituzione scrive 為 e 教 in quelle forme. Il canvas disegnava 敎 in un carattere di sistema e il PDF non aveva alcun glifo per esso, cosa che la cattura segnalava (C25). La raccolta compone 為 e 教, porta con essi 靑 e 决 a 青 e 決, e la sua nota introduttiva lo dichiara.
- LXGW WenKai TC, come lo serve Fontsource, disegna 即, 為, 青 e 教 nelle forme antiche 卽, 爲, 靑 e 敎, che stonano accanto agli stessi caratteri nel testo in Song. Le note sono formulate senza quei quattro; li vuole solo la nota introduttiva che elenca le forme antiche della costituzione. Leggi a grandezza naturale il testo Kai delle tue note.
- Un numero composto di lato viene distanziato dal cinese accanto come una parola latina, un quarto di em per lato (`cjk.latinSpacing`), quindi le note introduttive si leggono `1912 年`; un numero in una sola cella non prende spazio, come un carattere cinese.

## Crediti

- Ricetta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Testo: Sun Wen (Sun Yat-sen), proclamation on taking office as Provisional President, 1 January 1912, from the original in the Guangzhou Museum: Sun Wen; transcription and punctuation by Wikisource editors ([fonte](https://zh.wikisource.org/w/index.php?title=%E4%B8%AD%E8%8F%AF%E6%B0%91%E5%9C%8B%E5%A4%A7%E7%B8%BD%E7%B5%B1%E5%AD%AB%E6%96%87%E5%AE%A3%E8%A8%80%E6%9B%B8&oldid=2460344)), CC-BY-SA-4.0
- Testo: Provisional Constitution of the Republic of China, 11 March 1912 (Linshi zhengfu gongbao no. 35), chapters 1 and 2, with its promulgation order; four old character forms set in their current forms: Provisional Senate, Nanjing; transcription by Wikisource editors ([fonte](https://zh.wikisource.org/w/index.php?title=%E4%B8%AD%E8%8F%AF%E6%B0%91%E5%9C%8B%E8%87%A8%E6%99%82%E7%B4%84%E6%B3%95&oldid=2422419)), CC-BY-SA-4.0
- Testo: The headnotes and notes in Chinese, written for this recipe: Postext Cookbook, CC-BY-4.0
- Caratteri: Noto Serif TC (OFL-1.1), Noto Sans TC (OFL-1.1), LXGW WenKai TC (OFL-1.1)
- Codice: MIT · Contenuto di esempio: CC-BY-4.0

## Ricette correlate

- [Nº 063 · Attestato con cornice guilloché](https://postext.dev/it/cookbook/certificate-single-page.md): Attestati di fine corso disegnati da un solo stile di titolo: cornice guilloché nell’intestazione, sigillo e firme al piede, il nome nell’apertura. · Livello 2 (Intermedio) · Fogli singoli ed effimeri
- [Nº 003 · Apertura di capitolo su una fascia al vivo](https://postext.dev/it/cookbook/chapter-opener-bleed-band.md): Un’apertura advancedDesign sul titolo di livello 1: una fascia al vivo, il numero del capitolo sul suo piede, occhiello e sommario dagli attributi del titolo. · Livello 3 (Avanzato) · Libri di testo
- [Nº 058 · Lettera commerciale secondo la DIN 5008](https://postext.dev/it/cookbook/din-business-letter.md): Un preventivo tedesco di due pagine su A4. L’oggetto è l’H1, il cui progetto grafico fissa intestazione, indirizzo e blocco informativo dove vuole il modulo B. · Livello 2 (Intermedio) · Fogli singoli ed effimeri