區塊分段:當 CSS 區塊層級方塊 (例如區段或段落) 與整體內容不符時,系統會將該方塊分成多個片段 (稱為片段分段)。片段分析器不是元素,而是多欄版面配置中的資料欄,或分頁媒體中的頁面。
內容必須位於「分割內容」中,才會發生片段化情形。分割內容最常由多欄容器 (內容分割為多個資料欄) 或列印時 (內容會分割成多個頁面) 來建立。系統可能會將有多行的長段落分割為多個片段,讓第一行將第一行放在第一個片段中,其餘那行則會放在後續的片段中。
區塊片段化等同另一種常見的片段處理類型:行分碎,或稱為「斷行」。任何包含多個字詞 (任何文字節點、任何 <a>
元素等) 且允許換行的內嵌元素,都可能會分割成多個片段。將每個片段放入不同的線條方塊。線框是內嵌片段,相當於欄和頁面的分段器。
LayoutNG 區塊片段
LayoutNGBlockFragmentation 是 LayoutNG 的分割引擎重寫引擎,最初於 Chrome 102 推出。就資料結構而言,此版本以「片段樹狀結構」直接表示的 NG 片段,取代多個 NG 資料結構。
舉例來說,我們現在支援「break-before'」和「break-after」CSS 屬性中的「avoid」值,避免作者在標頭之後立即中斷。當頁面中最後一個項目是標頭,而該區段的內容從下一頁開始時,通常看起來會讓人困惑。建議您最好在標頭「之前」換行。
Chrome 也支援片段溢位現象,因此單體 (遭取代) 的單體內容不會切割成多個欄,同時也能正確套用陰影和變形等繪製效果。
LayoutNG 中的區塊片段現已完成
Chrome 102 推出的核心分割 (區塊容器,包括線版面配置、浮點值及流外定位)。Chrome 103 版出貨了 Flex 和網格的碎片化技術,以及 Chrome 106 推出的表格分割作業。最後,我們會在 Chrome 108 推出列印功能。封鎖片段功能是最後一項需要舊版引擎來執行版面配置的功能。
自 Chrome 108 起,舊版引擎無法再使用舊版引擎執行版面配置。
此外,LayoutNG 資料結構可支援繪製和命中測試,但對於讀取版面配置資訊的 JavaScript API,我們會使用部分舊版資料結構,例如 offsetLeft
和 offsetTop
。
運用 NG 處理所有作業後,您就能實作及推出僅有 LayoutNG 實作 (且沒有舊版引擎對應項目) 的新功能,例如 CSS 容器查詢、錨定位置、MathML 和自訂版面配置 (Houdini)。針對容器查詢,我們提前發布了,但系統尚未支援列印功能,請開發人員留意。
我們在 2019 年推出第一部分 LayoutNG,包括一般區塊容器版面配置、內嵌版面配置、浮點值和流出式定位,但不支援彈性、格線或表格,甚至完全不支援區塊片段化。我們將改回使用舊版版面配置引擎,來處理彈性、格線、表格,以及任何與區塊分段相關的內容。即使是在零碎內容中的區塊、內嵌、浮動和流出元素的情況也是如此;如您所見,升級這類複雜的版面配置引擎就定位,就像舞蹈一樣簡單。
此外,在 2019 年中旬之前,LayoutNG 區塊片段版面配置的主要功能已導入 (位於旗標後方)。那麼,為什麼出貨時間這麼久?簡而言之,片段必須能與系統的各個舊版正確共存,這些舊版部分必須等到所有依附元件升級後才能移除或升級。
舊版引擎互動
舊版資料結構仍會負責讀取版面配置資訊的 JavaScript API,因此我們必須以理解的方式將資料寫回舊版引擎。這包括正確更新舊版的多欄資料結構 (例如 LayoutMultiColumnFlowThread)。
舊版引擎備用偵測與處理方式
有內容無法透過 LayoutNG 區塊片段處理時,我們必須改回使用舊版版面配置引擎。運送核心 LayoutNG 區塊片段時,包含彈性、格線、表格以及所有列印內容。這種做法特別複雜,因為我們必須先偵測是否需要使用舊版備用項目,才能在版面配置樹狀結構中建立物件。例如,我們需要在已知存在多欄容器祖系之前先進行偵測,並且尚未知道哪個 DOM 節點會成為「格式化背景」。這並不是一個小雞蛋的問題,但只要有嚴重的誤報情形 (在毫無必要時就會恢復舊版),因此這沒有關係,因為該版面配置行為中的所有錯誤都是 Chromium 的已經存在,而不是新的問題。
預塗樹步道
預先繪製是指我們在設計前完成版面配置後的一件事,主要的挑戰在於,我們仍需瞭解版面配置物件樹狀結構,但現在有了 NG 片段,那我們該如何處理呢?我們會同時行走版面配置物件和 NG 片段樹狀結構!這個過程相當複雜,因為繪製兩棵樹並不困難。
雖然版面配置物件樹狀結構的結構與 DOM 樹狀結構十分類似,但片段樹狀結構是版面配置的「輸出」,而非其輸入內容。除了能反映任何片段化 (包含內嵌片段 (行式片段) 和區塊片段 (資料欄或頁面片段)) 的影響,在「含區塊」與將片段做為包含區塊的 DOM 子系之間,也具備直接的父項與子項關係。舉例來說,在片段樹狀結構中,由絕對位置元素產生的片段是其所含區塊片段的直接子項,即使「外流」位置的子系和其包含的區塊之間,祖系鏈結中也有其他節點也是如此。
如果片段內有一個位置出去的元素,情況會更加複雜,因為這時流出的片段就會成為片段分母的直接子項 (而非 CSS 認為包含區塊的子項)。這個問題必須先解決,才能與舊版引擎並存。LayoutNG 旨在靈活支援所有現代版面配置模式,因此未來我們應該能簡化這個程式碼。
舊版分割引擎的問題
舊版引擎是在網頁早期設計,實際上並不表示資料零散的概念,即使技術上也存在零碎化功能 (為了支援列印功能)。片段化支援只是透過加上方 (列印) 或翻新 (多欄) 的功能,
版面配置可分割的內容時,舊版引擎會將所有內容版面配置成一個寬條,寬度為欄或頁面的內嵌大小,高度則與必須包含內容一樣高度。網頁套用這個多條尺寸後,網頁並不會顯示。您可以想像成是一個虛擬網頁,之後又重新安排顯示,使其最終呈現。這個做法的概念類似於將整份紙本報紙列印成一欄,然後使用剪刀切成第二個步驟。(以前,有些報紙實際上使用類似這樣的技術!)
舊版引擎會追蹤虛構網頁或欄邊界。這樣就能將超出邊界的內容微調在下一頁或另一欄。舉例來說,如果引擎認為目前網頁只佔一行的上半部,就會插入一個「分頁符號」,使它向下推至下一頁的位置。接著,在版面配置預先繪製和去除部分內容 (「使用剪刀和位置剪裁內容,將內容剪裁至網頁) 之後,大部分分段作業都會在版面配置進行前進行。這幾乎根本不可行,例如在片段「之後」套用轉換和相對定位 (規格需求為 )。此外,雖然舊版引擎中的表格分割功能支援,但完全不支援彈性或格線分割。
在舊版引擎中,三欄版面配置在內部的表示方式,然後再使用剪刀、位置和黏著方式 (高度指定高度,因此高度只有四行,但底部會多出一些空間):
由於舊版版面配置引擎實際上並未在版面配置過程中片段內容,因此有許多不尋常的構件,例如相對定位和轉換套用有誤,以及在資料欄邊緣裁剪方塊陰影。
以下為包含文字陰影的範例:
舊版引擎無法妥善處理這個問題:
您認為第一欄中的文字陰影為何會被裁剪,改為放置在第二欄的頂端?這是因為舊版版面配置引擎無法解讀資料片段。
如下所示:
接著,我們要使用轉換和盒子陰影,讓畫面更複雜。您會發現在舊版引擎中,會出現錯誤裁剪和欄出血的情況。這是因為轉換符合規格,應用於套用版面配置後、分段處理的效果。LayoutNG 片段皆可正常運作。這增加了 Firefox 之間的互通性,此版本已提供良好的分割支援,且此區域大部分的測試也都通過了 Firefox。
舊版引擎同樣會對大型單體式內容造成問題,如果內容不符合分割為多個片段的資格,即為單體式。溢位捲動的元素是單體式,因為使用者不適合在非矩形區域捲動。線條方塊和圖片是其他單體式內容的範例。範例如下:
如果單體式內容太高,無法容納於資料欄內,舊版引擎會妥善分割內容 (試圖捲動可捲動的容器時,會顯得非常「有趣」):
這和 LayoutNG 區塊片段的做法不同,並不會讓第一欄溢位第一欄:
舊版引擎支援強制中斷功能。舉例來說,<div style="break-before:page;">
會在 DIV 之前插入分頁符號。不過,這項功能僅支援找出最佳未強制執行廣告插播時間點。它支援 break-inside:avoid
和孤兒和喪偶,但是如果透過 break-before:avoid
提出要求,就無法避免在區塊之間中斷。請參閱以下範例:
在這裡,#multicol
元素的每一欄都有 5 行空間 (因為其高度為 100px,行高為 20px),因此所有 #firstchild
都可以納入第一欄。不過,其同層 #secondchild
含有 break-before:avoid,代表內容希望在兩者之間沒有出現中斷情形。由於 widows
的值為 2,我們需要將 2 行 #firstchild
推送到第二欄,以執行所有中斷避免要求。Chromium 是第一個完整支援上述功能組合的瀏覽器引擎。
NG 片段化的運作方式
NG 版面配置引擎通常會先以深度穿越 CSS 方塊樹狀結構,來排列文件。節點的所有子係都配置完畢後,只要產生 NGPhysicalFragment 並返回上層版面配置演算法,即可完成該節點的版面配置。這個演算法會將片段新增至其子項片段清單,等到所有子項完成後,為其產生一個含有其子項片段的片段。使用這個方法時,系統會建立整份文件的片段樹狀結構。這是過度簡化的結果:舉例來說,非流動位置元素必須在 DOM 樹狀結構中的位置向上攀升至包含區塊,才能排出這些元素。為了簡單起見,我略過這項進階說明。
除了 CSS 方塊本身,LayoutNG 也提供版面配置演算法的限制空間。這會為演算法提供相關資訊,例如可用的版面配置空間、是否建立新的格式內容,以及從先前內容取得的中間邊界收合結果。限制空間也知道片段分離器的展開區塊大小,以及目前的區塊偏移。這代表中斷的位置。
如果牽涉到區塊片段化,子系的版面配置必須在休息時停止。損毀的原因包括網頁或欄的空間用盡,或是強制中斷。然後,我們會針對已造訪的節點產生片段,然後一路傳回到零碎結構定義的根層級 (multicol 容器,若為列印則為文件根目錄)。然後,在零散環境的根目錄下,準備加入新的片段分析器,再次進入樹狀結構,繼續接續之前中斷的地方。
在休息後提供繼續版面配置所需的關鍵資料結構稱為 NGBlockBreakToken。其中包含在下一個片段化器中正確恢復版面配置所需的所有資訊。NGBlockBreakToken 會與節點相關聯,並形成 NGBlockBreakToken 樹狀結構,讓需要繼續使用的節點能夠代表每個節點。NGBlockBreakToken 會附加至針對中斷處的節點所產生的 NGPhysicalBoxFragment。中斷符記會傳播到父項,形成中斷符記的樹狀結構。如果我們需要在節點「之前」 (而不是在節點內) 進行破壞,但沒有產生片段,但父項節點仍需為節點建立「中斷前」破壞符記,這樣當我們前往下一個分段器中節點樹狀結構中的相同位置時,我們就能開始做它。
當系統要求超出零碎段空間 (未強制中斷) 或系統要求強制中斷時,就會插入廣告插播。
規格中設有使用以下規則來確保未強制規定的休息時間,但剛插入空間剛好插入的休息時間不一定正確。舉例來說,break-before
等各種 CSS 屬性會影響選擇中斷位置的選擇。
在版面配置期間,為了正確實作未強制執行的中斷規格區段,我們必須追蹤可能的理想中斷點。這筆記錄表示,如果我們在違反逃避要求 (例如 break-before:avoid
或 orphans:7
) 的空間用盡空間,我們就能回頭使用找到最後一個最可能的中斷點。每個可能的中斷點都會獲得分數,範圍從「只做這個作為最後手段」到「最適合打破的地方」,範圍之間包括值。如果廣告插播地點分數為「完美」,表示即使在該地違反規則,也不會違反任何破壞規則 (而且如果能準確算出此分數是在空間不足的時,就不需要重新尋找更好的建議)。如果分數是「上次排序」,中斷點也算不算有效,但如果我們找不到更好的中斷點,可能還是會中斷,以避免片段溢位。
有效的中斷點通常只會在同層 (線框或區塊) 之間出現,父項和第一個子項之間則否 (C 類別中斷點為例外狀況,但我們無需討論這些中斷點)。例如,在同個含有 break-before:avoid 的區塊之前,「有」有效的中斷點,但介於「完美」和「上次排序」之間。
在版面配置過程中,我們會追蹤目前在 NGEarlyBreak 結構中目前找到的最佳中斷點。「提前中斷」是指區塊節點前後或一行 (區塊容器行或彈性線) 之前的中斷點,我們可能會形成 NGEarlyBreak 物件的鏈結或路徑,以防最佳的中斷點位於空間不足時我們先前行過的深處。範例如下:
在本例中,空間不足,#second
之前就有空間不足,但含有「break-before:avoid」,使得中斷位置分數為「違規的休息時間」。此時,我們在「第 3 行」之前,有一個「在 #middle
內部 #outer
> 內部 #outer
> 內部 > 內部 > 之前 > 的 NG 早期分行」鏈結,而且我們應該在「第 3 行」之前中斷。#inner
因此,我們需要從 #outer 的開頭傳回並重新執行版面配置 (同時傳遞找到的 NGEarlyBreak),才能在 #inner 的「第 3 行」之前斷行。(我們在「第 3 行」之前會換行,因此剩餘的 4 行最終會進入下一個片段化器,以便遵循 widows:4
)。
這個演算法的設計宗旨,就是一直在盡可能地中斷可能的中斷點 (根據規格的定義),在無法滿足所有條件的情況下,以正確的順序捨棄規則。請注意,每個分割流程最多只能重新版面配置一次。在第二次版面配置傳遞時,最佳的中斷位置已傳遞至版面配置演算法,這是在第一個版面配置傳遞中找到的中斷位置,並在該回合的版面配置輸出中提供。在第二種版面配置傳遞中,等到空間用盡之前,我們並不會釋出空間 (實際上也沒有發生錯誤),因為我們已提供超棒 (還有理想中) 插入預先休息的時間,以免違反任何不必要的破壞規則。我們來看看那樣,休息一下
在值得注意的是,我們有時確實會需要違反部分破壞性避免要求,以避免發生片段化溢位現象。例如:
這裡的空間已經在 #second
之前用完,但卻有「break-before:avoid」。就像上一個範例一樣,這已轉譯成「避開違規行為」。我們也提供「violating Orphans and widows」(在「第 2 行」之前的 #first
內) 的 NGEarlyBreak 檔案雖然仍然不盡完美,但仍優於「避免的休息時間」。因此,我們會在「第 2 行」之前換行,以免違反孤兒 / 孤兒請求。規格會在 4.4. 未強制執行的中斷點:如果中斷點不足以避免片段溢位,此方法會定義要優先忽略哪些破壞規則。
結論
LayoutNG 區塊片段專案的功能目標,在於提供舊版引擎所支援所有項目的 LayoutNG 架構支援實作,除了修正錯誤之外,盡可能減少其他項目。例如,主要例外狀況是更有效的破壞性支援 (例如 break-before:avoid
),因為這是片段處理引擎的核心部分,所以一開始必須就在那裡,因為之後新增時,意味著再度重寫。
LayoutNG 區塊片段完成後,可以開始新增功能,例如支援在列印時支援混合的頁面大小、列印時支援混合頁面大小、@page
邊界方塊、box-decoration-break:clone
等等。和一般的 LayoutNG 一樣,新系統的錯誤率和維護負擔長期下來將大幅降低。
特別銘謝
- Una Kravets:提供精美的「手工螢幕截圖」。
- Chris Harrelson:用於校對、意見回饋和建議。
- Philip Jägenstedt 取得意見回饋和建議。
- Rachel Andrew:用於編輯和第一個多欄範例圖表。