LayoutNG 預定於 Chrome 76 版發布,是全新的版面配置引擎,已預留多年時間。我們不僅改善了幾項令人期待的立即改善,也將推出更多效能提升,更即將推出進階版面配置功能。
最新消息
- 改善效能隔離。
- 更妥善支援拉丁文以外的文字系統。
- 修正浮點與邊界的許多問題。
- 修正大量網路相容性問題。
請注意,LayoutNG 將分階段推出。在 Chrome 76 版中,LayoutNG 適用於內嵌和區塊版面配置。後續版本會替換其他版面配置基元 (例如資料表、Flexbox、格線及區塊片段)。
開發人員看到的異動內容
雖然對使用者的可見影響應不大,但 LayoutNG 能以非常細微的方式改變部分行為、修正數百項測試,並改善與其他瀏覽器的相容性。儘管我們已盡最大努力,這可能會導致部分網站和應用程式轉譯或行為稍有不同。
效能特性也大不相同;雖然整體效能與先前相近或略有更好,但某些用途可能會提升效能,而其他用途則預期至少需要短期內降低。
浮動
LayoutNG 重新實作對浮動元素 (float: left;
和 float: right;
) 的支援,可修正與其他內容相關的浮點位置的正確性問題。
疊加的內容
舊版浮動式實作在將內容放在浮動元素周圍時,無法正確計算邊界,導致內容部分或完全重疊浮動式元素。這個錯誤最常見資訊清單的情況,就是圖片位於段落旁,且避免邏輯無法將行的高度納入考量。(請參閱 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)。
「圖形」是語言書寫系統的最小單位。舉例來說,在英文和其他使用拉丁字母的語言中,每個字母都是圖形。
下圖分別顯示了舊版版面配置引擎和 LayoutNG 中的下列 HTML 算繪情形:
<div>نسق</div>
<div>نس<span>ق</span></div>
中文、日文和韓文 (CJK) 連字
雖然 Chromium 已預設支援連字並預設啟用,但有部分限制:舊版版面配置引擎不支援涉及多個 CJK 程式碼點的算繪效果,因為轉譯最佳化。LayoutNG 可移除這些限制,並支援不限指令碼的文字
以下範例顯示如何使用 Adobe SourceHanSansJP 字型轉譯三種可斟酌的連字:
內容大小與內容元素
針對根據內容調整大小的元素 (例如內嵌區塊),目前的版面配置引擎會先計算區塊的大小,然後再對內容執行版面配置。在某些情況下 (例如字型核心會過度使用),這可能會導致內容和區塊的大小不相符。在 LayoutNG 中,由於區塊的大小是根據實際內容調整大小,所以此失敗模式已經排除。
以下範例顯示依據內容設定的黃色區塊。也就是使用 Lato 字型進行裝飾,調整 T 和 - 之間的間距。黃色方塊的邊界應與文字的邊界相符。
換行
與上述問題類似,如果「大小至內容」區塊的內容大於區塊 (較大),有時內容可能會產生不必要的包裝。這種情況相當少見,但有時也會出現在混合方向性內容中。
其他資訊
如要進一步瞭解 LayoutNG 修正的特定相容性問題和錯誤,請參閱上方連結中的問題,或在 Chromium 錯誤資料庫中搜尋標示為「已修正 In-LayoutNG」的錯誤。
如果您懷疑 LayoutNG 有可能導致網站損毀,請提交錯誤報告,我們會進行調查。