F4.14.3kinsoku engine support设计

避头尾规则需要排版引擎支持,简单换行算法会破坏它

别名: 折行算法 · line-break · greedy wrap

概念解释

避头尾不是设计师「注意一下行首」能维持的。它是折行时的约束:某些字符不能当行的第一个,某些不能当最后一个,切点要在约束下重找。简单换行(greedy wrap)只问「下一刀落在哪个字符能让本行还放得下」,不问那一刀会不会把句号送到行首。没有引擎把禁则编进断行,规则在生产环境里等于不存在。

机制

贪婪折行从行首累加宽度,放不下就在当前字符前切开,复杂度低,移动端列表、画布文字、自绘控件爱用。禁则要求切开之后检查行首行尾类别,不合法就回退:把前一个字带到下一行,或把后一个字拉上来,必要时用悬挂。这是第二次决策,简单算法没有这一步。Web 上 line-breakword-breakoverflow-wrap 组合决定能不能走到这一步;设成随意断字,等于显式关掉禁则。原生侧,有的文本控件接系统排版、默认带中日禁则;自绘、TextKit 的某条路径、游戏内 UI、Canvas 填字,往往回到贪婪切。同一条文案在系统文本框里行首干净,画到图片上就出现行首句号,不是文案变了,是两条折行路径。

边界

纯西文、以空格为边界的文本,贪婪折行通常不会制造汉语意义上的避头尾失败,不必为它们开中文禁则。日志、代码编辑器需要可预测的字符网格,禁则会让同一文件在不同宽度下断点乱跳。性能敏感的超长列表若每帧都做禁则回退,成本要量;可以用系统文本控件代替自绘,而不是在自绘里做一半禁则。引擎支持不等于默认打开——有的平台提供开关,产品若选了「任意位置打断」,责任在产品。

怎么落地

  • 中文正文走系统或浏览器的排版,打开严格折行;自绘文字至少接一套带禁则的断行,而不是按字符宽度累加。
  • 把同一句含标点的中文分别放进系统文本控件和自绘标签,缩到相同宽度。两处行首行尾不一致,缺的就是引擎,不是某条样式。
  • word-break 是否被设成随意断开;那一处关掉,比再写一层「注意标点」有效。

延伸

  • 同组F4.14.1 中文标点不应出现在行首,如逗号、句号 · F4.14.2 开括号、引号等标点不应出现在行尾 · F4.14.4 中西文标点全角半角混用会造成视觉节奏不一致
  • 相邻F4.07 字体选择 · F2.16 布局的极端值与内容溢出
  • 站内检索kinsoku · line-break · greedy wrap

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F4.14.3