# 文節で分かち書きしたひらがなの絵本
> 文節の間にスペースを入れた（分かち書き）縦組みのひらがな絵本。keep-allで文節をまとめて保ち、行はスペースの位置でだけ折り返します。
- HTML版: https://postext.dev/ja/cookbook/hiragana-picture-book
- レシピ No. 127 · 文字と本文 · 難易度 2 (中級) · 出力: Canvas, PDF
- ジャンル: 小説・戯曲・文芸, 写真集
- 必要なもの postext ≥ 1.16.1, postext-pdf ≥ 1.16.1 · テスト環境 1.16.1, postext-pdf 1.16.1 ／テスト日 2026-10-05
- ページ: [1](https://postext.dev/cookbook/hiragana-picture-book/en/p01.webp?v=c6b3d730), [2](https://postext.dev/cookbook/hiragana-picture-book/en/p02.webp?v=c6b3d730), [3](https://postext.dev/cookbook/hiragana-picture-book/en/p03.webp?v=c6b3d730), [4](https://postext.dev/cookbook/hiragana-picture-book/en/p04.webp?v=c6b3d730), [5](https://postext.dev/cookbook/hiragana-picture-book/en/p05.webp?v=c6b3d730), [6](https://postext.dev/cookbook/hiragana-picture-book/en/p06.webp?v=c6b3d730), [7](https://postext.dev/cookbook/hiragana-picture-book/en/p07.webp?v=c6b3d730), [8](https://postext.dev/cookbook/hiragana-picture-book/en/p08.webp?v=c6b3d730), [9](https://postext.dev/cookbook/hiragana-picture-book/en/p09.webp?v=c6b3d730), [10](https://postext.dev/cookbook/hiragana-picture-book/en/p10.webp?v=c6b3d730)
- PDF: https://postext.dev/cookbook/hiragana-picture-book/en/hiragana-picture-book.pdf?v=c6b3d730
- Sandboxで開く: https://postext.dev/ja/sandbox#recipe=hiragana-picture-book&lang=en (.postext: https://postext.dev/cookbook/hiragana-picture-book/en/hiragana-picture-book.postext)
- 最終更新: 2026-10-05
- 他の言語: [en](https://postext.dev/en/cookbook/hiragana-picture-book.md), [es](https://postext.dev/es/cookbook/hiragana-picture-book.md), [ca](https://postext.dev/ca/cookbook/hiragana-picture-book.md), [zh](https://postext.dev/zh/cookbook/hiragana-picture-book.md), [ar](https://postext.dev/ar/cookbook/hiragana-picture-book.md)
## かんたんな説明
小さな子ども向けの、すべてひらがなで書いた絵本です。言葉のまとまりごとにスペースを入れ、まとまりの途中では行を分けません。どのページにも絵が付きます。
## できあがり
このレシピのために書き、描いた10ページの絵本『かみの ふね』です。雨のあと女の子が赤い紙の舟を折り、舟はカエル、サギ、月のそばを過ぎて川を下り、海へ出ます。いちばん幼い読者向けの日本の本と同じ組み方をしています。ひらがなだけを使い、教科書体を手本にした書体Klee Oneの20 ptで組み、文節の間にスペースを入れる分かち書きにして、子どもが一度にひとまとまりずつ読めるようにします。ページは260 × 200 mmの横長で、縦組み、右綴じです。ページの上部に絵を置き、その下に8字の短い行を並べます。ページをめくるにつれて、舟は左へ進みます。
**このレシピが答える問い:**
- 絵本を文節で分かち書きし、行をスペースの位置でだけ折り返すには？
- 小書きのかな、ー、閉じかっこが行頭に来てはいけないのはなぜですか？規則の厳しさを選ぶには？
- 画面とPDFで、漢字を日本の字形で表示して日本語を組めるフォントは？
## 手短な答え
```js
// script.js, 行 41–51
// The story is typed with an ordinary space (U+0020) after each phrase (文節). Japanese
// text may break between any two kana, so the space alone does not keep a phrase whole:
// keep-all drops the breaks between two letters and keeps those at a space, after 、。」
// and before 「. Kinsoku still applies.
const phrases = { wordBreak: 'keep-all' }; // cjk.wordBreak
const bodyText = {
fontFamily: HAND, fontSize: pt(BODY), lineHeight: pt(LEAD), color: col('ink'),
boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
// Ragged: a justified line would stretch its spaces and its kana to fill the tier.
textAlign: 'left', firstLineIndent: em(0),
};
```
## 材料
**学べること**
- [仮名、漢字、ローマ字](https://postext.dev/ja/docs/japanese-layout.md#漢字かなローマ字): 日本語は1行の中で4つの文字を混ぜます。漢字、ひらがな、カタカナ、そしてラテン文字と数字（ローマ字）です。jaと指定した文書では、日本語の語のあいだにスペースを入れず、日本語と欧文のあいだに四分アキを入れ、全角のＡ１は縦組みで正立させます。書体が日本語用（Noto Serif JPやShippori Minchoなど）なら、漢字は日本の字形（フォントのlocl）になります。ローマ字のマクロン（ō ū）には、それを持つ書体が必要です。
- [縦組み](https://postext.dev/ja/docs/configuration.md#縦組み): 中国語と日本語を上から下へ、右から読む行で組みます（layout.writingMode 'vertical-rl'）。段組みは上下に積む段になり、図と表は正立したまま、約物は縦組み用の字形になります。
- [日本語の改行（禁則処理）](https://postext.dev/ja/docs/japanese-layout.md#禁則処理): 日本語は、JLReqが禁じる箇所を除き、任意の2文字のあいだで改行します。行頭には閉じ括弧、「、」「。」、小書きの仮名（ぁ ッ ャ）、「ー」、繰り返し記号（々 ゝ）、「〜」を置かず、行末には開き括弧を置かず、「――」や「……」は分割しません。jaと指定した文書はもっとも厳しい段階を使います。小書きの仮名や「ー」の行頭を許す本では、cjk.lineBreakで'ja-strict'または'ja-loose'を選びます。
**ほかに使うもの**
- [右綴じの本](https://postext.dev/ja/docs/configuration.md#綴じ)
- [文字グリッド](https://postext.dev/ja/docs/configuration.md#文字グリッド)
- [中国語・日本語・韓国語のフォント](https://postext.dev/ja/docs/configuration.md#中国語日本語韓国語のフォント)
- [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#pagebreak)
- [用紙の色](https://postext.dev/ja/docs/configuration.md#ページ)
- [セマンティックカラーパレット](https://postext.dev/ja/docs/configuration.md#カラーパレット)
- [PDFの書き出し](https://postext.dev/ja/docs/configuration.md#pdfの生成)
- [PDFに埋め込むフォント](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#見出しスタイル)
**設定の一覧**
- [`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#段落スタイル), [`resourceTypes`](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の生成)
**書体**
- Klee One (OFL-1.1), Zen Maru Gothic (OFL-1.1)
## 作り方
### 1 · 文節をまとめて保つ
コードは前の[手短な答え](#手短な答え)にあります。日本語の文はどの2つのかなの間でも改行できるので、文節の間のスペースは間を空けるだけです。それだけでは、あか|いのように行が文節の途中で終わるのを防げません。`cjk.wordBreak: 'keep-all'`は、CSSの`word-break: keep-all`と同じく、スペースの位置と約物の隣、つまり、。」のあとと「の前の改行位置だけを残します。禁則処理はそのまま適用されます（[東アジアの組版](/ja/docs/configuration#東アジアの組版)）。スペースはふつうのU+0020で、Klee Oneでは0.35 em、行末に来れば消えます。U+3000も文節の区切りになりますが、こちらは幅1 emの固定の文字で、行末でも残ります。
*3ページ：8行。どの行もスペースの位置か、」や、のあとで終わります。「いって / らっしゃい。」 / みいちゃんが / そっと てを…*
本文は不ぞろいで組みます。両端そろえにすると、短い行は段の地まで届くように、スペースとかなの間を広げてしまいます。絵本では、各行を最後の文節が終わる位置で止めます。
### 2 · 絵を本文の上の段に置く
```js
// script.js, 行 55–63
// In vertical text 'left' is the top of the page: the side column is a tier that takes
// the pictures (floats), and the text runs in the tier under it, right to left.
const layout = {
layoutType: 'oneAndHalf', writingMode: 'vertical-rl', sideColumnRole: 'floats',
sideColumnSide: 'left', sideColumnPercent: 58, gutterWidth: pt(2 * BODY),
};
const cjk = { ...phrases, grid: { enabled: true, charsPerLine: CHARS, linesPerPage: LINES } };
const resourceTypes = [{ id: 'picture', name: 'え', shortLabel: 'え', numberingTemplate: '{n}',
resetOn: 'never', counterFormat: 'decimal', captionPrefix: '' }]; // pictures, no captions
```
縦組みでは`'left'`がページの上にあたるので、サイド段を左に置いた1段半組みは上下2つの段になります。絵は上の段（14字ぶんの深さ）にフロートとして入り、本文は下の段（8字）に流れます。各ページは`::resource{id="…"}`で自分の絵を引用し、`:::pagebreak`で終わります。絵のタイプにはキャプションの接頭辞がありません。絵は幅が高さの2.186倍で段と同じ形なので、どの絵も段いっぱいに収まります（[縦組み](/ja/docs/configuration#縦組み)）。
### 3 · 表紙をページ全体の絵にする
```js
// script.js, 行 67–84
// In the flow frame of a vertical page x runs down the sheet and y leftward from its right
// edge; a box's width runs down the sheet.
const at = (down, across) => ({ anchor: { to: 'page', edge: 'top-left' },
offset: { x: mm(down), y: mm(across) } });
const cover = {
id: 'cover', numbered: false, toc: false, span: 'page', header: { elements: [] },
breakBefore: { enabled: true, parity: 'any' },
advancedDesign: { enabled: true, minHeight: mm(TRIM.w - 40), slot: { elements: [
{ kind: 'image', id: 'art', resourceId: 'cover', decorative: true,
placement: { anchor: { to: 'bleed', edge: 'top-left' },
size: { width: mm(TRIM.h), height: mm(TRIM.w) } } },
{ kind: 'text', id: 'title', content: '{titleText}', fontFamily: ROUND, fontWeight: 700,
fontSize: pt(60), lineHeight: 1, letterSpacing: pt(6), color: col('boat'),
placement: at(22, 34) },
{ kind: 'text', id: 'latin', content: '{attr.latin}', fontFamily: ROUND, fontWeight: 700,
fontSize: pt(9), lineHeight: 1.4, color: col('ink'), placement: at(22, 62) },
] } },
};
```
表紙はページ幅の見出しデザインです。絵はページと同じサイズで塗り足しに固定し（縦の流れでは、その`width`は紙面を縦に走ります）、題名は右側の空に、Zen Maru Gothicの60 ptで縦に組みます。
### 4 · 場面をコードで描く
```js
// script.js, 行 185–281
const W = 2186; // the art's width in its own units; its height is 1000 (ART is 2.186 : 1)
const COVER = Math.round((W * TRIM.h) / TRIM.w); // 1682: the cover is the page's shape
const P = palette;
function mulberry32(seed) {
return () => {
seed = (seed + 0x6d2b79f5) | 0;
let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
const svgDoc = (body, h = 1000, w = W) => ``;
const rect = (fill, y = 0, h = 1000, x = 0, w = W) =>
``;
const wave = (y, amp, fill, seed, h = 1000, w = W) => { // a band whose top edge undulates
const r = mulberry32(seed);
let d = `M0 ${h} L0 ${y}`;
for (let x = 0; x <= w; x += 120) d += ` Q${x + 60} ${y + (r() - 0.5) * 2 * amp} ${x + 120} ${y}`;
return ``;
};
const ripples = (y0, y1, n, seed, stroke = '#ffffff') => {
const r = mulberry32(seed);
return Array.from({ length: n }, () => {
const x = r() * (W - 160) + 40; const y = y0 + r() * (y1 - y0); const l = 40 + r() * 70;
return `';
}).join('');
};
const boat = (x, y, s = 1) => ``
+ ``
+ `';
const girl = (x, y, s = 1) => ``
+ ''
+ ''
+ '';
const frog = (x, y, s = 1) => ``
+ ''
+ ''
+ '';
const fish = (x, y, s = 1) => ``
+ '';
const heron = (x, y, s = 1) => ``
+ ''
+ ''
+ ''
+ '';
const gull = (x, y, s = 1) => `';
const disc = (x, y, r, fill) => ``;
const stars = (n, seed) => {
const r = mulberry32(seed);
return Array.from({ length: n }, () => disc(r() * W, r() * 420, 3 + r() * 5, '#f7e7a8')).join('');
};
const hills = (y, fill, seed) => wave(y, 60, fill, seed);
const SCENES = {
// The cover is the whole page, 260 × 200 mm: 2186 × 1682 units. The sky on the right
// takes the title.
cover: svgDoc(rect('#d9ecf2', 0, COVER) + disc(560, 260, 110, '#f6d27a')
+ wave(980, 70, P.grass, 3, COVER) + wave(1180, 24, P.river, 4, COVER)
+ ripples(1250, 1640, 22, 5) + boat(1000, 1330, 2.2), COVER),
rain: svgDoc(rect('#e6eef0') + ripples(60, 360, 10, 7, '#9fb9c4') + rect('#f1e3c8', 640, 360)
+ ``
+ girl(1260, 380, 1.4) + boat(880, 520, 0.9)),
stream: svgDoc(rect('#e3f0f4') + hills(420, P.grass, 11) + wave(600, 22, P.river, 12)
+ ripples(650, 960, 14, 13) + girl(1800, 300, 1.5) + boat(1300, 700, 1)),
frog: svgDoc(rect('#e3f0f4') + hills(380, P.grass, 21) + wave(560, 22, P.river, 22)
+ ripples(620, 960, 14, 23) + frog(1480, 600, 1.6) + boat(820, 760, 1)),
bridge: svgDoc(rect('#e3f0f4') + hills(400, P.grass, 31) + wave(540, 20, P.river, 32)
+ ''
+ ripples(600, 960, 12, 33) + boat(1093, 720, 1) + fish(1450, 860, 1.1) + fish(1680, 800, 0.9)
+ fish(1300, 930, 0.8)),
heron: svgDoc(rect('#e3f0f4') + hills(300, '#a7cc8a', 41) + wave(420, 16, '#7aaec4', 42)
+ ripples(480, 960, 18, 43) + heron(1700, 230, 1.3) + boat(700, 700, 0.8)),
dusk: svgDoc(rect('#f4c9b5') + disc(500, 520, 110, '#f29a5c') + hills(470, '#c79c87', 51)
+ wave(560, 18, '#c98f8a', 52) + ripples(600, 960, 14, 53, '#f6ddd0') + boat(1300, 760, 0.9)),
night: svgDoc(rect('#2f3e5c') + stars(40, 61) + disc(1500, 200, 80, '#f7e7a8')
+ hills(470, '#253247', 62) + wave(560, 14, '#3f5878', 63)
+ ''
+ ripples(600, 960, 12, 64, '#8aa3c2') + boat(900, 760, 0.9)),
sea: svgDoc(rect('#d6ecf4') + disc(1700, 200, 70, '#f6d27a') + wave(420, 8, '#4f88a6', 71)
+ ripples(470, 960, 22, 72) + gull(900, 200, 1.2) + gull(1150, 140, 0.9) + boat(700, 650, 0.8)),
window: svgDoc(rect('#efe2c8') + rect('#d6ecf4', 90, 640, 420, 1100)
+ rect('#4f88a6', 470, 260, 420, 1100) + boat(1250, 500, 0.4) + `' + rect('#b07d53', 730, 60)
+ girl(1750, 470, 1.6)),
};
```
10の場面は、舟、女の子、カエル、サギといった少数の形から描いたSVGです。波と星にはシード付きの乱数生成器を使うので、どのキャプチャーも同じになります。PDFでもベクターの絵です。
## レシピの全体
レシピのフォルダーから合成した1つのファイルで、サンプルのテキストとレシピ集の共通キットを埋め込んであり、自分でページを組み立てます。動かすには、空のページの`