LayoutNG 计划在 Chrome 76 中发布,是一款已历经多年努力的全新布局引擎。我们即将完成多项激动人心的改进,未来还会实现更多性能提升和高级布局功能。
最新动态
- 改进了性能隔离。
- 更好地支持除拉丁语以外的文字。
- 修复了许多与浮动和外边距相关的问题。
- 修复了大量的网页兼容性问题。
请注意,LayoutNG 将分阶段发布。在 Chrome 76 中,LayoutNG 用于内嵌和块布局。其他布局基元(例如表、flexbox、网格和块碎片化)将在后续版本中被替换。
开发者明显的更改
虽然对用户可见的影响应该微乎其微,但 LayoutNG 会以非常细微的方式更改某些行为,修复了数百项测试,并提升了与其他浏览器的兼容性。尽管我们已经尽最大努力,但这可能会导致某些网站和应用的呈现或行为方式略有不同。
性能特征也截然不同;尽管整体性能与之前类似或略有更好,但某些用例可能会出现性能提升,而其他用例预计会有所下降,至少是短期的。
浮点数
LayoutNG 重新实现了对浮动元素(float: left;
和 float: right;
)的支持,修复了浮点数相对于其他内容的放置位置存在的许多正确性问题。
存在内容叠加的问题
在浮动元素周围放置内容时,旧版浮动元素实现未正确考虑外边距,导致内容部分或完全与浮动元素本身重叠。当图片位于段落旁边时,回避逻辑无法考虑行高,就会出现此 bug 的最常见表现。(请参阅 Chromium 错误 #861540。)
同样的问题可能会在一行中出现。下例显示了一个块元素,其浮动元素后面带有负外边距 (#895962)。文本不得与浮点数重叠。
设置上下文定位的格式
当构成块格式上下文的元素的大小位于浮点数旁边时,旧版布局引擎会尝试将块的大小调整为固定次数,然后才会放弃。这种方法会导致行为不可预测且不稳定,并且不符合其他实现方式。在 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>نسق</div>
<div>نس<span>ق</span></div>
中文、日语和韩语 (CJK) 连字
尽管 Chromium 已支持连字并默认启用连字,但也存在一些限制:由于呈现优化,旧版布局引擎不支持涉及多个 CJK 代码点的连字。LayoutNG 消除了这些限制并支持连字,无论脚本是什么。
以下示例展示了如何使用 Adobe SourceHanSansJP 字体呈现三个任意连字:
尺寸为内容的元素
对于大小适合内容的元素(例如内嵌块),当前布局引擎会先计算块的大小,然后再在内容上执行布局。在某些情况下(例如,过度缩放字体时),可能导致内容大小与字体大小不匹配。在 LayoutNG 中,由于块的大小是根据实际内容而调整的,因此消除了这种失败模式。
下例展示了一个根据内容大小调整的黄色块。该字体使用 Lato 字体,该字体通过字距调整 T 和 - 之间的间距。黄色框的边界应与文本的边界一致。
换行
与上述问题类似,如果“大小到内容”块的内容大于(更宽)该块,则内容有时可能会不必要地换行。这种情况很少见,但有时会发生于混合方向性内容中。
更多信息
如需详细了解 LayoutNG 的具体兼容性问题和修复的错误,请查看上文链接指向的问题,或在 Chromium bug 数据库中搜索标记为 Fixed-In-LayoutNG 的 bug。
如果您怀疑 LayoutNG 可能导致网站无法正常运行,请提交 bug 报告,我们会进行调查。