# 右綴じの縦組みで組む中国語の小説 > 台湾の25開のページに組んだ『三国志演義』第1回。1行40字で16行、罫で囲んだ回目の章扉、小口の柱、漢数字のノンブル、右から左へ読む見開き。 - HTML版: https://postext.dev/ja/cookbook/vertical-novel-right-bound - レシピ No. 075 · ページとグリッド · 難易度 3 (上級) · 出力: Canvas, PDF - ジャンル: 小説・戯曲・文芸 - 必要なもの postext ≥ 1.9.0, postext-pdf ≥ 1.9.0 · テスト環境 1.16.1, postext-pdf 1.16.1 ／テスト日 2026-10-05 - ページ: [一](https://postext.dev/cookbook/vertical-novel-right-bound/en/p01.webp?v=0b517347), [二](https://postext.dev/cookbook/vertical-novel-right-bound/en/p02.webp?v=0b517347), [一](https://postext.dev/cookbook/vertical-novel-right-bound/en/p03.webp?v=0b517347), [二](https://postext.dev/cookbook/vertical-novel-right-bound/en/p04.webp?v=0b517347), [三](https://postext.dev/cookbook/vertical-novel-right-bound/en/p05.webp?v=0b517347), [八](https://postext.dev/cookbook/vertical-novel-right-bound/en/p10.webp?v=0b517347), [九](https://postext.dev/cookbook/vertical-novel-right-bound/en/p11.webp?v=0b517347) - PDF: https://postext.dev/cookbook/vertical-novel-right-bound/en/vertical-novel-right-bound.pdf?v=0b517347 - Sandboxで開く: https://postext.dev/ja/sandbox#recipe=vertical-novel-right-bound&lang=en (.postext: https://postext.dev/cookbook/vertical-novel-right-bound/en/vertical-novel-right-bound.postext) - 最終更新: 2026-09-30 - 他の言語: [en](https://postext.dev/en/cookbook/vertical-novel-right-bound.md), [es](https://postext.dev/es/cookbook/vertical-novel-right-bound.md), [ca](https://postext.dev/ca/cookbook/vertical-novel-right-bound.md), [zh](https://postext.dev/zh/cookbook/vertical-novel-right-bound.md), [ar](https://postext.dev/ar/cookbook/vertical-novel-right-bound.md) ## かんたんな説明 中国の古典小説の第1章を、台湾の並製本として組んだ例です。文字は上から下への行に並び、行は右から左へ読み進め、本は右側から開きます。 ## できあがり 台湾の並製本で組んだ『三国志演義』の11ページです。毛宗崗の改訂本による第1回の全文を、右綴じの148 × 210mmのページ（25開）に、右から読む上から下への行で組みます。扉は背の左側に単独で置かれます。次の見開きでは、1592年に彫られた桃園の誓いの木版画が章の始まりと向き合い、章の始まりでは第一回とその対句が朱色の罫のあいだに立ちます。本文のページはどれも1行40字で16行を収め、各文字は自分のマスの中央に置かれます。書名は右ページの外側の余白を、章名は左ページの外側の余白を縦に下り、その下に漢数字のノンブルがあります。同じ本の構成をヨーロッパの並製本で組んだのが[No. 038](https://postext.dev/ja/cookbook/trade-paperback-novel.md)です。 **このレシピが答える問い:** - 中国語の小説を右綴じの縦組みにし、第一回の見出しと漢数字のノンブルを入れるには？ - 章番号を第一回、第二回のように漢数字で振るには？ ## 手短な答え ```js // script.js, 行 35–52 // 'vertical-rl' turns the flow a quarter turn: lines run down, columns from right to left, // and page.binding 'auto' becomes 'right', so page 1 is a left-hand page and the spreads // read [3 | 2]. The grid sets the type area in characters; the margins are minimums it // grows. zh-Hant resolves to Taiwan's rules: every mark full width and centred in its cell. const page = { sizePreset: 'custom', width: mm(148), height: mm(210), dpi: 150, backgroundColor: col('paper'), // 天頭 above 地腳; left is the spine side (the right edge of a left-hand page). margins: { top: mm(32), bottom: mm(26), left: mm(16), right: mm(22), mirror: true }, pageNumbering: { format: 'trad-chinese-informal' }, // folios 一, 二 … 九, from the chapter }; const layout = { layoutType: 'single', writingMode: 'vertical-rl' }; const cjk = { grid: { enabled: true, charsPerLine: 40, linesPerPage: 16 } }; const chapter = { level: 1, numberingTemplate: '第{1:一}回', numberSeparator: '　', // 第一回　宴桃園… breakBefore: { enabled: true, parity: 'odd' }, // gotcha: headings-drop-h1-break marginBottom: pt(0), }; ``` ## 材料 **学べること** - [縦組み](https://postext.dev/ja/docs/configuration.md#縦組み): 中国語と日本語を上から下へ、右から読む行で組みます（layout.writingMode 'vertical-rl'）。段組みは上下に積む段になり、図と表は正立したまま、約物は縦組み用の字形になります。 - [右綴じの本](https://postext.dev/ja/docs/configuration.md#綴じ): page.binding 'right'（縦組みと右から左のテキストでは既定）は、奇数ページを背の左側に置きます。見開きの余白は入れ替わり、見開きは[3 | 2]と並び、PDFは右から左に開きます。 - [中国語の漢数字](https://postext.dev/ja/docs/configuration.md#ノンブル): ノンブル、リスト、見出し、図のカウンターを中国語の漢数字で表します（simp-chinese-informal、trad-chinese-informal、cjk-decimal…）。第{1:一}回のような見出しのテンプレートで、第一回、第二回と組めます。 **ほかに使うもの** - [中国語の改行](https://postext.dev/ja/docs/configuration.md#東アジアの組版) - [中国語の約物の幅](https://postext.dev/ja/docs/configuration.md#約物の幅) - [文字グリッド](https://postext.dev/ja/docs/configuration.md#文字グリッド) - [中国語・日本語・韓国語のフォント](https://postext.dev/ja/docs/configuration.md#中国語日本語韓国語のフォント) - [デザインした章扉](https://postext.dev/ja/docs/configuration.md#幅と詳細デザイン) - [見出しスタイル](https://postext.dev/ja/docs/configuration.md#見出しスタイル) - [見出しの属性](https://postext.dev/ja/docs/document-format.md#見出しの属性) - [番号付き見出し](https://postext.dev/ja/docs/configuration.md#レベルごとの上書き) - [タイトル内の改行](https://postext.dev/ja/docs/document-format.md#タイトル内の改行) - [柱とノンブル](https://postext.dev/ja/docs/configuration.md#柱とノンブル) - [節ごとの柱](https://postext.dev/ja/docs/configuration.md#見出しスタイル) - [ページの役割ごとの柱](https://postext.dev/ja/docs/configuration.md#テキスト要素) - [見開きの余白](https://postext.dev/ja/docs/configuration.md#見開きの余白) - [段落スタイル](https://postext.dev/ja/docs/configuration.md#段落スタイル) - [ページデザインの画像](https://postext.dev/ja/docs/configuration.md#画像要素) - [PDFの書き出し](https://postext.dev/ja/docs/configuration.md#pdfの生成) - [用紙の色](https://postext.dev/ja/docs/configuration.md#ページ) - [PDFに埋め込むフォント](https://postext.dev/ja/docs/configuration.md#なぜフォントプロバイダーが必要か) - [リソースとしての図と表](https://postext.dev/ja/docs/document-format.md#リソース) - [ローマ数字の前付け](https://postext.dev/ja/docs/document-format.md#numbering) - [番号のない章](https://postext.dev/ja/docs/configuration.md#見出しスタイル) **設定の一覧** - [`bodyText`](https://postext.dev/ja/docs/configuration.md#本文), [`cjk`](https://postext.dev/ja/docs/configuration.md#東アジアの組版), [`colorPalette`](https://postext.dev/ja/docs/configuration.md#カラーパレット), [`footer`](https://postext.dev/ja/docs/configuration.md#柱とノンブル), [`header`](https://postext.dev/ja/docs/configuration.md#柱とノンブル), [`headingStyles`](https://postext.dev/ja/docs/configuration.md#見出しスタイル), [`headings`](https://postext.dev/ja/docs/configuration.md#見出し), [`layout`](https://postext.dev/ja/docs/configuration.md#レイアウト), [`locale`](https://postext.dev/ja/docs/configuration.md#ハイフネーション), [`page`](https://postext.dev/ja/docs/configuration.md#ページ), [`paragraphStyles`](https://postext.dev/ja/docs/configuration.md#段落スタイル) **API** - [`buildDocument`](https://postext.dev/ja/docs/configuration.md#文書のビルド), [`clearMeasurementCache`](https://postext.dev/ja/docs/configuration.md#計測キャッシュ), [`decompressWoff2`](https://postext.dev/ja/docs/configuration.md#ブラウザー向けフォントプロバイダーfontsource--woff2), `loadVerticalAlternates`, [`registerResourceImage`](https://postext.dev/ja/docs/architecture.md#apiの概要), [`renderPageToCanvas`](https://postext.dev/ja/docs/configuration.md#ページをビットマップに描画する), [`renderToPdf`](https://postext.dev/ja/docs/configuration.md#pdfの生成) **書体** - Noto Serif TC (OFL-1.1), LXGW WenKai TC (OFL-1.1), Noto Sans TC (OFL-1.1), Source Serif 4 (OFL-1.1) ## 作り方 ### 1 · ページを4分の1回転させ、右で綴じる コードは上の[手短な答え](#手短な答え)にあります。`layout.writingMode: 'vertical-rl'`は、各ページを、時計回りに4分の1回転させた横組みのページとしてレイアウトします。流れの1行が文字の縦の行になって右から読まれ、改行、両端そろえ、2字の字下げは行を下へ向かって働きます（[縦組み](/ja/docs/configuration#縦組み)）。`page.binding`は`'auto'`のままにします。縦組みの本はこれで右綴じになります。1ページ目は奇数ページのままですが左ページになり、`mirror: true`でそのページの内側の余白`left`が右側に来ます（[綴じ](/ja/docs/configuration#綴じ)）。キットの`showBook`は本を開いたとおりに見開きを並べ、1ページ目を単独で、続いて`[3 | 2]`と置きます。PDFは`/Direction /R2L`でビューアーに同じ順序を求めます。Acrobatはこれに従い、Chromeのビューアーは無視します。 [文字グリッド](/ja/docs/configuration#文字グリッド)は、版面を縦に10.5ptの40字、横に19ptの16行とし、148.2 × 107.2mmにします。`page`の余白は最小値です。グリッドは向かい合う余白を同じだけ広げ、天を33.9mm、地を27.9mm、のどを17.4mm、小口を23.4mmにします。`locale: 'zh-Hant'`で東アジアの設定は台湾の値になります。約物はどれも全角で自分のマスの中央に置かれ、約物どうしが続いても詰めません。`trad-chinese-informal`でノンブルは一から九まで刷られ、`第{1:一}回`が章に番号を振ります（[ノンブル](/ja/docs/configuration#ノンブル)）。 ### 2 · 回目を2行で罫に挟む ```js // script.js, 行 56–77 // 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 title columns. const [TITLE, PITCH] = [13.5, 1.5 * LEAD]; // pt: the couplet's size and its column pitch const rule = (n) => ({ kind: 'rule', id: `rule-${n}`, direction: 'horizontal', thickness: pt(0.5), color: col('vermilion'), placement: { anchor: { to: 'container', edge: 'top-left' }, offset: { y: pt(LEAD + n * PITCH) }, size: { width: 'fill' } } }); const title = (id, content, x, family, weight) => ({ kind: 'text', id, content, fontFamily: family, fontWeight: weight, fontSize: pt(TITLE), lineHeight: PITCH / TITLE, color: col('ink'), align: 'left', // the head of the column placement: { anchor: { to: 'container', edge: 'top-left' }, offset: { x: pt(x), y: pt(LEAD) } } }); // a line of PITCH, centred between two rules const opener = { enabled: true, minHeight: cols(5), // a blank column, the two title columns, a blank one: 5 × 19 pt slot: { elements: [ rule(0), rule(1), rule(2), title('number', '{number}', 2 * BODY, SONG, 700), // 第一回, two characters down // The couplet's two halves, broken by the \\ in the heading, start level with each other. title('couplet', '{titleText}', 2 * BODY + 4 * TITLE, KAI, 400), ] }, }; ``` 縦組みのページでは、見出しのデザインは流れの枠の中に組まれます。`x`は版面の天から行を下へ、`y`はページの右端から横へ進みます。そのため`'horizontal'`の罫は紙面では縦の線になり、長さは行と同じです。0.5ptの3本の罫が、28.5pt離れた2つの題の行を囲みます。本文の行送りの1.5倍です。どちらの行も高さ28.5ptの行で、文字はその中央、2本の罫のちょうどあいだに立ちます。`{number}`はNoto Serif TC Boldで第一回を2字下げて組み、`{titleText}`はLXGW WenKai TCで対句をその1字あとから組みます。見出しは`# 宴桃園豪傑三結義 \\ 斬黃巾英雄首立功`と書き、強制改行で後半を次の行に送って、前半と頭をそろえます。`minHeight`は19ptの行を5行分確保するので、本文はグリッドに乗って始まります（[幅と詳細デザイン](/ja/docs/configuration#幅と詳細デザイン)）。柱やPDFのしおりのように題を1行で読む場所では、改行は全角スペースになります。 ### 3 · 柱とノンブルを小口に沿って縦に置く ```js // script.js, 行 81–90 const foreEdge = (id, content, parity, edge, y, pages) => ({ kind: 'text', id, content, parity, pages, writingMode: 'vertical-rl', fontFamily: HEI, fontSize: pt(8.5), color: col('muted'), overflow: 'clip', placement: { anchor: { to: 'outer', edge }, offset: { y: em(y) } }, }); const header = { elements: [ foreEdge('book', '{title}', 'even', 'top', 4, 'body'), // 三國演義 on the right-hand page foreEdge('chapter', '{chapterNumber}　{chapterTitle}', 'odd', 'top', 4, 'body'), foreEdge('folio', '{pageNumber}', 'all', 'bottom', -5, 'all'), // on openers too ] }; ``` 台湾の縦組みの本では、柱とノンブルを外側の余白に縦に置くことがよくあります。`writingMode: 'vertical-rl'`はヘッダーの要素を紙面の上から下へ組み、`anchor.to: 'outer'`はそれを外側の余白に置きます。右綴じの本では、奇数ページの左の余白、偶数ページの右の余白です（[縦組みのテキスト要素](/ja/docs/configuration#縦組みのテキスト要素)）。オフセットは、要素自身の8.5ptを単位とするemで表します。本文の文字サイズの約80%です。柱は版面の天から4字下で始まり、ノンブルは版面の地から5字上で終わります。`parity`は右ページに「三國演義」を、左ページに章名を置きます。`pages: 'body'`は章の最初のページから両方の柱を外しますが、ノンブルは残します。 ### 4 · 口絵を章の前に置く ```js // script.js, 行 94–157 const none = { elements: [] }; // A point of a page design in the flow frame: mm down the column, mm leftward across the // page from the right edge of the type area. const at = (down, across) => ({ anchor: { to: 'container', edge: 'top-left' }, offset: { x: mm(down), y: mm(across) } }); // The title slip (題簽), 96 × 22 mm: its axis, 55 mm in from the right of the type area, is // the axis of the page, and of the imprint under it. const SLIP = { down: 10, across: 44, long: 96, wide: 22 }; const AXIS = SLIP.across + SLIP.wide / 2; const slip = (id, inset, thickness) => ({ kind: 'box', id, placement: { ...at(SLIP.down + inset, SLIP.across + inset), size: { width: mm(SLIP.long - 2 * inset), height: mm(SLIP.wide - 2 * inset) } }, style: { borderColor: col('vermilion'), borderWidth: pt(thickness) } }); const RUN = (4 * 40 + 3 * 10) * PT; // 三國演義 down the slip: four 40 pt characters, 3 gaps const titlePage = { id: 'title', numbered: false, toc: false, span: 'page', header: none, breakBefore: { enabled: true, parity: 'any' }, footer: { elements: [{ kind: 'text', id: 'imprint', content: '{attr.colophon}', fontFamily: ROMAN, fontSize: pt(6.5), lineHeight: 1.4, color: col('muted'), // In the edition's language, set across and centred on the axis: the box runs from the // left of the type area (16 columns) as far past the axis. Each \n in the attribute // starts a line, and *…* sets the book's title in italic. inlineMarks: true, overflow: 'wrap', align: 'center', placement: { anchor: { to: 'container', edge: 'top-left' }, offset: { y: mm(4) }, size: { width: mm(2 * (16 * LEAD * PT - AXIS)) } } }] }, advancedDesign: { enabled: true, minHeight: cols(16), slot: { elements: [ slip('slip', 0, 1.4), slip('slip-in', 1.2, 0.4), // a heavy and a light vermilion rule { kind: 'text', id: 'book', content: '{titleText}', fontFamily: SONG, fontWeight: 700, fontSize: pt(40), lineHeight: 1, letterSpacing: pt(10), color: col('ink'), placement: at(SLIP.down + (SLIP.long - RUN) / 2, AXIS - 20 * PT) }, // 40 pt line on the axis { kind: 'text', id: 'author', content: '{author}　著', fontFamily: KAI, fontSize: pt(12), color: col('ink'), placement: at(52, 72) }, { kind: 'text', id: 'editor', content: '{attr.editor}', fontFamily: KAI, fontSize: pt(12), color: col('ink'), placement: at(52, 80) }, ] } }, }; // The woodcut, 138 mm tall in a double frame (四周雙邊), hangs from the top right corner of // the type area, and its caption runs down the column on its left. In the flow frame a // box's width runs down the page: the picture's width is its height on the sheet, and it // stands upright in the canvas, the HTML and the PDF. const PLATE = { right: 8.3, top: 5.1, h: 138, w: (138 * 806) / 1427 }; // mm const frame = (id, inset, thickness) => ({ kind: 'box', id, placement: { ...at(PLATE.top - inset, PLATE.right - inset), size: { width: mm(PLATE.h + 2 * inset), height: mm(PLATE.w + 2 * inset) } }, style: { borderColor: col('ink'), borderWidth: pt(thickness) } }); const plate = { id: 'plate', numbered: false, toc: false, span: 'page', header: none, footer: none, breakBefore: { enabled: true, parity: 'any' }, advancedDesign: { enabled: true, minHeight: cols(16), slot: { elements: [ { kind: 'image', id: 'woodcut', resourceId: 'peach-garden', placement: { ...at(PLATE.top, PLATE.right), size: { width: mm(PLATE.h), height: 'auto' } } }, frame('inner', 1.6, 0.4), frame('outer', 2.8, 1.4), { kind: 'text', id: 'caption', content: '{titleText}', fontFamily: HEI, fontSize: pt(9), color: col('ink'), placement: at(PLATE.top - 2.8, PLATE.right + PLATE.w + 7) }, { kind: 'text', id: 'note', content: '{attr.note}', fontFamily: KAI, fontSize: pt(8), color: col('muted'), placement: at(PLATE.top - 2.8, PLATE.right + PLATE.w + 12) }, ] } }, }; const resources = [{ id: 'peach-garden', typeId: 'figure', kind: 'bitmap', createdAt: 0, updatedAt: 0, bitmap: { fileId: 'peach-garden.jpg', format: 'jpeg', width: 806, height: 1427 }, caption: '桃園結義', altText: '桃園結義圖：劉備、關羽、張飛立於祭桌前，桌上香爐燭臺與三杯酒，旁有烏牛白馬。', }]; ``` 扉と口絵は、それぞれ専用のスタイルを持つレベル1の見出し`# 三國演義 {style="title" …}`と`# 桃園結義 {style="plate" …}`です。`numbered: false`で数に入らないので、章は第一回のままです。また、どちらも空の`header`を持ち、それが小口の柱を置き換えます。章の`breakBefore`は奇数ページを求めるので、章は3ページ目から始まり、その見開きの右側に口絵があります。読者は本文の前に絵を見ることになり、繡像本と同じ並びです（[見出しスタイル](/ja/docs/configuration#見出しスタイル)）。ノンブルもこの2ページを数に入れません。中国の編集者は正文をその最初のページから数えるので、章の見出しの直前に`:::numbering{startAt=1}`の行を置き、3ページ目で一から数え直します（[`:::numbering`](/ja/docs/document-format#numbering)）。扉と口絵も奇数・偶数の判定では紙面として数えられ、ビューアーとPDFではやはり一と二のラベルが付きます（下のアレンジで別のラベルにします）。 「三國演義」は題簽の縦方向の中央に置きます。`RUN`は40ptの4字と、そのあいだの3つの10ptの空きの長さで、最後の文字のあとのトラッキングは含めません。扉のフッターは、見出しの`colophon`属性から、刊記を地に横に、この版の言語で組みます。Noto Serif TCにはイタリックがないので、刊記はSource Serif 4で組みます。`inlineMarks: true`で書名を囲むアスタリスクを読み取り、属性の中の`\n`ごとに行を改めるので、行は意味の切れ目で分かれます（[テキスト要素](/ja/docs/configuration#テキスト要素)）。ボックスの幅は、版面の左端から題簽の中心線までの距離の2倍なので、どの行も中央が「三國演義」の真下に来ます。口絵のデザインは、木版画とその二重枠を版面の右上の角から下げ、図題をその左に2行で縦に組みます。流れの枠ではボックスの幅がページを縦に進むので、絵の`width`は紙面での高さになります。絵はCanvas、HTML、PDFで正立し、タグ付きPDFはそれを代替テキスト付きの図として読みます。 ### 5 · 各書体には、それが組む文字を渡して読み込む ```js // script.js, 行 266–277 // Fontsource cuts a Chinese face into about a hundred files; loadCjkFonts fetches those // that hold the characters it is given (gotcha: cjk-fonts-slices). vertical: true loads the // face again with its vertical punctuation forms, for the canvas. const heads = markdown.match(/^# .*$/gm).join('').replace(/\{[^}]*\}/g, ''); // no attributes const attr = (key) => markdown.match(new RegExp(`${key}="([^"]*)"`))?.[1] ?? ''; const verse = markdown.match(/:::paragraphs\{style="verse"\}[\s\S]*?\n:::/g).join(''); await loadFonts(FONTS, markdown); // the Latin files: the imprint await loadCjkFonts({ [SONG]: ['400'] }, markdown, { vertical: true }); await loadCjkFonts({ [SONG]: ['700'] }, '三國演義第一回'); // no punctuation: no vertical twin await loadCjkFonts({ [KAI]: ['400'] }, `${heads}${verse}${attr('editor')}${attr('note')}羅貫中著`, { vertical: true }); await loadCjkFonts({ [HEI]: ['400'] }, `${heads}第回一二三四五六七八九十`, { vertical: true }); ``` この本には3つの声があります。本文にNoto Serif TC（宋）、対句と韻文にLXGW WenKai TC（楷）、小口の柱にNoto Sans TC（黑）です。Fontsourceは中国語の書体の各ウェイトを約100のファイルに分けて配信し、ファイルごとに文字の範囲を受け持たせています。`loadCjkFonts`は、渡されたテキストを含むファイルを取得します（[中国語・日本語・韓国語のフォント](/ja/docs/configuration#中国語日本語韓国語のフォント)）。本文の書体には章全体を渡し、67ファイルを取得します。楷体には見出しと韻文を渡して25ファイル、黒体は15ファイル、ボールドは4ファイルです。ボールドが組むのは7字だけで約物がないので、縦組み用の字形は読み込みません。刊記のSource Serif 4は、ほかのラテン文字の書体と同じく`loadFonts`で、ローマンとイタリックを読み込みます。`renderToPdf`は、同じファイルをサブセットとして埋め込む`cjkPdfProvider`と、木版画のための`imageBytes`を受け取ります。 ## レシピの全体 レシピのフォルダーから合成した1つのファイルで、サンプルのテキストとレシピ集の共通キットを埋め込んであり、自分でページを組み立てます。動かすには、空のページの`