Chrome 即将推出 CSS 文本模块级别 4 中的四项新国际 CSS 功能。本文将介绍已发布的功能以及即将推出的功能。
- 从 Chrome 119 开始:日语短语会使用
word-break: auto-phrase
进行换行。 - 在 Chrome 120 中通过标志启用:使用
text-autospace
属性实现脚本间间距。 - 正在开发中:使用
text-spacing-trim
属性调整中文、日语和韩语 (CJK) 标点符号的间距。 - 各语言的字体大小下限保持一致。
日语词组换行:word-break: auto-phrase
此功能可提高日语文本的可读性,Chrome 119 及更高版本均提供此功能
中文或日语等某些东亚语言不使用空格来分隔字词,并且行可以在任何字符处换行,即使是在字词中间也是如此。这是这些语言的正常换行行为,但对于标题或诗歌等简短文本,最好在自然短语边界处换行(在日语中,此边界称为“Bunsetsu”)。
新的 CSS 功能 word-break: auto-phrase
指定应在这些边界处进行换行。
<html lang="ja">
<style>
h1 {
word-break: auto-phrase;
}
</style>
<h1>窓ぎわのトットちゃん<h1>
边界检测由机器学习引擎执行,因此检测结果可能不符合您的预期。如果出现这种情况,您可以手动调整可断点。<wbr>
标记或零宽空格 (​
) 会强制执行断点,而零宽连接符 (‍
) 会阻止断点。
窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース
目前,Chrome 仅支持日语版本的此功能,使用的是采用 AdaBoost 机器学习技术的 BudouX C++ 端口。如需了解详情,请参阅 Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器。
我们计划在未来的 Chrome 版本中支持韩语和汉语。
脚本间距:text-autospace
以下功能目前在 Chrome 中处于标志后置状态。如需进行测试,请在 Chrome 120 或更高版本中启用实验性 Web 平台功能标志(位于 chrome://flags/#enable-experimental-web-platform-features
下)。
中文和日文混合使用多种文字,汉字、拉丁字母和 ASCII 数字,日语还会使用平假名和片假名。在从汉字转换为非汉字意象文字时,适当的间距通常有助于提高可读性。
Chrome 计划默认开始插入脚本间空格。此功能将印刷材料中广泛用于提高可读性的常见做法引入到网络中。
如果您想停用此行为,可以使用 text-autospace
属性控制插入空格。
text-autospace: no-autospace;
CJK 标点字符间距:text-spacing-trim
以下功能正在开发中,目标是在 Chrome 中默认启用该功能。
在中文、日语和韩语中,在标点字符之间应用字距调整可提高可读性,并产生更具视觉吸引力的排版效果。目前,大多数印刷材料和文字处理器都采用这种排版方式。
例如,中日韩句号和中日韩右括号通常设计为在字符间距的右半部分具有字符内部间距,以便每个字符都有恒定的前进量。
但是,当这些标点符号出现在一行中时,此字形内部间距会过多。在以下两个示例中,第二个示例采用了正确的排版;应移除 CJK 句号的右半部分。
默认行为通常能提供良好的结果,但开发者可以使用 text-spacing-trim 属性选择不同的样式,或者在某些情况下停用该属性。
各语言的字体大小下限保持一致
在 Chrome 118 之前,小于 10px 左右的字号不会按指定方式呈现,但如果语言为阿拉伯语、波斯特语、日语、韩语、泰语、简体中文或繁体中文,则会向上取整。开发者需要使用权宜解决方法来呈现小文本,例如使用 transform
属性。
从 Chrome 118 开始,所有语言都不再受此限制,这 7 种语言与其余语言的限制一致。此项变更可提高与其他浏览器的互操作性。
互动和分享反馈
如果您对这些功能有任何反馈,请访问 crbug.com 提交问题。