联系
Carlos Lastres1,862 字

如何修好网页上的日文换行

日文的词与词之间没有空格，所以浏览器几乎可以在任意两个字符之间换行。想让标题不在一个词的中间断开，就设置 lang="ja" 并使用 word-break: auto-phrase，Chrome 从 119 版开始支持。在 Safari 和 Firefox 上，可以给短标题手动加 <wbr>，或者用 Google 的 BudouX，也就是 Chrome 所用的同一个分词引擎。

我在东京设计和搭建日文、英文、西班牙文和中文网站。对日本读者来说，换行是一秒钟就能看出网站做得是否用心的细节。一个标题在第二行只剩下孤零零一个字，即使每个词都对，看起来也像是坏了。

为什么日文会在错误的位置换行

英文在空格处换行，所以除非单词比一行还长，否则不会被拆开。日文书写不用空格，默认规则允许几乎在任意两个字符之间换行。正文这样没有问题，读者早已习惯。但标题、按钮和简短的导语不行，像“東京”或“ダウンロード”这样的词被从中间断开，会改变读法，在大字号下显得很随意。

还有一套叫“禁则”的规则。有些字符不应出现在行首，比如小假名、右括号和句号“。”；有些不应出现在行尾，比如左括号。W3C 把这些都写进了日文排版需求（Requirements for Japanese Text Layout），即使不从头读到尾，也值得浏览一遍。日本数字厅也把排版当作其设计系统中持续更新的一部分，它修订得有多频繁，我在日本政府的设计系统比大多数出口企业都好一文里写过。

auto-phrase：Chrome 上一行解决

Chrome 给 word-break 加了一个只在自然短语之间换行的值。Google 关于 CSS 国际化功能的文章说，它在 Chrome 119 推出，要求内容语言为日文，并用小型机器学习模型 BudouX 的 C++ 版本来判断短语边界。

<html lang="ja">

h1, h2, h3, .lede, button {
  word-break: auto-phrase;
}

有两个细节容易踩坑。元素的 lang 必须解析为日文，所以多语言网站的每个页面或区块都要设对 lang。另外，我只把它用在标题和短文本上。长段落按短语换行，右边缘会参差不齐，默认换行反而更好读。

Safari 和 Firefox 怎么办

根据 MDN 的浏览器兼容性数据，Firefox 还不支持 auto-phrase，Safari 只在 Technology Preview 中提供。在这些浏览器里，这个属性会被忽略，得到的是默认换行，所以放上去没有风险，但对 iPhone 用户不起作用。

如果只有几个标题，最可靠的办法是手动处理。在短语边界放 <wbr>，再加上 word-break: keep-all，让浏览器除了这些位置外都不拆开 CJK 文本。一定要在手机宽度下检查，因为断点不够时 keep-all 会溢出。

规模更大时，BudouX 可以用代码完成同样的事。它的 README 介绍说它不依赖其他工具，连同模型大约 15 KB，提供日文、简体中文、繁体中文和泰文的预训练模型。我在构建时对标题运行它，这样 HTML 发布时就已带有换行提示，浏览器里不需要运行任何脚本。

间距和标点

换行只是工作的一部分。日文字体把“「”和“、”这类标点画在全角的框里，会在标题里留下明显的空隙。text-spacing-trim 可以去掉这些空隙，MDN 的数据显示 Chrome 从 123 版开始支持，Safari 和 Firefox 还不支持。字体特性 palt 通过字体本身做类似的事，只要字体支持就能生效：

h1 { font-feature-settings: "palt"; }

把 palt 用在标题上，正文保持不变。长段落用比例间距，日文会更难读。

text-autospace 会在日文和拉丁字母或数字之间加一点空隙，就是设计师以前在句子里的“iPhone”前后手动加的那个空格。它比较新，各浏览器的支持情况不同，依赖它之前先查最新的兼容表。

如果想要更严格的禁则，就设置 line-break: strict，比如让“ょ”这样的小假名不出现在行首。当前的 Chrome、Firefox 和 Safari 都支持。

一份简短清单

  • 每个页面以及任何混合语言的区块都设对 lang。
  • 标题、导语和按钮使用 word-break: auto-phrase。
  • 在 Safari 上重要的标题用 <wbr> 或 BudouX。
  • 大字号文本用 palt，正文保持默认间距。
  • 日文正文的行高比英文稍宽，标题则收紧。
  • 发布前在 Safari 里以 390 像素宽度实际看一遍。

换行很少出现在上线检查清单上。但在日本，它决定一个页面看起来是否完成，就像在日本 UX 的其他地方小细节建立信任一样。上面大多数修改，一个下午就能做完。

← 全部文章