かんたんな説明
中国語の本の1章を、上から下へ文字の並ぶ行で組みます。出典はどれも行の中の小さな2行の注で示し、章末に引用した文献を並べます。
できあがり
中国の印刷を論じた架空の本『版刻叢談』（「木版印刷をめぐる談話」）の、ある章の終わりの部分です。繁体字を使い、右から読む上から下への行で、右綴じの140×203mmの大32開の判型に組みます。章は宋版の版式を扱い、実在する5つの文献を引きます。各引用は、中国の本が何世紀にもわたって注釈を組んできた方法で組みます。夾注、つまり本文の半分の大きさの2行の注を、引用のある行の中に置くのです。行の残りに収まらない注は次の行の天へ続き、ページをまたいで続く注も1つあります。注は中国本土の参考文献の規格GB/T 7714—2015の注形式に従い、章の最後には引用した文献の番号付き一覧を置きます。英語の文献は横倒しです。同じ章の注をページの地に置くなら、No. 071のように組みます。
このレシピが答える質問
- 中国の規格GB/T 7714に従って、縦組みでも引用するには？
- シカゴ・スタイルで引用を脚注にし、2回目以降は短縮形にするには？
手短な答え
// The GB/T 7714 note style turns each citation into a note. notes: 'warichu' sets the note
// in the column where the citation stands, in two rows at half the text size, the right
// row read first; a note longer than what is left of the column goes on in the next one.
// The list at the chapter's end comes from :::bibliography{scope=chapter}, numbered in
// the order the works are cited. Latin words turn sideways in the notes and in the list.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const citations = {
style: 'china-national-standard-gb-t-7714-2015-note',
notes: 'warichu', // 夾注; 'footnote' sets the same notes at the foot of the page
bibliography: { fontSize: em(0.9), entrySpacing: pt(0) },
};
const cjk = {
grid: { enabled: true, charsPerLine: 36, linesPerPage: 15 },
warichu: { fontSize: em(0.5), color: col('ink') }, // no brackets: the half size sets it off
};
材料
- 機能
- 注による引用引用スタイルによる引用割注：行内の2行の注参考文献から作る文献一覧縦組み右綴じの本文字グリッド中国語の漢数字中国語の約物の幅中国語・日本語・韓国語のフォントデザインした章扉番号付き見出し柱とノンブルページの役割ごとの柱見開きの余白セマンティックカラーパレットPDFの書き出し
- 種類
- Noto Serif SC, Noto Sans SC, LXGW WenKai TC (SIL OFL 1.1)
- 素材
- なし：図はすべてコードで描画
作り方
#1 · 行の中に組む注形式
コードは上の手短な答えにあります。GB/T 7714の注形式（china-national-standard-gb-t-7714-2015-note）は注のスタイルで、各引用は文献名をすべて記した注になります（引用）。注のスタイルは、既定では注をページの地に送ります。notes: 'warichu'にすると、各注は行の中に残り、割注として組まれます。cjk.warichu.fontSize、つまり本文の半分の大きさの2行で、行の中央にそろえ、右の行から読みます（圏点と傍線、ルビ、割注）。Markdownはどのスタイルでも同じで、根拠を示す語のあとに[@su1999]と書きます。注は引用の位置、文末の。の前に入ります。
2行は部分ごとに埋めていきます。3行目の地には「宿白. 唐宋時期」までしか入らないので、これを3字と4字の2行に分けます。注の残りは次の行の天を、やはり2行で埋めます。2ページでは、Twitchettの注が最終行の地で始まり、読者はページをめくって続きを読みます。
#2 · 章末の引用文献
:::bibliography{title="本章引用書目" scope=chapter}は、書いた位置に一覧を組み、この章が引用した文献だけを並べます（参考文献の一覧）。文献はBibTeXのブロックから取ります。各項目はlangidにchineseかenglishを持ち、スタイルはそれを文献の言語として読みます。漢字で書かれた人名は分けずにそのまま残ります。一覧は初出の順に番号が振られ、項目の折り返しの行はラベルの下から始まります。
#3 · 繁体字を本土の規則で
locale: 'zh-Hant-CN'は、北京や上海の出版社が古典の研究書を組むように、繁体字を本土の規則で組むよう求めます。読点と句点は字面の右上に置き、縦組みの本は右綴じになります。引用もこのタグに従います。繁体字の表記はzh-TWのCSLロケールを選ぶので、スタイルが補う語も繁体字になります。Noto Serif SCは繁体字を本土の字形で描くので、この版に合います。台湾の書体LXGW WenKai TCは、約物のない章題だけに使います（数字がどうなるかは縦組みの数字で説明しています）。
注と一覧の中では、ラテン文字の題と4桁の年は横倒しになって行に沿って縦に流れます。ラベルの1のように中国語に隣り合う短い数字は、字面の中に正立します。
#4 · 罫に挟まれた章扉
// In the flow frame x runs down the column and y across the page, right to left, so a
// 'horizontal' rule is a vertical line on the sheet: three of them rule the two columns.
const [TITLE, PITCH] = [15, 1.6 * LEAD]; // pt: the title's size and its column pitch
const rule = (n) => ({ kind: 'rule', id: `rule-${n}`, direction: 'horizontal',
thickness: pt(n === 1 ? 0.4 : 0.8), color: col('vermilion'),
placement: { anchor: { to: 'container', edge: 'top-left' },
offset: { y: pt(LEAD + n * PITCH) }, size: { width: 'fill' } } });
// A line of PITCH in column n (0, 1), its characters centred between two rules.
const title = (id, content, n, family, size, weight) => ({ kind: 'text', id, content,
fontFamily: family, fontWeight: weight, fontSize: pt(size), lineHeight: PITCH / size,
color: col('ink'), letterSpacing: pt(size * 0.25), align: 'left',
placement: { anchor: { to: 'container', edge: 'top-left' },
offset: { x: pt(2 * BODY), y: pt(LEAD + n * PITCH) } } }); // two characters down
const opener = { enabled: true, minHeight: cols(5), slot: { elements: [
rule(0), rule(1), rule(2),
title('number', '{number}', 0, HEI, 12, 700), // 第三章 in the first column, in 黑
title('title', '{titleText}', 1, KAI, TITLE, 400), // the title in the second, in 楷
] } };
縦組みのページでは、見出しのデザインは流れの枠の中に組まれます。xは行を下へ、yはページの右端から横へ進むので、'horizontal'の罫は紙面では縦の線になります。3本の罫が、30.4pt離れた2つの行を囲みます。1行目に太い黒体の「第三章」、2行目に楷書の題が立ちます（幅と詳細デザイン）。章番号は見出しのstartAt=3とテンプレート第{1:一}章から、ノンブルはpageNumberingのtrad-chinese-informalで45から振ります。柱とノンブルはNo. 075と同じく小口に沿って縦に入ります（縦組みのテキスト要素）。
const palette = {
ink: '#22201c', vermilion: '#a8352a', muted: '#6d665d', paper: '#fbf8f1',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.vermilion })
.map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
レシピの全体
// ═══ Postext Cookbook · Nº 091 · Vertical Chinese with citations in inline notes ══════ // https://postext.dev/en/cookbook/vertical-book-with-jiazhu-citations // Code: MIT · Text: original (CC BY 4.0) · Pictures: none // Fonts: Noto Serif SC, Noto Sans SC, LXGW WenKai TC (SIL OFL 1.1) · Needs postext ≥ 1.12.0 import { buildDocument, renderPageToCanvas, clearMeasurementCache, registerCitationEngine, loadVerticalAlternates, } from 'https://esm.sh/postext'; import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf'; import { createCiteprocEngine, STYLES, LOCALES } from 'https://esm.sh/postext-citeproc'; const LANG = 'en'; // @lang: the language of the frame; the chapter is Chinese in both editions const RECIPE = 'vertical-book-with-jiazhu-citations'; // ─── 1 · Design ───────────────────────────────────────────────────────────── // #region palette: black ink, one vermilion for the opener's rules, the paper of the page const palette = { ink: '#22201c', vermilion: '#a8352a', muted: '#6d665d', paper: '#fbf8f1', }; const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id }); const colorPalette = Object.entries({ ...palette, 'main-color': palette.vermilion }) .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })); // #endregion const [SONG, HEI, KAI] = ['Noto Serif SC', 'Noto Sans SC', 'LXGW WenKai TC']; // 宋, 黑, 楷 const [BODY, LEAD] = [10.5, 19]; // pt: 五號 on a column pitch of 1.8 em const cols = (n) => pt(n * LEAD); // n columns across the page // #region answer: a note style set as 夾注, two half-size rows inside the column // The GB/T 7714 note style turns each citation into a note. notes: 'warichu' sets the note // in the column where the citation stands, in two rows at half the text size, the right // row read first; a note longer than what is left of the column goes on in the next one. // The list at the chapter's end comes from :::bibliography{scope=chapter}, numbered in // the order the works are cited. Latin words turn sideways in the notes and in the list. registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES })); const citations = { style: 'china-national-standard-gb-t-7714-2015-note', notes: 'warichu', // 夾注; 'footnote' sets the same notes at the foot of the page bibliography: { fontSize: em(0.9), entrySpacing: pt(0) }, }; const cjk = { grid: { enabled: true, charsPerLine: 36, linesPerPage: 15 }, warichu: { fontSize: em(0.5), color: col('ink') }, // no brackets: the half size sets it off }; // #endregion // #region opener: 第三章 and the title in two ruled columns, the text after a blank one // In the flow frame x runs down the column and y across the page, right to left, so a // 'horizontal' rule is a vertical line on the sheet: three of them rule the two columns. const [TITLE, PITCH] = [15, 1.6 * LEAD]; // pt: the title's size and its column pitch const rule = (n) => ({ kind: 'rule', id: `rule-${n}`, direction: 'horizontal', thickness: pt(n === 1 ? 0.4 : 0.8), color: col('vermilion'), placement: { anchor: { to: 'container', edge: 'top-left' }, offset: { y: pt(LEAD + n * PITCH) }, size: { width: 'fill' } } }); // A line of PITCH in column n (0, 1), its characters centred between two rules. const title = (id, content, n, family, size, weight) => ({ kind: 'text', id, content, fontFamily: family, fontWeight: weight, fontSize: pt(size), lineHeight: PITCH / size, color: col('ink'), letterSpacing: pt(size * 0.25), align: 'left', placement: { anchor: { to: 'container', edge: 'top-left' }, offset: { x: pt(2 * BODY), y: pt(LEAD + n * PITCH) } } }); // two characters down const opener = { enabled: true, minHeight: cols(5), slot: { elements: [ rule(0), rule(1), rule(2), title('number', '{number}', 0, HEI, 12, 700), // 第三章 in the first column, in 黑 title('title', '{titleText}', 1, KAI, TITLE, 400), // the title in the second, in 楷 ] } }; // #endregion // The fore-edge: the book's title or the chapter's down the outer margin, the folio low. const foreEdge = (id, content, parity, edge, y, pages) => ({ kind: 'text', id, content, parity, pages, writingMode: 'vertical-rl', fontFamily: HEI, fontSize: pt(8), color: col('muted'), overflow: 'clip', placement: { anchor: { to: 'outer', edge }, offset: { y: em(y) } }, }); const header = { elements: [ foreEdge('book', '{title}', 'even', 'top', 4, 'body'), foreEdge('chapter', '{chapterNumber} {chapterTitle}', 'odd', 'top', 4, 'body'), foreEdge('folio', '{pageNumber}', 'all', 'bottom', -5, 'all'), // Across the foot of the opening page, in the edition's language: what is invented. { kind: 'text', id: 'imprint', content: '{subtitle}', pages: 'opener', fontFamily: SONG, fontSize: pt(6.5), color: col('muted'), align: 'center', overflow: 'wrap', placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { y: mm(-9) }, size: { width: mm(100) } } }, ] }; const config = () => ({ // a factory: the engine caches resolved configs per object // Traditional characters to the mainland's rules, as Beijing and Shanghai publishers set // classical scholarship (gotcha: cjk-locale-tag). The citations follow it: zh-TW terms. locale: 'zh-Hant-CN', colorPalette, citations, cjk, page: { sizePreset: 'custom', width: mm(140), height: mm(203), dpi: 150, // 大32開 backgroundColor: col('paper'), margins: { top: mm(34), bottom: mm(26), left: mm(15), right: mm(19), mirror: true }, pageNumbering: { format: 'trad-chinese-informal', startAt: 45 } }, // 四十五 layout: { layoutType: 'single', writingMode: 'vertical-rl' }, // bound on the right bodyText: { fontFamily: SONG, fontSize: pt(BODY), lineHeight: pt(LEAD), color: col('ink'), boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'), textAlign: 'justify', firstLineIndent: em(2), indentAfterHeading: true, }, headings: { fontFamily: SONG, fontWeight: 700, color: col('ink'), balancing: { enabled: false }, // the columns stay on the grid levels: [{ level: 1, numberingTemplate: '第{1:一}章', numberSeparator: ' ', breakBefore: { enabled: true, parity: 'odd' }, // gotcha: headings-drop-h1-break marginBottom: pt(0), advancedDesign: opener }] }, header, footer: { elements: [] }, }); // ─── 2 · Content ──────────────────────────────────────────────────────────── const markdown = String.raw`---Markdownの見本 · 28行 · content.en.md
title: "版刻叢談" author: "沈硯秋" subtitle: "A specimen chapter written for the Postext Cookbook. The book and its author are invented; the five works cited are real." --- # 宋刻本的版式 {startAt=3} 雕版印書，始於唐而盛於宋。唐代的印本流傳至今的極少，所見多是佛經、曆書一類的零星之物，敦煌所出的咸通九年《金剛經》卷子，是其中有確切紀年的一件[@su1999]。到了宋代，經史子集都有了刻本，官府、書院、私家和書坊競相開雕，書的樣子也大體定了下來[@zhang1989]。後世講版本的人談到書葉的格局，總是從宋本說起。 一塊書版刻成一葉，四周用欄線圍住，叫作版框。欄線只有一道的稱「四周單邊」，外粗內細兩道的稱「四周雙邊」，只在左右兩邊用雙線的稱「左右雙邊」。框內用直線分行，每半葉幾行、每行幾字，叫作行款。同一地方的書坊往往沿用一種行款，所以著錄一部書，行款總是要記的，鑑定版本時也常用它來推斷刻書的地點和年代。 版框正中留出窄窄的一行，不刻正文，是為版心。印好的紙沿這一行對折，版心便落在書口上，翻檢時一眼可見。版心裏刻書名、卷次和葉碼，有時還刻上刻工的姓名和這一版的字數，那是當年計算工錢用的。版心上下各有一個形如魚尾的標記，叫作魚尾；魚尾到欄線之間若刻一道黑線，叫作黑口，空著不刻的叫作白口。 大體說來，浙江一帶的官刻和家刻，字體方整，多作白口、左右雙邊；福建建陽的坊刻，字體瘦勁，版式緊湊，常在框外左上角加一個小方格，刻上篇名，稱為書耳，便於讀者翻檢[@huang2005]。坊刻的書要賣得出去，處處替讀者打算，這一點從版式上也看得出來。 書末或目錄之後，常有一塊刻記，寫明何人於何年在何處刊行，有時兼作書坊的廣告，叫作牌記。牌記的形制有長方的，也有鐘形、亞字形的。後人鑑定版本，牌記是最直接的依據，可也最容易被書賈挖改作偽，所以不能單憑牌記下斷語，還要和行款、字體、紙墨、避諱字一起看。 西方學者系統地研究中國的雕版書，是二十世紀的事。Carter的專著第一次把中國印刷術的發明及其西傳完整地介紹給英語讀者[@carter1925]；Twitchett則從書業和讀者的角度，討論中古時期的印刷與出版[@twitchett1983]。兩書所談雖不限於版式，卻都把宋代看作雕版書定型的時代，和中國學者的看法相合。 :::bibliography{title="本章引用書目" scope=chapter} :::references{format=bibtex} @book{su1999, author = {宿白}, title = {唐宋時期的雕版印刷}, publisher = {文物出版社}, address = {北京}, year = 1999, langid = {chinese}} @book{zhang1989, author = {張秀民}, title = {中國印刷史}, publisher = {上海人民出版社}, address = {上海}, year = 1989, langid = {chinese}} @book{huang2005, author = {黃永年}, title = {古籍版本學}, publisher = {江蘇教育出版社}, address = {南京}, year = 2005, langid = {chinese}} @book{carter1925, author = {Carter, Thomas Francis}, title = {The invention of printing in China and its spread westward}, publisher = {Columbia University Press}, address = {New York}, year = 1925, langid = {english}} @book{twitchett1983, author = {Twitchett, Denis}, title = {Printing and publishing in medieval China}, publisher = {Frederic C. Beil}, address = {New York}, year = 1983, langid = {english}} :::`; // content.<lang>.md: the same Chinese text in both // ─── 3 · Fonts ────────────────────────────────────────────────────────────── const FONTS = { // every face the pages use, loaded before the build (gotcha: fonts-first) 'Noto Serif SC': ['400', '700'], // SONG: the text, notes, list, imprint; the list's title 'Noto Sans SC': ['400', '700'], // HEI: the fore-edge heads and folios; 第三章 'LXGW WenKai TC': ['400'], // KAI: the chapter's title }; // ─── 4 · Build & show ─────────────────────────────────────────────────────── // Each voice loads the files of what it sets; the Song also what the style writes. const heading = markdown.match(/^# (.*?)(?: \{.*\})?$/m)[1]; // the title, no attributes const book = markdown.match(/^title: "(.*)"/m)[1]; // 版刻叢談, the head of the even pages const numerals = '第章一二三四五六七八九十'; await loadFonts(FONTS, markdown); await loadCjkFonts({ [SONG]: ['400'] }, `${markdown}卷等頁`, { vertical: true }); await loadCjkFonts({ [HEI]: ['400'] }, `${heading}${book}${numerals}`, { vertical: true }); await loadCjkFonts({ [SONG]: ['700'] }, markdown.match(/bibliography\{title="([^"]*)"/)[1], { vertical: true }); await loadCjkFonts({ [HEI]: ['700'] }, numerals); await loadCjkFonts({ [KAI]: ['400'] }, heading); const doc = await buildWithFonts(() => buildDocument({ markdown }, config()), markdown); showBook(doc, { title: t({ en: 'Vertical Chinese with citations in inline notes', es: 'Chino vertical con citas en notas dentro del renglón' }) }); offerPdf(() => renderToPdf(doc, { fontProvider: cjkPdfProvider }), `${RECIPE}.pdf`);キット · core, fonts, viewer, pdf, cjk：全レシピ共通 · 453行
// ─── Kit ── helpers shared by every Cookbook recipe · postext.dev/cookbook ───── // ─── Kit · core v1 ── the same in every recipe · postext.dev/cookbook ───────── function mm(value) { return { value, unit: 'mm' }; } function pt(value) { return { value, unit: 'pt' }; } function em(value) { return { value, unit: 'em' }; } /** The sample language's string: t({ en: 'Figure', es: 'Figura' }). */ function t(strings) { return strings[LANG] ?? Object.values(strings)[0]; } /** A file in this recipe's assets folder, served from the Postext repo by jsDelivr. */ function asset(file) { return `https://cdn.jsdelivr.net/gh/drnachio/postext@main/cookbook/${RECIPE}/assets/${file}`; } // ─── Kit · fonts v1 ── the same in every recipe · postext.dev/cookbook ──────── // Postext measures text with the faces the browser has loaded, and caches the // widths, so every face must be ready before the first build. Faces come from // Fontsource: the same static files the PDF embeds, so screen and PDF agree. /** faces = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample: * letters beyond Latin-1 (č, ł, ő…) also load the latin-ext files. With * `optional`, a face Fontsource does not ship is skipped instead of failing. * Resolves to the number of faces added. */ async function loadFonts(faces, text = '', { optional = false } = {}) { kitStatus('Loading fonts…'); const ranges = { latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,' + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD', 'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,' + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF', }; const subsets = /[Ā-˿Ḁ-ỿ]/.test(text) ? ['latin', 'latin-ext'] : ['latin']; const jobs = []; let added = 0; for (const [family, specs] of Object.entries(faces)) { const id = fontsourceId(family); const meta = optional ? await fontsourceMeta(family) : null; for (const spec of new Set(specs)) { const weight = parseInt(spec, 10); const style = spec.endsWith('i') ? 'italic' : 'normal'; if (hasFace(family, weight, style)) continue; if (optional && !(meta?.weights.includes(weight) && meta.styles.includes(style))) continue; for (const subset of subsets) { const url = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-${subset}-${weight}-${style}.woff2`; const face = new FontFace(family, `url(${url}) format('woff2')`, { weight: String(weight), style, unicodeRange: ranges[subset] }); jobs.push(face.load().then((ready) => { document.fonts.add(ready); added++; }, () => { if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`); })); } } } await Promise.all(jobs).catch((error) => { kitFail(error); throw error; }); return added; } /** Runs `build` (a buildDocument or buildBundle call) and checks the faces * the pages use. A regular face missing from FONTS is loaded with a warning; * bold and italic variants are loaded when the family ships them. Then the * measurement caches are cleared and the build runs again. */ async function buildWithFonts(build, text = '') { const tried = new Set(); for (let round = 0; round < 3; round++) { kitStatus('Laying out…'); await new Promise(requestAnimationFrame); // let the status paint first const result = await Promise.resolve().then(build).catch((error) => { kitFail(error); throw error; }); const wanted = { base: {}, variants: {} }; for (const { font, base } of [result].flat().flatMap(fontStringsOf)) { const { family, weight, style } = parseFont(font); const key = `${family}|${weight}|${style}`; if (tried.has(key) || hasFace(family, weight, style)) continue; tried.add(key); (wanted[base ? 'base' : 'variants'][family] ??= []).push(`${weight}${style === 'italic' ? 'i' : ''}`); } if (Object.keys(wanted.base).length) { console.warn(`[cookbook] FONTS does not list ${JSON.stringify(wanted.base)}: loading them.`); } const added = await loadFonts(wanted.base, text) + await loadFonts(wanted.variants, text, { optional: true }); if (added === 0) return result; clearMeasurementCache(); } throw new Error('The fonts did not settle after three builds.'); } /** Every font string of the layout. `base` marks a block's own face; its * bold, italic and bold-italic variants are listed whether or not used. */ function fontStringsOf(doc) { const found = new Map(); const walk = (node) => { if (!node || typeof node !== 'object') return; if (Array.isArray(node)) { node.forEach(walk); return; } for (const [key, value] of Object.entries(node)) { if (typeof value === 'string' && /fontString$/i.test(key)) { found.set(value, found.get(value) || key === 'fontString'); } else if (value && typeof value === 'object') walk(value); } }; walk(doc.pages); walk(doc.blocks); return [...found].map(([font, base]) => ({ font, base })); } /** '700 37.5px Open Sans' / 'italic 400 13px "Source Serif 4"' → { family, weight, style }. * A string with no weight ('95.8px Young Serif', from a design text) is 400. */ function parseFont(font) { const m = /^(?:(italic|oblique)\s+)?(?:small-caps\s+)?(?:(\d+|bold|normal)\s+)?[\d.]+px\s+(.+)$/.exec(font.trim()); if (!m) throw new Error(`Unexpected font string: ${font}`); const weight = m[2] === 'bold' ? 700 : !m[2] || m[2] === 'normal' ? 400 : Number(m[2]); return { family: m[3].replace(/^["']|["']$/g, ''), weight, style: m[1] ? 'italic' : 'normal' }; } /** True when a loaded FontFace covers exactly this family, weight and style * (document.fonts.check() is also true for families nobody declared). */ function hasFace(family, weight, style) { for (const face of document.fonts) { if (face.status !== 'loaded' || face.style !== style) continue; if (face.family.replace(/^["']|["']$/g, '') !== family) continue; const [low, high = low] = face.weight.split(' ').map(Number); if (weight >= low && weight <= high) return true; } return false; } /** Fontsource's id for a family: 'Source Serif 4' → 'source-serif-4'. */ function fontsourceId(family) { return family.toLowerCase().replace(/\s+/g, '-'); } /** The weights and styles a family ships ({ weights: [400, 700], styles: ['normal', 'italic'] }), or null. */ function fontsourceMeta(family) { fontsourceMeta.cache ??= new Map(); const id = fontsourceId(family); if (!fontsourceMeta.cache.has(id)) { fontsourceMeta.cache.set(id, fetch(`https://api.fontsource.org/v1/fonts/${id}`) .then((res) => (res.ok ? res.json() : null), () => null)); } return fontsourceMeta.cache.get(id); } // ─── Kit · viewer v1 ── the same in every recipe · postext.dev/cookbook ─────── /** Shows the pages as facing spreads on a dark desk: the first page is a * recto on its own, then verso | recto pairs, as in a bound book. Pages * are painted when they scroll near the screen. */ function showPages(docs, { title, width = 460 } = {}) { const root = viewer(title); const pages = [docs].flat().flatMap((doc) => doc.pages.map((page) => ({ doc, page, n: (doc.pageIndexOffset ?? 0) + page.index }))); const spreads = []; let verso = null; for (const p of pages) { if (p.n % 2 === 1) { if (verso) spreads.push([verso, null]); verso = p; } else { spreads.push([verso, p]); verso = null; } } if (verso) spreads.push([verso, null]); const density = Math.min(window.devicePixelRatio || 1, 2); showPages.painter?.disconnect(); const painter = new IntersectionObserver((entries) => { for (const { isIntersecting, target } of entries) { if (!isIntersecting) continue; painter.unobserve(target); const { doc, page } = target.postext; renderPageToCanvas(page, doc, target, { scale: (width * density) / page.width }); } }, { rootMargin: '800px' }); showPages.painter = painter; root.replaceChildren(...spreads.map((pair) => { const spread = document.createElement('div'); spread.className = 'pt-spread'; for (const p of pair) { const figure = document.createElement('figure'); if (p) { const label = p.page.pageLabel || String(p.n + 1); const canvas = document.createElement('canvas'); canvas.postext = p; canvas.style.aspectRatio = `${p.page.width} / ${p.page.height}`; canvas.setAttribute('role', 'img'); canvas.setAttribute('aria-label', `Page ${label}`); const folio = document.createElement('figcaption'); folio.textContent = label; figure.append(canvas, folio); painter.observe(canvas); } else figure.className = 'pt-blank'; spread.append(figure); } return spread; })); kitStatus(`${pages.length} ${pages.length === 1 ? 'page' : 'pages'}`); document.documentElement.dataset.postext = 'ready'; return pages.length; } /** The desk, the bar and the error reporting, created once. */ function viewer(title) { if (!document.getElementById('pt-kit')) { document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit"> :root { color-scheme: dark; } body { margin: 0; background: #0e1014; color: #b9bcc4; font: 13px/1.45 system-ui, sans-serif; } #pt-bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 16px; background: rgb(14 16 20 / .92); backdrop-filter: blur(6px); border-bottom: 1px solid #23262d; } #pt-bar strong { color: #f4f1ea; font-weight: 600; } #pt-actions { display: flex; gap: 12px; margin-left: auto; } #pt-actions a, #pt-actions button { color: #d8a21a; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; } #pages { display: grid; justify-items: center; gap: 48px; padding: 32px 16px 72px; } .pt-spread { display: flex; } .pt-spread figure { margin: 0; width: min(460px, 44vw); } .pt-spread canvas { display: block; width: 100%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); } .pt-spread figure:first-child canvas { box-shadow: inset -14px 0 14px -14px rgb(0 0 0 / .18), 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); } .pt-spread figcaption { margin-top: 10px; text-align: center; font: 600 10px/1 system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #6c7079; } .pt-blank { visibility: hidden; } @media (max-width: 760px) { .pt-spread { flex-direction: column; gap: 32px; } .pt-spread figure { width: min(460px, 92vw); } .pt-blank { display: none; } } </style>`); document.body.insertAdjacentHTML('afterbegin', '<header id="pt-bar"><strong id="pt-title"></strong><span id="pt-status" role="status"></span><span id="pt-actions"></span></header>'); document.getElementById('pt-title').textContent = document.title || 'Postext'; addEventListener('error', (event) => kitFail(event.error ?? event.message)); addEventListener('unhandledrejection', (event) => kitFail(event.reason)); } if (title) document.getElementById('pt-title').textContent = title; return document.getElementById('pages') ?? document.body.appendChild(Object.assign(document.createElement('main'), { id: 'pages' })); } function kitStatus(text) { viewer(); document.getElementById('pt-status').textContent = text; } function kitFail(error) { document.documentElement.dataset.postext = 'error'; kitStatus(`Error: ${error?.message ?? error}`); } // ─── Kit · pdf v1 ── the same in every recipe that exports a PDF ────────────── /** postext-pdf embeds TrueType bytes. Fetch the Fontsource file the screen * used, snapping to a weight the family ships and falling back to upright * when it has no italic: the PDF asks for every face a block could use. */ async function fontsourceProvider(family, weight, style) { const id = fontsourceId(family); const meta = await fontsourceMeta(family); const weights = meta?.weights?.length ? meta.weights : [400, 700]; const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a)); const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style; const res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${w}-${s}.woff2`); if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} (${res.status})`); return decompressWoff2(new Uint8Array(await res.arrayBuffer())); } /** A "Build the PDF" button in the bar. Once built: "Open the PDF" (a new * tab, since CodePen's preview frame cannot show PDFs) and a download link. */ function offerPdf(makePdf, filename) { viewer(); const button = Object.assign(document.createElement('button'), { type: 'button', textContent: 'Build the PDF' }); button.dataset.postextPdf = filename; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Building the PDF…'; try { const bytes = await makePdf(); const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' })); const size = `${Math.max(1, Math.round(bytes.length / 1024))} KB`; button.replaceWith( Object.assign(document.createElement('a'), { href: url, target: '_blank', rel: 'noopener', textContent: 'Open the PDF ↗' }), Object.assign(document.createElement('a'), { href: url, download: filename, textContent: `Download ${filename} · ${size}` })); } catch (error) { button.disabled = false; button.textContent = 'Build the PDF'; kitFail(error); } }); document.getElementById('pt-actions').append(button); } // ─── Kit · cjk v1 ── Chinese, Japanese and Korean books · postext.dev/cookbook ─ // Fontsource ships a CJK family as about a hundred files per weight, each // declared in its stylesheet with the unicode-range it covers. The screen // loads the files the sample touches; the PDF gets the same files for the // characters its pages set in each face, and embeds each as a subset. // A book bound on the right (vertical text) is shown with its spreads // mirrored: page 1 alone on the left of the spine, then [3 | 2]. /** The files of a Fontsource face, read from its stylesheet: { url, range, * ranges }, the last declared first (the order the browser tries them in). */ function cjkSlices(family, weight, style) { cjkSlices.cache ??= new Map(); const id = fontsourceId(family); const css = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/${weight}${style === 'italic' ? '-italic' : ''}.css`; if (!cjkSlices.cache.has(css)) { cjkSlices.cache.set(css, fetch(css) .then((res) => { if (!res.ok) throw new Error(`Fontsource has no ${family} ${weight} ${style} (${res.status})`); return res.text(); }) .then((text) => [...text.matchAll(/@font-face\s*{([^}]*)}/g)].map(([, rule]) => { const range = /unicode-range:\s*([^;]+);/.exec(rule)?.[1].trim() ?? 'U+0-10FFFF'; const ranges = range.split(',').map((part) => { const [lo, hi = lo] = part.trim().slice(2).split('-'); return [parseInt(lo, 16), parseInt(hi, 16)]; }); return { url: new URL(/url\(([^)]+?\.woff2)\)/.exec(rule)[1], css).href, range, ranges }; }).reverse())); } return cjkSlices.cache.get(css); } /** The file of `slices` that holds code point `cp`, if any. */ function cjkSliceFor(slices, cp) { return slices.find((slice) => slice.ranges.some(([lo, hi]) => cp >= lo && cp <= hi)); } /** Whether Fontsource serves `family` as a Chinese, Japanese or Korean * family (its subsets name the script). Fails when the API does not * answer: a CJK face taken for a Latin one would paint in a system face. */ async function isCjkFamily(family) { const meta = await fontsourceMeta(family); if (!meta) throw new Error(`api.fontsource.org did not describe ${family}: reload to try again`); return !!meta.subsets?.some((subset) => /^(chinese|japanese|korean)/.test(subset)); } /** faces = { 'Noto Serif TC': ['400', '700'] }, as for loadFonts: the * whole FONTS object may be passed, its other families are left to * loadFonts. Adds one FontFace per file of each CJK face with its * unicodeRange, then loads the files `text` touches. `text` is what the * faces set: the sample for the text face; a book in several voices calls * it once per voice (loadCjkFonts({ 'LXGW WenKai TC': ['400'] }, quotes)), * so the heading and quotation faces fetch and check only their own * characters. Fails when a character of `text` is in no file of a face. * List every weight the pages use: a weight left to buildWithFonts gets * the latin file only. With { vertical: true } it also loads each * family's vertical forms (brackets, quotes, pause marks) for the canvas, * which needs loadVerticalAlternates imported from postext. Resolves to * the number of files loaded. */ async function loadCjkFonts(faces, text, { vertical = false } = {}) { kitStatus('Loading fonts…'); let loaded = 0; try { if (vertical && typeof loadVerticalAlternates !== 'function') { throw new Error('loadCjkFonts(…, { vertical: true }) needs loadVerticalAlternates imported from postext'); } for (const [family, specs] of Object.entries(faces)) { if (!(await isCjkFamily(family))) continue; const twin = []; for (const spec of new Set(specs)) { const weight = parseInt(spec, 10); const style = spec.endsWith('i') ? 'italic' : 'normal'; const slices = await cjkSlices(family, weight, style); const missing = [...new Set(text)].filter((ch) => /\S/.test(ch) && !cjkSliceFor(slices, ch.codePointAt(0))); if (missing.length) { throw new Error(`${family} ${spec} has no file for ${missing.slice(0, 12).join(' ')}: ` + `give each face the text it sets (loadCjkFonts({ '${family}': ['${spec}'] }, text))`); } for (const slice of slices) { document.fonts.add(new FontFace(family, `url(${slice.url}) format('woff2')`, { weight: String(weight), style, unicodeRange: slice.range })); twin.push({ source: slice.url, weight: String(weight), style, unicodeRange: slice.range }); } const font = `${style === 'italic' ? 'italic ' : ''}${weight} 16px "${family}"`; loaded += (await document.fonts.load(font, text)).length; if (!document.fonts.check(font, text)) throw new Error(`${family} ${spec} did not load for the sample`); } // The same files under a twin name with the `vert` feature on: the // canvas paints the punctuation of vertical lines with it. if (vertical && twin.length) await loadVerticalAlternates(family, twin); } } catch (error) { kitFail(error); throw error; } return loaded; } /** The PDF font provider for recipes with CJK faces: a family whose * Fontsource subsets are Chinese, Japanese or Korean gets the files that * hold the characters its pages set (`request.codePoints`); any other * family 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 ───────────────────────────────────────────────────────────────────────
組み立てたscript.jsはそのまま動きます。任意のページのモジュールスクリプトに貼り付けるか、レシピをCodePenで開いてください。 GitHub上のレシピのフォルダー ↗ (新しいタブで開きます)
アレンジ
#各注を括弧で囲む
夾注を本文の大きさの括弧で囲む版もあります。cjk.warichuは、引用を含むすべての注に括弧を付けます。
- warichu: { fontSize: em(0.5), color: col('ink') }, // no brackets: the half size sets it off
+ warichu: { fontSize: em(0.5), color: col('ink'), open: '〔', close: '〕' },#注の代わりに行の中に番号を
亀甲括弧を使うGB/T 7714の番号形式は、行の中に〔1〕を正立させて刷り、一覧はそのまま残ります。
- style: 'china-national-standard-gb-t-7714-2015-note',
- notes: 'warichu', // 夾注; 'footnote' sets the same notes at the foot of the page
+ style: 'china-national-standard-gb-t-7714-2015-numeric',
+ marker: 'corner', // 〔1〕, upright in vertical textよくあるつまずき
つまずき
文書のタグはLANGではなくzh-Hansかzh-Hantにする
レシピの版はenとesですが、中国語のサンプルはどちらの版でも中国語です。`locale: LANG`では英語やスペイン語とタグ付けされ、ラテン文字の語がハイフネーションされ、図にFigureやFiguraの表示名が付き、PDFの言語も誤ります。タグは自分で書いてください。'zh-Hans'（中国本土の慣習：GBの改行規則、開明式の約物）または'zh-Hant'（台湾：全角で中央に置く約物）、香港なら'zh-HK'です。単なる'zh'は簡体字、本土として読まれます。日本語のサンプルには'ja'を使います（つまずき「ja-locale-tag」）。 中国語の改行 →
つまずき
中国語の書体はcjkブロックを通じてスライス単位で読み込む
Fontsourceは中国語、日本語、韓国語のファミリーを、ウェイトごとに約100個のファイルとして配信し、各ファイルが文字の範囲を受け持ちます。loadFontsが取得するのはlatinファイルだけなので、画面では漢字がシステムの書体で出て計測が狂い、fontsourceProviderはPDFにそのlatinファイルを渡すため、漢字が空の四角で印字されます。キットのcjkブロックを挙げ、loadFontsのあとにloadCjkFonts(FONTS, markdown)を呼び（本で複数のCJK書体を使うときは、それぞれの書体で組むテキストを渡して書体ごとに1回）、renderToPdfにfontProvider: cjkPdfProviderを渡してください。どちらもテキストの文字を含むファイルを取得します。 中国語・日本語・韓国語のフォント →
つまずき
各地域の約物はその地域の書体で組む
約物の幅の処理は、各記号の横の空きを、フォントが描く側ではなく、文書の地域が置く側に移します。zh-Hansでは開明式の読点は箱の左半分を残し（簡体字の書体はそこにグリフを描きます）、右半分を手放します。繁体字の書体は，。を箱の中央に描くため、手放す半分にグリフの一部があり、読点が次の文字に食い込みます。Fontsourceで唯一の楷書の本文書体であるLXGW WenKai TCは、簡体字のテキストでこうなります。本土のテキスト、注、引用はNoto Serif SCかNoto Sans SCで組み、TCの書体はzh-Hantに取っておき、簡体字の毛筆書体（Ma Shan Zheng）は表示用の行だけに使ってください。デザインのテキストには約物の幅の処理がかからないためです。LXGW WenKai TCは、本土の規格も台湾の規格も使わない伝承字形も描きます。爲の爫の頭を持つ為や、卩の足を持つ令（冷、領の中も）です。この書体で組むページの文字を確認してください。 中国語の約物の幅 →
つまずき
右綴じの本の見開きはshowBookで表示する
右綴じの本（アラビア語、ヘブライ語、ペルシア語のテキスト、縦組みの中国語、またはpage.binding 'right'）でも1ページは奇数ページですが、背の左側に来て、見開きは[3 | 2]と並びます。showPagesはどの本も左綴じとして並べます。bookブロックのshowBook（cjkブロックにも同じ関数があります）はdoc.bindingを読み、見開きを左右反転します。capture.heroでは、見開きは引き続き読む順の[偶数ページ, 奇数ページ]、つまり[2, 3]と指定します。 右綴じの本 →
つまずき
文字グリッドでは段末そろえを切る
段末そろえは、本文と一緒に送った見出しが末尾に空行を残したときのように短く終わるページを、見出しの上にグリッドの行を加えたり、段落を1行ゆるく組んだりして埋めます。中国語の行をゆるく組むと文字の間が広がる（GB/T 9704のページで0.13 em、balancing.maxTrackingをはるかに超えます）ため、文字はグリッドの列から外れ、見出しは自分の行から外れます。升目で数えるページは、短く終わらせてください。headings.balancing: { enabled: false }を設定します。 文字グリッド →
つまずき
headingsオブジェクトを渡すとH1の改ページが消える
既定ではH1は奇数ページへ改ページします（always-odd）。ところがheadingsオブジェクトを渡すと中身にかかわらずこの既定がリセットされ、章は改ページせずに続けて組まれ、span: 'page'も効かなくなります。どの設定でもheadings.levels[0].breakBefore: { enabled: true, parity }を書き直してください。 奇数ページから始まる章 →
つまずき
フロントマターの値はすべて引用符で囲む
YAMLはtitle: 1984を数値として、日付をDateオブジェクトとして読みます。文字列でない値はプレースホルダーに空で出力され、PDFにもタイトルが付きません。値はすべて引用符で囲んでください（title: "1984"）。 文書のメタデータ →
つまずき
レイアウトの前にすべてのフォントを読み込む
レイアウトはブラウザーが読み込んだフォントで文字を計測し、その幅をキャッシュします。最初のビルドのあとに届いたフォントがあると改行位置が狂い、PDFも画面と一致しなくなります。すべてのウェイトとスタイルを先に読み込み、遅れて届いたときは再ビルドの前にclearMeasurementCache()を呼んでください。 レイアウト前のフォント読み込み →
- 注のスタイルは、2度目に引用する文献を短い形で書き、GB/T 7714の注形式はそれを「注1に同じ」の意の「同1」に縮めます。割注には番号がないので、読者は注1を探せません。この章は各文献を1度ずつしか引用していません。同じ文献を再び引くテキストでは、2度目の引用を手で書くか、2つ目のアレンジの番号形式を使います。
- スタイルは中国語の項目に、規格の刷り方どおり欧文の約物を書き込みます（
宿白. 唐宋時期的雕版印刷[M]. 北京: 文物出版社, 1999.）。縦組みの行の中でも、これらの約物は欧文の形のままです。本文の。や，と違って、横倒しになり、1字分より狭い幅しか取りません。 - 割注の1行は本文の半分の大きさです。本文が10.5ptなら各行は5.25ptで、ページでいちばん小さな文字になります。本文を五号以上で組むか、
cjk.warichu.fontSizeを大きくします。2行はいつも1行分の幅を分け合います。
クレジット
- 本文
- 書き下ろしの文章, CC BY 4.0
- フォント
- Noto Serif SC (SIL OFL 1.1) · Noto Sans SC (SIL OFL 1.1) · LXGW WenKai TC (SIL OFL 1.1)
