LayoutNG

LayoutNG 计划在 Chrome 76 中发布,是一款已历经多年努力的全新布局引擎。我们即将完成多项激动人心的改进,未来还会实现更多性能提升和高级布局功能。

最新动态

  1. 改进了性能隔离。
  2. 更好地支持除拉丁语以外的文字。
  3. 修复了许多与浮动和外边距相关的问题。
  4. 修复了大量的网页兼容性问题。

请注意,LayoutNG 将分阶段发布。在 Chrome 76 中,LayoutNG 用于内嵌和块布局。其他布局基元(例如表、flexbox、网格和块碎片化)将在后续版本中被替换。

开发者明显的更改

虽然对用户可见的影响应该微乎其微,但 LayoutNG 会以非常细微的方式更改某些行为,修复了数百项测试,并提升了与其他浏览器的兼容性。尽管我们已经尽最大努力,但这可能会导致某些网站和应用的呈现或行为方式略有不同。

性能特征也截然不同;尽管整体性能与之前类似或略有更好,但某些用例可能会出现性能提升,而其他用例预计会有所下降,至少是短期的。

浮点数

LayoutNG 重新实现了对浮动元素(float: left;float: right;)的支持,修复了浮点数相对于其他内容的放置位置存在的许多正确性问题。

存在内容叠加的问题

在浮动元素周围放置内容时,旧版浮动元素实现未正确考虑外边距,导致内容部分或完全与浮动元素本身重叠。当图片位于段落旁边时,回避逻辑无法考虑行高,就会出现此 bug 的最常见表现。(请参阅 Chromium 错误 #861540。)

顶部文本行与浮动图片叠加显示
图 1a,旧版布局引擎
文本与右侧的浮动图片重叠
左侧是适当的文本,右侧是浮动图片
图 1b,LayoutNG
文本位于右侧浮动图片旁边

同样的问题可能会在一行中出现。下例显示了一个块元素,其浮动元素后面带有负外边距 (#895962)。文本不得与浮点数重叠。

叠加在橙色框上显示的文本行
图 2a,旧版布局引擎
文本与悬浮的橙色元素重叠
橙色框右侧适当文本
图 2b,LayoutNG
文本位于悬浮橙色元素旁边

设置上下文定位的格式

当构成块格式上下文的元素的大小位于浮点数旁边时,旧版布局引擎会尝试将块的大小调整为固定次数,然后才会放弃。这种方法会导致行为不可预测且不稳定,并且不符合其他实现方式。在 LayoutNG 中,调整块的大小时会考虑所有浮点数。(请参阅 Chromium 错误 #548033。)

绝对定位和固定定位现在更符合 W3C 规范,并且更符合其他浏览器中的行为。两者之间的差异在以下两个情况下最明显:

  • 多行内嵌包含块
    如果绝对定位的包含块跨越多行,旧版引擎可能会错误地仅使用行的子集来计算包含块边界,
  • 垂直写入模式
    在垂直写入模式下,旧版引擎在将流外元素放置在默认位置时遇到许多问题。如需详细了解改进后的写入模式支持,请参阅下一部分。

从右到左 (RTL) 的语言和竖向书写模式

LayoutNG 经过彻底设计,支持竖屏模式和 RTL 语言,包括双向内容。

双向文本

LayoutNG 支持 Unicode 标准定义的最新双向算法。此更新不仅修复了各种渲染错误,而且还修复了成对括号支持等缺失的功能(请参阅 Chromium 错误 #302469)。

正交流

LayoutNG 可提高垂直流布局的准确性,包括确定绝对定位对象的放置以及正交流框的大小(尤其是使用百分比时)。在 W3C 测试套件中的 1,258 项测试中,有 103 项在旧布局引擎中失败的测试在 LayoutNG 中通过。

固定尺寸

现在,当块包含处于正交写入模式的子项时,可以正确计算固有大小。

文本布局和换行

旧版 Chromium 布局引擎按元素和逐行对文本进行布局。这种方法在大多数情况下运行良好,但需要额外的复杂性来支持脚本并实现良好的性能。此外,这也很容易出现测量不一致的情况,导致在“尺寸到内容”容器及其内容的尺寸上出现细微差异,或者导致不必要的换行符。

在 LayoutNG 中,文本在段落级别布局,然后拆分为多行。这样可以实现更好的性能、更高质量的文本渲染和更一致的换行。最显著的区别如下所述。

跨元素边界联接

在一些脚本中,某些字符相邻时可以直观地联接在一起。来看看这个阿拉伯语示例:

在 LayoutNG 中,现在即使字符位于不同的元素中,联接也会起作用。应用不同的样式时,联接甚至会保留。(请参阅 Chromium 错误 #6122。)

字素是语言书写系统的最小单元。例如,在英语和其他使用拉丁字母的语言中,每个字母都是一个字形。

下图分别显示了以下 HTML 在旧版布局引擎和 LayoutNG 中的呈现效果:

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>
左侧是适当的字素,右侧则是分隔的不正确渲染
图 3a,旧版布局引擎
请注意第二个字母的格式如何变化
显示适当的组合字素
图 3b,LayoutNG
两个版本现在完全相同

中文、日语和韩语 (CJK) 连字

尽管 Chromium 已支持连字并默认启用连字,但也存在一些限制:由于呈现优化,旧版布局引擎不支持涉及多个 CJK 代码点的连字。LayoutNG 消除了这些限制并支持连字,无论脚本是什么。

以下示例展示了如何使用 Adobe SourceHanSansJP 字体呈现三个任意连字:

中间字符组合不形成连字
图 4a,旧版布局引擎
MHz 可以正确形成连字,
但 敏感数据 能正确形成连字,
显示适当的连字
图 4b,LayoutNG
这三组都按预期形成连字

尺寸为内容的元素

对于大小适合内容的元素(例如内嵌块),当前布局引擎会先计算块的大小,然后再在内容上执行布局。在某些情况下(例如,过度缩放字体时),可能导致内容大小与字体大小不匹配。在 LayoutNG 中,由于块的大小是根据实际内容而调整的,因此消除了这种失败模式。

下例展示了一个根据内容大小调整的黄色块。该字体使用 Lato 字体,该字体通过字距调整 T 和 - 之间的间距。黄色框的边界应与文本的边界一致。

文本框末尾的尾随空格
图 5a,旧版布局引擎
请注意最后一个 T 后的尾随空格
文本边界没有多余的空格
图 5b:LayoutNG
请注意框的左右边缘如何与文本边界匹配

换行

与上述问题类似,如果“大小到内容”块的内容大于(更宽)该块,则内容有时可能会不必要地换行。这种情况很少见,但有时会发生于混合方向性内容中。

显示过早的换行符,导致出现额外空间
图 6a,旧版布局引擎
请注意,右侧不必要的换行符和额外空格
不显示不必要的空格或换行符
图 6b,LayoutNG
请注意框的左侧边缘和右侧边缘如何与文本边界匹配

更多信息

如需详细了解 LayoutNG 的具体兼容性问题和修复的错误,请查看上文链接指向的问题,或在 Chromium bug 数据库中搜索标记为 Fixed-In-LayoutNG 的 bug。

如果您怀疑 LayoutNG 可能导致网站无法正常运行,请提交 bug 报告,我们会进行调查。