排版与字体：长度膨胀、断词与复杂文字

翻译把字换了，排版决定这些字能不能放得下、读得通。

一、按钮里的字溢出了

以下情境为教学假设，人物、引语和数字不代表经核实的真实案例。

闻笛做一个表单工具，英文界的按钮宽度按 Save 设计，96 像素，左右各 12 像素内边距。德文版上线后，Speichern 在同一个按钮里溢出，文字被截成 Speich…。她加宽按钮，结果法文版又出现了新的溢出，因为 Enregistrer 也不短。

更麻烦的是表格：德文的复合词没有空格，Bundesausbildungsförderungsgesetz 这样的词会把列宽撑开，接着整张表在小屏幕上横向滚动。日文版看起来没溢出，但行高不够，假名与汉字的基线挤在一起。

她最初的判断是「换个支持多语言的字体就好」，换完发现问题一个都没少。

二、长度膨胀要按文案长度分档

膨胀不是均匀的。短文案的膨胀比例最高，长文案反而接近原文。经验区间如下：

这条规律决定了设计时的预留方式：

容器最小宽度 = 源文案宽度 × (1 + 该长度档的膨胀率)
按钮最小宽度 = max(所有目标语言的宽度) + 左右内边距

按 96 像素、12 像素内边距的按钮算，源文案可用宽度是 72 像素。Speichern 按 +90% 估算需要 137 像素，按钮至少要 161 像素。这个数字应该在设计稿里，而不是在上线后由用户发现。

语言间的相对长度也有参考价值：同一段文案，德文通常比英文长 30% 左右，法文长 15%–20%，俄文长 15%，芬兰文可能长 30%；中文与日文通常更短，但行高需求更大，因为字符是方块而不是字母。

布局检查的实用做法：把界面语言切换成「伪本地化」文本，每个字符替换成带重音的字符，并在两端加括号，长度按 +40% 生成。哪里的布局坏了，一眼就能看出来。

三、断词、换行与书写方向

不同文字的换行规则完全不同，不能只靠 word-break 一个属性解决。

德语与其他欧洲语言：长复合词需要断词规则（hyphenation）。浏览器对部分语言支持 hyphens: auto，但需要正确的 lang 属性，否则不会生效。lang 写错，断词、朗读、拼写检查都会跟着错。

中文与日文：没有空格，换行发生在字符之间，但有禁则——句号、逗号、右括号不能出现在行首，左括号不能出现在行尾。CSS 的 line-break 与浏览器的默认禁则能处理大部分情况，但自定义排版或 Canvas 渲染要自己实现。

泰文、老挝文、高棉文：词与词之间没有空格，换行需要词典分词。Unicode 的文本分段规范（UAX #29）定义了边界规则，浏览器与 ICU 都实现了；自己写正则切词一定会切错。

阿拉伯文与希伯来文：从右到左书写。要做的不只是 direction: rtl：

• 布局用逻辑属性（margin-inline-start 而不是 margin-left），否则镜像后会错位。
• 图标里的方向性元素要镜像，但时钟、播放键、品牌标志不镜像。
• 数字、URL、代码片段要保持从左到右，用双向隔离字符（U+2068 与 U+2069）包住，避免顺序错乱。
• 标点位置随方向变化，问号与逗号在 RTL 里位于左侧。

这些规则里，最容易漏的是「部分镜像」：整页翻过去很容易，知道哪些元素不该翻才是工作量。

四、字体体积与降级

CJK 字体是体积大户。一个完整的简体中文字体动辄十几兆，直接打包进网页或应用，首屏会明显变慢。

对一个人的产品，推荐「系统字体优先 + 必要时子集化」：正文用系统字体，品牌标题用子集化的自定义字体，并且只包含实际用到的字符。子集化的风险是用户输入的内容可能缺字，所以输入框与用户生成内容必须回退到系统字体。

降级链要按文字覆盖范围设计：

font-family:
  "Brand Sans",          /* 拉丁与数字 */
  "Noto Sans SC",        /* 简体中文 */
  "Noto Sans JP",        /* 日文 */
  system-ui, sans-serif; /* 兜底 */

还要注意两个细节：数字在表格里应该用等宽数字（font-variant-numeric: tabular-nums），否则列会对不齐；行高要按「最高行」设计，日文与泰文的行高需求比拉丁文大，按拉丁文的行高会导致上下粘连。

截断与提示。 溢出之后的处理方式，比溢出本身更影响体验：

原则是：关键操作永远不截断。 保存、支付、删除这类按钮，宁可换行或加宽，也不要让用户猜。次要信息可以省略号加提示，但提示内容本身也要本地化。

数字、标点与空格。 排版里最琐碎、也最容易被用户察觉的部分：

• 千分位：英语用逗号，德语用点号，法语用空格。不要手工拼。
• 百分号：法语在数字与百分号之间加不换行空格，中文不加。
• 引号：中文用「」，英文用 “ ”，德文用 „ “，不要全局替换。
• 中英文混排：中文与拉丁字母之间通常加一个空格，日文不加。
• 标点宽度：中文标点是全角，英文是半角；混用时行尾会对不齐。
• 不换行空格：数字与单位、金额与货币符号之间，应该用不换行空格，避免被拆到两行。

这些规则不需要背，交给本地化 API 与排版库处理；只有在自己拼字符串时才会出错。

五、行动清单与复算验收

• 按文案长度分档，给每个容器算出最小宽度
• 关键页面用 +40% 的伪本地化文本跑一遍，截图记录溢出点
• 给所有页面写正确的 lang 属性，检查断词是否生效
• 检查中日韩标点是否出现在行首或行尾，必要时开 line-break
• 若做 RTL：改用逻辑属性，列出「不镜像」的元素清单
• 统计字体文件体积，决定是否子集化，并确认用户输入有回退字体
• 表格开启等宽数字，检查各语言下的列对齐

验收标准：在最长语言下，所有按钮与表格不截断、不横向滚动；RTL 页面中数字与代码顺序正确；首屏字体体积在预算内。 只检查了英文与中文的，不算验过。

使用边界与实操验收

本文讲排版与字体，不涉及文案怎么抽取，那属于第 03 篇；漏译与回归测试的流程属于第 06 篇；时区与数字格式属于第 07 篇。

游戏产品的文字常在贴图里，字体处理方式完全不同：需要字体图集、字符集预生成与贴图文字替换，可参考个人游戏技术选型案例：本地化管线为什么要先处理字体和文本长度 。本文面向用 HTML、原生界面或跨平台 UI 框架构建的软件。

验证以截图为准：每种语言至少覆盖首页、表单、表格、弹窗与错误提示五类界面，在最小与最大两种屏幕宽度下各截一次。截图存档，下次改版可以直接对比。

关键参考与核验范围

本文的膨胀比例与字体体积为教学演示。核验日期：2026-10-23。

• Unicode UAX #14: Line Breaking Algorithm ：换行机会的定义，禁则与不可断行位置的规范来源。
• Unicode UAX #9: Bidirectional Algorithm ：阿拉伯文与希伯来文的双向文本规则，解释数字与标点为何会「跳位置」。

上述两条只用于说明排版规则的技术依据，不构成对任何字体或框架的推荐。各平台对断词与字体的支持程度在本次核验中未逐条比对，故不引用其条款原文、不附具体链接。

系列导航

• 上一篇：翻译工作流：机翻、审校与术语表
• 下一篇：本地化测试：漏译、回退与截图回归
• 回到目录：一个人把产品做出海：多语言、时区与本地化
• 相关阅读：文案外置：从硬编码到语言包 、个人游戏技术选型案例：本地化管线为什么要先处理字体和文本长度