# 按词组空格的平假名图画书
> 一本竖排平假名图画书，词组之间留空格（分かち書き）：用keep-all让每个词组保持完整，行只在空格处断开。
- HTML版本: https://postext.dev/zh/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
- 在沙盒中打开: https://postext.dev/zh/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), [ja](https://postext.dev/ja/cookbook/hiragana-picture-book.md), [ar](https://postext.dev/ar/cookbook/hiragana-picture-book.md)
## 简单来说
一本给幼儿看的日文图画书，全部用平假名，每组词后留一个空格，换行时从不把一组词拆开，每页上方都有一幅画。
## 成品一览
一本十页的图画书《かみの ふね》（纸船），文字和图都为本示例而作：雨停后，女孩折了一只红色纸船，纸船顺河而下，经过青蛙、苍鹭和月亮，最后到达大海。排法与日本给最小读者的书一样：只用平假名，20 pt的Klee One（一种依照小学教科书字样设计的字体），词组之间留空格，即分かち書き（wakachigaki），让孩子一次读一个词组。页面为横长的260 × 200 mm，竖排，右侧装订：图在上方，下面是每行八个字的短行，纸船随着翻页向左行进。
**这份食谱回答的问题:**
- 怎样给日文图画书按词组加空格（分かち書き），并让行只在空格处断开？
- 为什么日文的小假名、ー和闭括号不能出现在行首？怎样选择规则的严格程度？
- 哪些字体能排日文，并在屏幕和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/zh/docs/japanese-layout.md#汉字假名与罗马字): 日文在一行里混用四种文字：汉字、平假名、片假名以及拉丁字母和数字（罗马字）。标记为ja的文档在日文词之间不加空格，日文与拉丁文之间留四分之一字，竖排中的全角Ａ１直立；字体是Noto Serif JP或Shippori Mincho这样的日文字体时，汉字采用日文字形（字体的locl）。罗马字的长音符号（ō ū）需要字体里有这些字。
- [竖排](https://postext.dev/zh/docs/configuration.md#竖排): 中文和日文从上到下排、各行从右往左读（layout.writingMode 'vertical-rl'）：栏变成上下分段，图和表保持直立，标点使用竖排字形。
- [日文禁则处理](https://postext.dev/zh/docs/japanese-layout.md#断行禁则): 日文可以在任意两个字之间断行，JLReq禁止的位置除外：行首不能是闭括号、、。、小假名（ぁ ッ ャ）、ー、叠字符（々 ゝ）或〜，行末不能是开括号，――和……不能拆开。标记为ja的文档采用最严格的一级；允许小假名和ー出现在行首的书，可以用cjk.lineBreak选'ja-strict'或'ja-loose'。
**还用到**
- [右翻书](https://postext.dev/zh/docs/configuration.md#装订)
- [字符网格](https://postext.dev/zh/docs/configuration.md#字格)
- [中日韩字体](https://postext.dev/zh/docs/configuration.md#中文日文和韩文字体)
- [一栏半](https://postext.dev/zh/docs/configuration.md#版式类型)
- [放浮动体的边栏](https://postext.dev/zh/docs/configuration.md#版式)
- [自定义资源类型](https://postext.dev/zh/docs/configuration.md#资源类型)
- [页面设计中的图片](https://postext.dev/zh/docs/configuration.md#图像元素)
- [封面、扉页和版权页](https://postext.dev/zh/docs/configuration.md#标题样式)
- [标题样式](https://postext.dev/zh/docs/configuration.md#标题样式)
- [标题属性](https://postext.dev/zh/docs/document-format.md#标题属性)
- [段落样式](https://postext.dev/zh/docs/configuration.md#段落样式)
- [换页与换栏](https://postext.dev/zh/docs/document-format.md#pagebreak)
- [纸张颜色](https://postext.dev/zh/docs/configuration.md#页面)
- [语义调色板](https://postext.dev/zh/docs/configuration.md#调色板)
- [导出PDF](https://postext.dev/zh/docs/configuration.md#生成pdf)
- [嵌入PDF的字体](https://postext.dev/zh/docs/configuration.md#为什么需要字体提供函数)
- [图就放在这里](https://postext.dev/zh/docs/document-format.md#块级嵌入可选显式的行内放置)
- [设计过的章首页](https://postext.dev/zh/docs/configuration.md#通栏与高级设计)
- [作为资源的图和表](https://postext.dev/zh/docs/document-format.md#资源)
- [分节书眉](https://postext.dev/zh/docs/configuration.md#标题样式)
- [不编号的章](https://postext.dev/zh/docs/configuration.md#标题样式)
**配置一览**
- [`bodyText`](https://postext.dev/zh/docs/configuration.md#正文), [`cjk`](https://postext.dev/zh/docs/configuration.md#东亚排版), [`colorPalette`](https://postext.dev/zh/docs/configuration.md#调色板), [`footer`](https://postext.dev/zh/docs/configuration.md#页眉与页脚), [`header`](https://postext.dev/zh/docs/configuration.md#页眉与页脚), [`headingStyles`](https://postext.dev/zh/docs/configuration.md#标题样式), [`headings`](https://postext.dev/zh/docs/configuration.md#标题), [`layout`](https://postext.dev/zh/docs/configuration.md#版式), [`locale`](https://postext.dev/zh/docs/configuration.md#断词), [`page`](https://postext.dev/zh/docs/configuration.md#页面), [`paragraphStyles`](https://postext.dev/zh/docs/configuration.md#段落样式), [`resourceTypes`](https://postext.dev/zh/docs/configuration.md#资源类型)
**API**
- [`buildDocument`](https://postext.dev/zh/docs/configuration.md#构建文档), [`clearMeasurementCache`](https://postext.dev/zh/docs/configuration.md#测量缓存), [`decompressWoff2`](https://postext.dev/zh/docs/configuration.md#浏览器字体提供函数fontsource--woff2), `loadVerticalAlternates`, [`registerResourceImage`](https://postext.dev/zh/docs/architecture.md#api接口), [`renderPageToCanvas`](https://postext.dev/zh/docs/configuration.md#把页面渲染为位图), [`renderToPdf`](https://postext.dev/zh/docs/configuration.md#生成pdf)
**字体**
- Klee One (OFL-1.1), Zen Maru Gothic (OFL-1.1)
## 做法
### 1 · 让每个词组保持完整
代码见上文的[简短回答](#简短回答)。日文可以在任意两个假名之间断行，所以词组间的空格只是多留一点空白，并不能阻止行在あか|い之间断开。`cjk.wordBreak: 'keep-all'`只保留空格处和标点旁的断点，即、。」之后和「之前，与CSS的`word-break: keep-all`相同，禁则照样有效（[东亚排版](/zh/docs/configuration#东亚排版)）。空格是普通的U+0020，在Klee One中宽0.35字，落在行末时会被去掉。U+3000同样是词组之间的断点，但它是一个固定一字宽的字符，会留在行末。
*第3页：八行，每行都在空格处或」、之后结束：「いって / らっしゃい。」 / みいちゃんが / そっと てを……*
正文不两端对齐。若两端对齐，短行会把空格和假名间距拉开直到层底；图画书让每行停在最后一个词组结束的地方。
### 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'`指页面的上方，所以侧栏在左的“一栏半”版式就成了上下两层：图浮动到上层（深14字），正文排在下层（8字）。每页用`::resource{id="…"}`引用自己的图，并以`:::pagebreak`结束。图的资源类型不带题注前缀，图的宽高比为2.186:1，正是这一层的形状，因此正好排满（[竖排](/zh/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`沿纸面向下），书名用60 pt的Zen Maru Gothic沿右侧天空竖排。
### 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)),
};
```
十个场景都是由几种形状（纸船、女孩、青蛙、苍鹭）组成的SVG，波纹和星星用带种子的随机数生成，所以每次截图都完全一样。在PDF里它们同样是矢量图。
## 完整食谱
一个文件，由食谱文件夹合成，示例文本和排版食谱的公共工具包都已内联；它自己排出页面。要运行它，把它放进空白页面的`