# Um artigo chinês citado pela GB/T 7714

> Um artigo de revista chinesa em duas colunas: as citações [@key] saem como [1] e [2–4] sobrescritos, e as referências levam [M], [J], [D] e [EB/OL].

- Versão HTML: https://postext.dev/pt/cookbook/gbt7714-chinese-paper
- Receita Nº 090 · Estrutura do livro · Nível 2 (Intermediário) · Saídas: Canvas, PDF
- Gêneros: Artigos e trabalhos acadêmicos
- Requer postext ≥ 1.12.0, postext-pdf ≥ 1.12.0 · testada com 1.19.1, postext-pdf 1.19.1 em 2026-10-06
- Páginas: [41](https://postext.dev/cookbook/gbt7714-chinese-paper/en/p01.webp?v=850cb9e8), [42](https://postext.dev/cookbook/gbt7714-chinese-paper/en/p02.webp?v=850cb9e8)
- PDF: https://postext.dev/cookbook/gbt7714-chinese-paper/en/gbt7714-chinese-paper.pdf?v=850cb9e8
- Abrir no Sandbox: https://postext.dev/pt/sandbox#recipe=gbt7714-chinese-paper&lang=en (.postext: https://postext.dev/cookbook/gbt7714-chinese-paper/en/gbt7714-chinese-paper.postext)
- Última atualização: 2026-10-01
- Outros idiomas: [en](https://postext.dev/en/cookbook/gbt7714-chinese-paper.md), [es](https://postext.dev/es/cookbook/gbt7714-chinese-paper.md), [ca](https://postext.dev/ca/cookbook/gbt7714-chinese-paper.md), [zh](https://postext.dev/zh/cookbook/gbt7714-chinese-paper.md), [ja](https://postext.dev/ja/cookbook/gbt7714-chinese-paper.md), [ar](https://postext.dev/ar/cookbook/gbt7714-chinese-paper.md)

## Em poucas palavras

Um artigo curto de uma revista científica chinesa. O autor escreve um código para cada fonte; o Postext numera as fontes na ordem em que são citadas e imprime a lista de referências como as revistas chinesas exigem.

## O que você vai compor

Duas páginas de um artigo de pesquisa numa revista inventada de estudos editoriais, 示例出版研究 (“Pesquisa Editorial de Exemplo”), composto como uma revista universitária chinesa compõe os seus artigos. A página é um 16开, 184 × 260 mm, com duas colunas de 23 caracteres de 小五 numa grade de 15 pt. Um bloco de título atravessa a página: o nome da revista numa faixa anil, o título em Hei negrito, os autores, as filiações e um resumo com as palavras-chave. As citações seguem a GB/T 7714—2015, a norma nacional chinesa de referências, no sistema numérico (顺序编码制): cada obra recebe um número na ordem em que é citada pela primeira vez, o número sai sobrescrito entre colchetes e três ou mais números seguidos viram um intervalo. A lista de referências dá a cada entrada o seu código de tipo de documento e escreve 等 depois de três autores de uma obra chinesa e “et al.” depois dos de uma ocidental. [Um capítulo de tese citado em APA 7](https://postext.dev/pt/cookbook/apa-thesis-with-bibtex.md) usa a mesma marcação de citações num estilo autor-data.

**Esta receita responde a:**

- Como cito pela GB/T 7714 num artigo chinês, com números sobrescritos e códigos de tipo?
- Como cito obras e monto a bibliografia em APA, IEEE ou outro estilo de citação?

## A resposta curta

```js
// script.js, linhas 31–45
// Register the engine once, before the first build. The GB/T 7714 numeric style writes
// superscript [n] in the order works are first cited, joins three or more in a row into a
// range and sets the list with its type codes: [M] book, [J] article, [D] thesis, [C]
// conference paper, [EB/OL] web page. Its CSL file holds a second layout for works whose
// language is English, with "et al." for 等, commented out: uncommented, a Western entry
// takes "et al." and a Chinese one keeps 等, each chosen by the entry's `language`.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const GBT = STYLES['china-national-standard-gb-t-7714-2015-numeric'];
const citations = {
  style: 'custom', // the bundled style with its English layout switched on
  customStyle: GBT.replace(/<!-- (<layout[^>]*locale="en">[\s\S]*?<\/layout>)\s*-->/, '$1'),
  locale: 'zh-CN', // 等, 卷, 版 and the other terms of the list
  bibliography: { fontSize: em(7.5 / BODY), lineHeight: pt(12), entrySpacing: pt(1.5),
    labelWidth: em(1.7) }, // turnovers under the text, not past it: [1] and a space
};
```

## Ingredientes

**Ensina**

- [Citações em um estilo de citação](https://postext.dev/pt/docs/document-format.md#citações-e-bibliografia): Obras citadas como [@chave, p. 33] e formatadas em um estilo CSL (APA, Chicago, MLA, IEEE, Vancouver, ISO 690, GB/T 7714…) escolhido nas configurações, com link para as respectivas entradas.
- [Bibliografia a partir das referências](https://postext.dev/pt/docs/document-format.md#citações-e-bibliografia): A lista de obras citadas, montada a partir das referências do documento (front matter ou um bloco BibTeX) no lugar onde estiver :::bibliography ou depois do último capítulo.

**Também usa**

- [Grade de caracteres](https://postext.dev/pt/docs/configuration.md#grade-de-caracteres)
- [Fontes chinesas, japonesas e coreanas](https://postext.dev/pt/docs/configuration.md#fontes-chinesas-japonesas-e-coreanas)
- [Largura da pontuação chinesa](https://postext.dev/pt/docs/configuration.md#largura-da-pontuação)
- [Uma ou duas colunas](https://postext.dev/pt/docs/configuration.md#tipos-de-layout)
- [Aberturas desenhadas](https://postext.dev/pt/docs/configuration.md#largura-e-design-avançado)
- [Ancoragem de elementos de design](https://postext.dev/pt/docs/configuration.md#posicionamento-de-elementos)
- [Títulos numerados](https://postext.dev/pt/docs/configuration.md#sobrescritas-por-nível)
- [Estilos de título](https://postext.dev/pt/docs/configuration.md#estilos-de-título)
- [Capítulos sem número](https://postext.dev/pt/docs/configuration.md#estilos-de-título)
- [Boxes](https://postext.dev/pt/docs/configuration.md#estilos-de-boxe)
- [Chips no texto](https://postext.dev/pt/docs/configuration.md#estilos-de-chip)
- [Cabeços e fólios](https://postext.dev/pt/docs/configuration.md#cabeços-e-rodapés)
- [Paleta de cores semântica](https://postext.dev/pt/docs/configuration.md#paleta-de-cores)
- [Exportação para PDF](https://postext.dev/pt/docs/configuration.md#geração-de-pdf)
- [Quebra de linha em chinês](https://postext.dev/pt/docs/configuration.md#tipografia-do-leste-asiático)
- [Equilíbrio de colunas](https://postext.dev/pt/docs/configuration.md#equilíbrio-de-colunas)
- [Atributos de título](https://postext.dev/pt/docs/document-format.md#atributos-de-título)
- [Cabeços por tipo de página](https://postext.dev/pt/docs/configuration.md#elementos-de-texto)
- [Estilos de parágrafo](https://postext.dev/pt/docs/configuration.md#estilos-de-parágrafo)
- [Fontes incorporadas ao PDF](https://postext.dev/pt/docs/configuration.md#por-que-um-provedor-de-fontes)
- [Elementos pré-textuais em romanos](https://postext.dev/pt/docs/document-format.md#numbering)
- [Quebras de linha nos títulos](https://postext.dev/pt/docs/document-format.md#quebras-de-linha-em-títulos)

**A configuração em resumo**

- [`bodyText`](https://postext.dev/pt/docs/configuration.md#texto-do-corpo), [`calloutStyles`](https://postext.dev/pt/docs/configuration.md#estilos-de-boxe), [`chipStyles`](https://postext.dev/pt/docs/configuration.md#estilos-de-chip), [`citations`](https://postext.dev/pt/docs/configuration.md#citações), [`cjk`](https://postext.dev/pt/docs/configuration.md#tipografia-do-leste-asiático), [`colorPalette`](https://postext.dev/pt/docs/configuration.md#paleta-de-cores), [`footer`](https://postext.dev/pt/docs/configuration.md#cabeços-e-rodapés), [`header`](https://postext.dev/pt/docs/configuration.md#cabeços-e-rodapés), [`headingStyles`](https://postext.dev/pt/docs/configuration.md#estilos-de-título), [`headings`](https://postext.dev/pt/docs/configuration.md#títulos), [`layout`](https://postext.dev/pt/docs/configuration.md#diagramação), [`locale`](https://postext.dev/pt/docs/configuration.md#hifenização), [`page`](https://postext.dev/pt/docs/configuration.md#página), [`paragraphStyles`](https://postext.dev/pt/docs/configuration.md#estilos-de-parágrafo)

**API**

- [`LOCALES`](https://postext.dev/pt/docs/document-format.md#citações-e-bibliografia), [`STYLES`](https://postext.dev/pt/docs/document-format.md#citações-e-bibliografia), [`buildDocument`](https://postext.dev/pt/docs/configuration.md#compilar-um-documento), [`clearMeasurementCache`](https://postext.dev/pt/docs/configuration.md#cache-de-medidas), [`createCiteprocEngine`](https://postext.dev/pt/docs/document-format.md#citações-e-bibliografia), [`decompressWoff2`](https://postext.dev/pt/docs/configuration.md#provedor-de-fontes-no-navegador-fontsource--woff2), [`registerCitationEngine`](https://postext.dev/pt/docs/document-format.md#citações-e-bibliografia), [`renderPageToCanvas`](https://postext.dev/pt/docs/configuration.md#renderizar-uma-página-como-bitmap), [`renderToPdf`](https://postext.dev/pt/docs/configuration.md#geração-de-pdf)

**Tipos**

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

## Preparo

### 1 · O estilo, e o seu modelo para obras ocidentais

O código está na [resposta curta](https://postext.dev/pt/cookbook/gbt7714-chinese-paper.md#a-resposta-curta), mais acima. O motor de citações é registrado uma vez, antes da primeira composição, e o `postext-citeproc` traz os três estilos da GB/T 7714: numérico, autor-data e de notas ([Citações](https://postext.dev/pt/docs/configuration.md#citações-1)). No texto, uma citação é uma chave entre colchetes. `[@tinker1963]` imprime um [1] sobrescrito, e `[@rayner2016; @dyson2001; @lin2023]` imprime [2–4]. Dois números seguidos continuam como lista, [5,6]. Uma obra citada de novo mantém o primeiro número: [4] no terceiro parágrafo, e [1] e [2] mais adiante no artigo.

A norma pede “et al.” depois dos três primeiros autores de uma obra ocidental e 等 depois dos de uma chinesa. O arquivo CSL incluído tem dois modelos para isso, um para obras em inglês, mas o inglês está comentado, então todas as entradas recebem 等. A resposta pega o XML do estilo em `STYLES`, descomenta esse modelo e passa o resultado como estilo próprio. Cada entrada passa então a tirar o modelo do seu próprio campo `language`: Rayner e quatro coautores viram “RAYNER K, SCHOTTER E R, MASSON M E J, et al.”, e 林岚 e três coautores viram “林岚, 周明远, 陈思齐, 等”. `locale: 'zh-CN'` escreve em chinês as demais palavras da lista.

### 2 · As referências num bloco CSL-YAML

As obras ficam num bloco `:::references{format=csl-yaml}` no fim do Markdown, no formato que o Zotero exporta como CSL YAML ([Referências](https://postext.dev/pt/docs/document-format.md#referências)). O tipo CSL decide o código: `book` imprime [M], `article-journal` [J], `thesis` [D], `paper-conference` [C] depois do seu `//` e dos anais, e `webpage` [EB/OL] com a data de acesso entre colchetes. Um artigo de revista com DOI vira [J/OL] e mantém o DOI, como a norma pede. Os nomes chineses vão em `literal`, para que o estilo não os separe em sobrenome e nome. `:::bibliography{title=""}` põe a lista sob o título sem número 参考文献, e `labelWidth` alinha as linhas seguintes com o texto da entrada, e não além dele.

![Page 42: 2 结果.](https://postext.dev/cookbook/gbt7714-chinese-paper/en/p02.webp?v=850cb9e8)

*Página 2: entradas ocidentais em maiúsculas com et al., entradas chinesas com 等, cada uma com o seu código de tipo.*

### 3 · O bloco de título numa faixa

```js
// script.js, linhas 49–69
const BAND = 30; // mm from the trim's top
const at = (id, edge, y) => ({ anchor: { to: id ? `#${id}` : 'container', edge },
  offset: { y: mm(y) }, size: { width: mm(AREA) } });
const line = (id, content, family, size, color, placement, extra) => ({ kind: 'text', id,
  content, fontFamily: family, fontSize: pt(size), color: col(color), align: 'center',
  overflow: 'wrap', placement, ...extra });
const onBand = (x, y) => ({ anchor: { to: 'page', edge: 'top-left' },
  offset: { x: mm(x), y: mm(y) }, size: { width: mm(AREA) } });
const masthead = { enabled: true, minHeight: pt(9 * LEAD), slot: { elements: [
  { kind: 'box', id: 'band', style: { backgroundColor: col('indigo') },
    placement: { anchor: { to: 'page', edge: 'top-left' },
      size: { width: 'fill', height: mm(BAND) } } },
  line('journal', '示例出版研究', HEI, 15, 'paper', onBand(15.8, 13),
    { fontWeight: 700, align: 'left', letterSpacing: pt(3) }),
  line('issue', '第44卷　第3期　2026年9月', HEI, 8, 'mist', onBand(15.8, 16),
    { align: 'right' }),
  line('title', '{titleText}', HEI, 17, 'ink', at('', 'top-left', 14),
    { fontWeight: 700, lineHeight: 1.45 }),
  line('authors', '{attr.authors}', KAI, 12, 'ink', at('title', 'below', 4)),
  line('affiliations', '{attr.affiliations}', SONG, 7.5, 'muted', at('authors', 'below', 2)),
] } };
```

O bloco de título é o design do H1, um estilo de título que ocupa as duas colunas. A faixa é uma caixa ancorada ao refile, e o nome da revista fica sobre ela em branco. O título, os autores e as filiações vêm do título e dos seus atributos, cada um posicionado embaixo do anterior (`#title`, `below`), então um título de três linhas empurra o resto para baixo ([Largura e design avançado](https://postext.dev/pt/docs/configuration.md#largura-e-design-avançado)).

### 4 · O resumo e os seus rótulos

```js
// script.js, linhas 73–80
// In 宋, not 楷: the one Kai on Fontsource is a Taiwan face (gotcha: cjk-face-region).
const calloutStyles = [{ id: 'abstract', span: 'page', backgroundEnabled: false,
  padding: { top: pt(0), bottom: pt(0), left: em(2), right: em(2) },
  marginTop: pt(0), marginBottom: pt(LEAD),
  body: { fontFamily: SONG, fontSize: pt(BODY), lineHeight: pt(LEAD), firstLineIndent: pt(0),
    textAlign: 'justify' } }];
const chipStyles = [{ id: 'label', fontFamily: HEI, bold: true, color: col('indigo'),
  backgroundEnabled: false, borderWidth: pt(0), paddingX: em(0), gap: em(0.5) }];
```

O resumo é um boxe na largura da página, recuado dois caracteres de cada lado. Os rótulos são chips: `:chip[摘　要：]{style="label"}` compõe a palavra em Hei negrito, no anil da revista, sem caixa ([Estilos de chip](https://postext.dev/pt/docs/configuration.md#estilos-de-chip)). As revistas chinesas costumam compor o resumo em 楷体; esta o mantém em Song, pelo motivo explicado em “Erros comuns”.

```js
// script.js, linhas 16–22
const palette = {
  ink: '#1a1a1a', indigo: '#24427a', mist: '#b8c6e0', rule: '#9aa3b5', muted: '#5f6470',
  paper: '#ffffff',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.indigo })
  .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
```

## A receita completa

Um único arquivo, composto a partir da pasta da receita com o texto de exemplo e o kit comum das Receitas já incluídos; ele monta a própria página. Para executá-lo, coloque-o em um `<script type="module">` de uma página vazia ou cole-o no painel JS de um pen novo do CodePen (como módulo). Ele importa o postext do esm.sh, então não há nada para instalar nem compilar.

- Pasta da receita: https://github.com/drnachio/postext/tree/main/cookbook/gbt7714-chinese-paper

### script.js

```js
// ═══ Postext Cookbook · Nº 090 · A Chinese paper cited to GB/T 7714 ═════════════════
// https://postext.dev/en/cookbook/gbt7714-chinese-paper
// 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,
} 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 = 'en'; // @lang: the language of the frame; the paper is Chinese in both editions
const RECIPE = 'gbt7714-chinese-paper';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: black text, one indigo for the journal's name, its rules and its labels
const palette = {
  ink: '#1a1a1a', indigo: '#24427a', mist: '#b8c6e0', rule: '#9aa3b5', muted: '#5f6470',
  paper: '#ffffff',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.indigo })
  .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] = [9, 15]; // pt: 小五 on a 15 pt line, the grid both columns share
const [CHARS, LINES] = [23, 40]; // characters to a column's line, lines to a column
const PT = 25.4 / 72; // mm in a point
const AREA = (2 * CHARS + 2) * BODY * PT; // mm: two columns and a 2-em gutter, 152.4

// #region answer: GB/T 7714 numbered: [1] in citation order, [2–4], 等 or et al. by language
// Register the engine once, before the first build. The GB/T 7714 numeric style writes
// superscript [n] in the order works are first cited, joins three or more in a row into a
// range and sets the list with its type codes: [M] book, [J] article, [D] thesis, [C]
// conference paper, [EB/OL] web page. Its CSL file holds a second layout for works whose
// language is English, with "et al." for 等, commented out: uncommented, a Western entry
// takes "et al." and a Chinese one keeps 等, each chosen by the entry's `language`.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const GBT = STYLES['china-national-standard-gb-t-7714-2015-numeric'];
const citations = {
  style: 'custom', // the bundled style with its English layout switched on
  customStyle: GBT.replace(/<!-- (<layout[^>]*locale="en">[\s\S]*?<\/layout>)\s*-->/, '$1'),
  locale: 'zh-CN', // 等, 卷, 版 and the other terms of the list
  bibliography: { fontSize: em(7.5 / BODY), lineHeight: pt(12), entrySpacing: pt(1.5),
    labelWidth: em(1.7) }, // turnovers under the text, not past it: [1] and a space
};
// #endregion

// #region masthead: the journal's name on an indigo band, then title, authors, affiliations
const BAND = 30; // mm from the trim's top
const at = (id, edge, y) => ({ anchor: { to: id ? `#${id}` : 'container', edge },
  offset: { y: mm(y) }, size: { width: mm(AREA) } });
const line = (id, content, family, size, color, placement, extra) => ({ kind: 'text', id,
  content, fontFamily: family, fontSize: pt(size), color: col(color), align: 'center',
  overflow: 'wrap', placement, ...extra });
const onBand = (x, y) => ({ anchor: { to: 'page', edge: 'top-left' },
  offset: { x: mm(x), y: mm(y) }, size: { width: mm(AREA) } });
const masthead = { enabled: true, minHeight: pt(9 * LEAD), slot: { elements: [
  { kind: 'box', id: 'band', style: { backgroundColor: col('indigo') },
    placement: { anchor: { to: 'page', edge: 'top-left' },
      size: { width: 'fill', height: mm(BAND) } } },
  line('journal', '示例出版研究', HEI, 15, 'paper', onBand(15.8, 13),
    { fontWeight: 700, align: 'left', letterSpacing: pt(3) }),
  line('issue', '第44卷　第3期　2026年9月', HEI, 8, 'mist', onBand(15.8, 16),
    { align: 'right' }),
  line('title', '{titleText}', HEI, 17, 'ink', at('', 'top-left', 14),
    { fontWeight: 700, lineHeight: 1.45 }),
  line('authors', '{attr.authors}', KAI, 12, 'ink', at('title', 'below', 4)),
  line('affiliations', '{attr.affiliations}', SONG, 7.5, 'muted', at('authors', 'below', 2)),
] } };
// #endregion

// #region abstract: across both columns, its labels in 黑 the colour of the journal
// In 宋, not 楷: the one Kai on Fontsource is a Taiwan face (gotcha: cjk-face-region).
const calloutStyles = [{ id: 'abstract', span: 'page', backgroundEnabled: false,
  padding: { top: pt(0), bottom: pt(0), left: em(2), right: em(2) },
  marginTop: pt(0), marginBottom: pt(LEAD),
  body: { fontFamily: SONG, fontSize: pt(BODY), lineHeight: pt(LEAD), firstLineIndent: pt(0),
    textAlign: 'justify' } }];
const chipStyles = [{ id: 'label', fontFamily: HEI, bold: true, color: col('indigo'),
  backgroundEnabled: false, borderWidth: pt(0), paddingX: em(0), gap: em(0.5) }];
// #endregion

// Running heads on the body pages, the folio at the outer corner, over a hairline.
const head = (id, content, parity, edge, x, extra) => ({ kind: 'text', id, content, parity,
  pages: 'body', fontFamily: HEI, fontSize: pt(7.5), color: col('muted'), overflow: 'clip',
  align: edge, placement: { anchor: { to: 'page', edge: `top-${edge}` },
    offset: { x: mm(x), y: mm(12) } }, ...extra });
const folio = { fontWeight: 700, color: col('indigo') };
const header = { elements: [
  head('v-folio', '{pageNumber}', 'even', 'left', 15.8, folio),
  head('v-head', '示例出版研究　2026年第3期', 'even', 'left', 24),
  head('r-head', '赵一鸣，等：横排中文正文的行长与行距', 'odd', 'right', -24),
  head('r-folio', '{pageNumber}', 'odd', 'right', -15.8, folio),
  { kind: 'rule', id: 'head-rule', pages: 'body', thickness: pt(0.5), color: col('rule'),
    placement: { anchor: { to: 'page', edge: 'top-left' }, offset: { x: mm(15.8), y: mm(16.5) },
      size: { width: mm(AREA) } } },
] };

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: 'zh-Hans', // written out, never LANG (gotcha: cjk-locale-tag)
  colorPalette,
  citations,
  page: { width: mm(184), height: mm(260), dpi: 150, pageNumbering: { startAt: 41 },
    // 16开; with the grid on the margins are minimums, grown to centre the 23 × 40 area
    margins: { top: mm(22), bottom: mm(20), left: mm(15), right: mm(15), mirror: true } },
  layout: { layoutType: 'double', gutterWidth: pt(2 * BODY) },
  cjk: { grid: { enabled: true, charsPerLine: CHARS, linesPerPage: LINES } },
  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, fontWeight: 700, color: col('ink'),
    balancing: { enabled: false }, // heads stay on the grid
    levels: [
      { level: 1, breakBefore: { enabled: true, parity: 'any' } }, // headings-drop-h1-break
      { level: 2, numberingTemplate: '{2}', numberSeparator: '　', fontSize: pt(10.5),
        lineHeight: pt(2 * LEAD), marginTop: pt(0), marginBottom: pt(0) }, // 1　实验方法
      { level: 3, numberingTemplate: '{2}.{3}', numberSeparator: '　', fontSize: pt(BODY),
        lineHeight: pt(LEAD), marginTop: pt(0), marginBottom: pt(0) }, // 1.1　被试
    ] },
  headingStyles: [
    { id: 'article', numbered: false, span: 'page', advancedDesign: masthead },
    { id: 'intro', numbered: false }, // 引言 goes before section 1, unnumbered
    { id: 'references', numbered: false },
  ],
  calloutStyles,
  chipStyles,
  paragraphStyles: [{ id: 'colophon', fontFamily: SONG, fontSize: pt(6.5), lineHeight: pt(9),
    color: col('muted'), firstLineIndent: pt(0), textAlign: 'left', marginTop: pt(LEAD) }],
  header,
  footer: { elements: [] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "横排中文正文的行长与行距"
---

# 横排中文正文的行长与行距：\\一项纸本与屏幕的对照阅读实验 {style="article" authors="赵一鸣¹　孙雨桐²" affiliations="1. 示例大学新闻与传播学院，示例市　100000；2. 示例出版社排版中心，示例市　100000"}

:::callout{type="abstract"}
:chip[摘　要：]{style="label"}行长和行距是横排中文正文最基本的两个版式参数，现行出版物大多凭经验确定。本文以48名大学生为被试，比较每行20、28、36字三种行长与1.5倍、1.8倍两种行距在纸本和屏幕上的阅读速度与理解成绩。结果表明：行长为28字时阅读速度最快；行长增至36字，纸本上的理解成绩无显著变化，屏幕上则下降约6%；1.8倍行距的优势在长行条件下比在短行条件下明显。据此建议单栏横排书刊正文以每行26～30字为宜，行长超过32字时应相应加大行距。

:chip[关键词：]{style="label"}行长；行距；中文排版；阅读速度；屏幕阅读

:chip[文献标志码：]{style="label"}A　　:chip[文章编号：]{style="label"}1000-0000(2026)03-0041-04
:::

## 引言 {style="intro"}

行长与行距对阅读的影响，西文排版界讨论已久。Tinker在20世纪中叶以印刷品为材料做了大量易读性实验，认为最适宜的行长取决于字号和行距，不能脱离二者单独规定[@tinker1963]。近二十年来，眼动记录和屏幕阅读进入这一领域，研究者发现阅读速度与理解成绩并不总是同步变化，只用速度评价版式容易得出片面的结论[@rayner2016; @dyson2001; @lin2023]。

中文的情况与西文不同。汉字等宽，行长可以直接用字数计量，出版社也习惯以“每行字数×每页行数”规定版心，32开图书的正文多为每行26～28字[@zhou2019; @chen2021]。W3C的《中文排版需求》整理了中文版面的基本要素和术语[@clreq]，但行长、行距取什么值，仍由各出版社自行决定。

这些数值大多来自排版经验，以汉字为材料、同时比较纸本与屏幕的实证研究还很少。林岚等[@lin2023]测量了屏幕上三种行长的阅读速度，没有考察行距；王晓和李文[@wang2022]讨论了屏幕阅读中的行距，只用了一种行长。本研究把行长和行距放在同一个实验中，在纸本和屏幕上分别测量阅读速度和理解成绩，为书刊正文的版式设计提供依据。

## 实验方法

### 被试

示例大学本科生48名，其中男生21名、女生27名，年龄18～23岁，母语均为汉语，视力或矫正视力正常，此前均未参加过阅读实验。

### 材料与版式

从近年出版的科普读物中选取说明文24篇，每篇约600字，难度经预实验平衡。版式按3（行长：每行20、28、36字）×2（行距：1.5倍、1.8倍）设计，字号统一为五号（10.5 pt），字体为宋体，两端对齐。纸本材料用A4纸单面印刷；屏幕材料在27英寸显示器上呈现，调整显示比例，使字的视角大小与纸本一致。

### 程序与测量

每名被试在纸本和屏幕上各读12篇，媒介的先后顺序在被试间平衡，版式条件在篇目间轮换。每读完一篇，回答5道理解题。阅读速度以每分钟字数计，理解成绩以答对题数的百分比计。屏幕条件下同时记录眼动，采样率为1000 Hz。

## 结果

### 阅读速度

行长为28字时，纸本和屏幕上的阅读速度均为最快，平均每分钟分别读512字和486字。行长20字时，换行次数增多，速度下降4%左右；行长36字时，速度下降7%左右，眼动记录显示换行后的回视次数明显增加。行太短和太长都会降低速度，这与Tinker对西文的观察方向一致[@tinker1963]。

### 理解成绩

纸本上，三种行长的理解成绩差异不显著。屏幕上，行长36字时的理解成绩比28字时低约6%。行距的作用主要出现在长行条件下：行长36字时，1.8倍行距的理解成绩比1.5倍行距高约4%；行长20字时，两种行距几乎没有差别。

## 讨论

长行降低了屏幕阅读的理解成绩，原因可能在换行时的视线定位。行越长，眼睛从行尾回到下一行行首的距离越大，落点越容易偏离；加大行距，相邻两行分得更开，这类错误随之减少。这一解释与眼动研究对换行和回视的描述相符[@rayner2016]，也说明行长和行距需要一并考虑。

本研究的材料只有说明文，被试也限于大学生；文学作品和其他年龄段的读者是否表现出同样的规律，还需要进一步检验。屏幕条件只用了一种显示器，没有考察手机等小屏幕设备，那里的行长通常不到20字。

## 结论

单栏横排的中文书刊正文，每行26～30字是较稳妥的选择。行长超过32字时，行距宜加大到1.8倍左右。面向屏幕的版式比纸本更需要控制行长，不宜把纸本的版心原样搬到屏幕上。

## 参考文献 {style="references"}

:::bibliography{title=""}

:::paragraphs{style="colophon"}
A specimen article written for the Postext Cookbook. The journal, its authors, their experiment and the Chinese works [4]–[6] and [8] are fictitious; works [1]–[3] and [7] are real.
:::

:::references{format=csl-yaml}
- id: tinker1963
  type: book
  language: en
  author: [{family: Tinker, given: Miles A.}]
  title: Legibility of print
  publisher: Iowa State University Press
  publisher-place: Ames
  issued: 1963
- id: rayner2016
  type: article-journal
  language: en
  author: [{family: Rayner, given: Keith}, {family: Schotter, given: Elizabeth R.}, {family: Masson, given: Michael E. J.}, {family: Potter, given: Mary C.}, {family: Treiman, given: Rebecca}]
  title: "So much to read, so little time: how do we read, and can speed reading help?"
  container-title: Psychological Science in the Public Interest
  volume: 17
  issue: 1
  page: 4-34
  issued: 2016
  DOI: 10.1177/1529100615623267
- id: dyson2001
  type: article-journal
  language: en
  author: [{family: Dyson, given: Mary C.}, {family: Haselgrove, given: Mark}]
  title: The influence of reading speed and line length on the effectiveness of reading from screen
  container-title: International Journal of Human-Computer Studies
  volume: 54
  issue: 4
  page: 585-612
  issued: 2001
  DOI: 10.1006/ijhc.2001.0458
- id: lin2023
  type: article-journal
  language: zh-CN
  author: [{literal: 林岚}, {literal: 周明远}, {literal: 陈思齐}, {literal: 王晓}]
  title: 屏幕上横排中文的行长与阅读速度
  container-title: 示例出版研究
  volume: 41
  issue: 2
  page: 15-24
  issued: 2023
- id: zhou2019
  type: book
  language: zh-CN
  author: [{literal: 周明远}]
  title: 汉字排版概论
  publisher: 示例出版社
  publisher-place: 示例市
  issued: 2019
- id: chen2021
  type: thesis
  genre: 硕士学位论文
  language: zh-CN
  author: [{literal: 陈思齐}]
  title: 中文书刊版心设计研究
  publisher: 示例大学
  publisher-place: 示例市
  issued: 2021
- id: wang2022
  type: paper-conference
  language: zh-CN
  author: [{literal: 王晓}, {literal: 李文}]
  title: 屏幕阅读中的行距选择
  container-title: 第五届数字出版学术研讨会论文集
  editor: [{literal: 示例出版学会}]
  publisher: 示例出版社
  publisher-place: 示例市
  page: 88-95
  issued: 2022
- id: clreq
  type: webpage
  language: zh-CN
  author: [{literal: W3C}]
  title: 中文排版需求
  URL: https://www.w3.org/TR/clreq/
  accessed: 2026-09-30
:::
`; // 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'], // SONG: the text, the references, the affiliations
  'Noto Sans SC': ['400', '700'], // HEI: running heads; the journal, title, heads, labels
  'LXGW WenKai TC': ['400'], // KAI: the authors' names
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
// Each voice loads the files of what it sets, and the Song the words the style adds.
const all = (re) => (markdown.match(re) ?? []).join('');
const labels = all(/:chip\[[^\]]*\]/g);
const heads = `${all(/^#+ .*$/gm)}示例出版研究第卷期年月赵一鸣等横排中文正文的行长与行距`;
await loadFonts(FONTS, markdown);
await loadCjkFonts({ [SONG]: ['400'] }, `${markdown}等版卷期页`);
await loadCjkFonts({ [HEI]: ['400', '700'] }, `${heads}${labels}0123456789`);
await loadCjkFonts({ [KAI]: ['400'] }, all(/authors="[^"]*"/g));
const doc = await buildWithFonts(() => buildDocument({ markdown }, config()), markdown);
showPages(doc, { title: t({ en: 'A Chinese paper cited to GB/T 7714',
  es: 'Un artículo chino citado según la GB/T 7714' }) });
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 v2 ── the same in every recipe · postext.dev/cookbook
// Postext measures with the loaded faces and caches the widths: load every face
// before the first build, from Fontsource, the files the PDF embeds too.

/** 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.
 *  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',
    greek: 'U+0370-03FF',
  };
  const jobs = [];
  let added = 0;
  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 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 = `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` and loads any face the pages use that FONTS missed (a regular
 *  one with a warning), then clears the measurement cache and builds 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. */
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' };
}

/** 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, '-'); }

/** 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 v1 ── 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. */
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 v2 ── the same in every recipe that exports a PDF
/** The Fontsource files the screen used, as TrueType: the nearest weight the
 *  family ships, upright if it has no italic; latin, then what the face's
 *  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 more = kitSubsetsFor(text, meta);
  const files = await Promise.all(['latin', ...more].map(async (subset) => {
    const res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-${subset}-${w}-${s}.woff2`);
    if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`);
    return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
  }));
  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 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 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.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()));
  }));
}

/** 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. Latin comes first: postext-pdf draws a character from the first
 *  file that has it, as the browser takes a character both files hold from
 *  latin. 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 = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/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)]);
  return ext ? [latin, ext] : 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 ───────────────────────────────────────────────────────────────────────
```

## Variações

### Colchetes de canto em vez de sobrescritos

Algumas revistas imprimem os números das citações na linha, no corpo do texto. `marker` muda o jeito de marcar o número e não mexe no estilo: `'brackets'` dá [1] na linha, `'corner'` dá 〔1〕.

```diff
   locale: 'zh-CN', // 等, 卷, 版 and the other terms of the list
+  marker: 'brackets',
```

### Obras chinesas primeiro

Bibliografias mistas às vezes são ordenadas com as obras chinesas antes das ocidentais. Num estilo numérico os números deixam então de correr em ordem pela lista, por isso isto combina melhor com o estilo autor-data.

```diff
-  customStyle: GBT.replace(/<!-- (<layout[^>]*locale="en">[\s\S]*?<\/layout>)\s*-->/, '$1'),
+  customStyle: STYLES['china-national-standard-gb-t-7714-2015-author-date']
+    .replace(/<!-- (<layout[^>]*locale="en">[\s\S]*?<\/layout>)\s*-->/g, '$1'),
   locale: 'zh-CN', // 等, 卷, 版 and the other terms of the list
-  bibliography: { fontSize: em(7.5 / BODY), lineHeight: pt(12), entrySpacing: pt(1.5),
+  bibliography: { groupByLanguage: true, fontSize: em(7.5 / BODY), lineHeight: pt(12),
```

## Erros comuns

- **Marque o documento como zh-Hans ou zh-Hant, não com LANG.** As edições de uma receita são en e es, mas uma amostra chinesa é chinesa nas duas: `locale: LANG` a marcaria como inglês ou espanhol, hifenizaria as suas palavras latinas, chamaria as suas figuras de Figure ou Figura e daria ao PDF o idioma errado. Escreva você mesmo a marcação: 'zh-Hans' (convenções da China continental: quebra de linha GB, pontuação Kaiming) ou 'zh-Hant' (Taiwan: pontuação de largura inteira centralizada); 'zh-HK' para Hong Kong. Um 'zh' sozinho é lido como chinês simplificado continental. Uma amostra japonesa leva 'ja' (armadilha ja-locale-tag).
- **Fontes chinesas são carregadas em fatias, pelo bloco cjk.** O Fontsource serve uma família chinesa, japonesa ou coreana em cerca de cem arquivos por peso, cada um com um intervalo de caracteres. loadFonts baixa só o arquivo latin, então na tela os caracteres chineses vêm de uma fonte do sistema e são medidos errado, e o fontsourceProvider entrega ao PDF esse arquivo latin, que os imprime como caixas vazias. Inclua o bloco cjk do kit, chame loadCjkFonts(FONTS, markdown) depois de loadFonts (uma vez por voz, com o texto que ela compõe, quando o livro usa várias fontes CJK) e passe a renderToPdf fontProvider: cjkPdfProvider: os dois pegam os arquivos que contêm os caracteres do texto.
- **Em uma grade de caracteres, desative o balanceamento de colunas.** O balanceamento de colunas preenche uma página que termina curta (como quando um título mantido junto ao seu texto deixa linhas em branco no pé) acrescentando linhas da grade acima dos títulos e compondo um parágrafo com uma linha mais frouxa. Uma linha chinesa mais frouxa espaça os seus caracteres (0,13 eme em uma página GB/T 9704, muito acima de balancing.maxTracking), então os caracteres saem das colunas da grade e os títulos saem das suas linhas. Uma página contada em células deve terminar curta: defina headings.balancing: { enabled: false }.
- **Qualquer objeto headings desativa a quebra de página do H1.** Por padrão, um H1 salta para uma página ímpar (always-odd), mas passar qualquer objeto headings redefine esse padrão, então os capítulos ficam emendados e span: 'page' não faz nada. Declare de novo headings.levels[0].breakBefore: { enabled: true, parity } em toda configuração.
- **Coloque entre aspas cada valor do frontmatter.** O YAML lê title: 1984 como número e uma data como objeto Date, e valores que não são strings saem vazios nos placeholders e deixam o PDF sem título. Coloque cada valor entre aspas: title: "1984".
- **Carregue todas as fontes antes do layout.** O motor de layout mede o texto com as fontes que o navegador carregou e guarda as larguras em cache, então uma fonte que chega depois da primeira composição deixa quebras de linha erradas e um PDF que não corresponde mais à tela. Carregue antes todos os pesos e estilos e chame clearMeasurementCache() antes de recompor quando alguma chegar atrasada.

- Uma citação narrativa, `@zhou2019` sem colchetes, nomeia os autores e acrescenta o número, mas a chave continua pelos caracteres chineses que vierem depois, então `@zhou2019认为` é lido como uma chave que não existe. Escreva o nome no texto e a citação depois dele, `周明远[@zhou2019]认为`, como os artigos chineses já fazem.
- O estilo numérico incluído não imprime localizadores: `[@zhou2019, 页 45]` dá [5] sem a página. A GB/T 7714 põe a página depois do colchete, dentro do sobrescrito, [5]45; enquanto o estilo não fizer isso, escreva a página na frase.
- A LXGW WenKai TC, a única Kai do Fontsource, é uma fonte de Taiwan: desenha ，e 。 no meio da casa, e com `zh-Hans` o motor apara a metade direita da casa, o que corta o glifo. O resumo é composto em Noto Serif SC, e a Kai fica para os nomes dos autores, que não têm pontuação.
- Numa grade de caracteres, o balanceamento de colunas acrescentaria linhas acima dos títulos e espaçaria os caracteres de um parágrafo para encher uma coluna curta. `headings.balancing.enabled: false` mantém cada linha na grade, e a segunda coluna da página 1 termina três linhas mais curta: o título 2 结果 precisa das suas duas linhas e de duas de texto embaixo, então abre a página 2.

## Créditos

- Receita: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Tipos: Noto Serif SC (OFL-1.1), Noto Sans SC (OFL-1.1), LXGW WenKai TC (OFL-1.1)
- Código: MIT · Conteúdo de exemplo: CC-BY-4.0

## Relacionadas

- [Nº 087 · Um capítulo de tese citado em APA 7](https://postext.dev/pt/cookbook/apa-thesis-with-bibtex.md): Um capítulo de tese de doutorado cujas citações [@key, p. 33] saem em APA 7 pelo citeproc-js, com a lista de referências montada a partir de um bloco BibTeX. · Nível 2 (Intermediário) · Artigos e trabalhos acadêmicos, Relatórios
- [Nº 082 · Um documento oficial chinês pela GB/T 9704](https://postext.dev/pt/cookbook/chinese-official-document.md): Um aviso de quatro páginas em A4 pela norma nacional: 28 × 22 caracteres de 三号, timbre vermelho, títulos 一、（一）1.（1）, anexo e fólios “— 1 —”. · Nível 2 (Intermediário) · Relatórios
- [Nº 002 · Artigo em duas colunas com equações numeradas](https://postext.dev/pt/cookbook/journal-article-with-maths.md): Um artigo de física em duas colunas com fórmulas no texto e sete equações numeradas, compostas pelo MathJax da versão ?bundle e vetoriais no PDF. · Nível 3 (Avançado) · Artigos e trabalhos acadêmicos