LayoutNG

LayoutNG 預定於 Chrome 76 版發布,是全新的版面配置引擎,已預留多年時間。我們不僅改善了幾項令人期待的立即改善,也將推出更多效能提升,更即將推出進階版面配置功能。

最新消息

  1. 改善效能隔離。
  2. 更妥善支援拉丁文以外的文字系統。
  3. 修正浮點與邊界的許多問題。
  4. 修正大量網路相容性問題。

請注意,LayoutNG 將分階段推出。在 Chrome 76 版中,LayoutNG 適用於內嵌和區塊版面配置。後續版本會替換其他版面配置基元 (例如資料表、Flexbox、格線及區塊片段)。

開發人員看到的異動內容

雖然對使用者的可見影響應不大,但 LayoutNG 能以非常細微的方式改變部分行為、修正數百項測試,並改善與其他瀏覽器的相容性。儘管我們已盡最大努力,這可能會導致部分網站和應用程式轉譯或行為稍有不同。

效能特性也大不相同;雖然整體效能與先前相近或略有更好,但某些用途可能會提升效能,而其他用途則預期至少需要短期內降低。

浮動

LayoutNG 重新實作對浮動元素 (float: left;float: right;) 的支援,可修正與其他內容相關的浮點位置的正確性問題。

疊加的內容

舊版浮動式實作在將內容放在浮動元素周圍時,無法正確計算邊界,導致內容部分或完全重疊浮動式元素。這個錯誤最常見資訊清單的情況,就是圖片位於段落旁,且避免邏輯無法將行的高度納入考量。(請參閱 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)。

「圖形」是語言書寫系統的最小單位。舉例來說,在英文和其他使用拉丁字母的語言中,每個字母都是圖形。

下圖分別顯示了舊版版面配置引擎和 LayoutNG 中的下列 HTML 算繪情形:

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>
左側是適當的圖形,右側則分隔不理想的算繪結果
Fig 3a,舊版版面配置引擎
請注意第二個字母的形式如何變化
已顯示適當的合併圖形
圖 3b,LayoutNG
這兩個版本現在完全相同

中文、日文和韓文 (CJK) 連字

雖然 Chromium 已預設支援連字並預設啟用,但有部分限制:舊版版面配置引擎不支援涉及多個 CJK 程式碼點的算繪效果,因為轉譯最佳化。LayoutNG 可移除這些限制,並支援不限指令碼的文字

以下範例顯示如何使用 Adobe SourceHanSansJP 字型轉譯三種可斟酌的連字:

中間字元組合,不形成連字
Fig 4a (舊版版面配置引擎)
MHz 正確形成連貫音符
但 sil ン化學秒與 10 Click 沒有幫助
顯示適當的連字
Fig 4b, LayoutNG
這三個組別會像預期般形成一種語言

內容大小與內容元素

針對根據內容調整大小的元素 (例如內嵌區塊),目前的版面配置引擎會先計算區塊的大小,然後再對內容執行版面配置。在某些情況下 (例如字型核心會過度使用),這可能會導致內容和區塊的大小不相符。在 LayoutNG 中,由於區塊的大小是根據實際內容調整大小,所以此失敗模式已經排除。

以下範例顯示依據內容設定的黃色區塊。也就是使用 Lato 字型進行裝飾,調整 T 和 - 之間的間距。黃色方塊的邊界應與文字的邊界相符。

文字容器結尾顯示結尾的空白字元
圖 5a,舊版版面配置引擎
注意最後一個 T 之後的結尾空白字元
文字邊界沒有多餘空格
圖 5b,LayoutNG
請注意方塊的左側和右側邊緣與文字邊界的相符

換行

與上述問題類似,如果「大小至內容」區塊的內容大於區塊 (較大),有時內容可能會產生不必要的包裝。這種情況相當少見,但有時也會出現在混合方向性內容中。

顯示太早換行,導致多出空間
圖 6a,舊版版面配置引擎
請注意不必要的換行符號和右側多餘的空白
未顯示不必要的空格或換行符號
圖 6b,LayoutNG
請注意方塊的左側和右側邊緣與文字邊界的相符

其他資訊

如要進一步瞭解 LayoutNG 修正的特定相容性問題和錯誤,請參閱上方連結中的問題,或在 Chromium 錯誤資料庫中搜尋標示為「已修正 In-LayoutNG」的錯誤。

如果您懷疑 LayoutNG 有可能導致網站損毀,請提交錯誤報告,我們會進行調查。