天天看點

來,一起幫忙制定CSS規範吧

SS工作組又要開會了,其中一個issue是“Allow shape-outside to apply to initial letter”。

标題一目了然,就是“讓initial-letter支援shape-outside”。為了友善大家參與,我們簡單介紹一下這兩個屬性。

shape-outside

shape-outside用于定義元素周圍的文本如何對其進行繞排,比如shape-outside: circle();會導緻文本圍繞圓形對其繞排,而shape-outside: url(img/example.png);則會導緻文本基于圖檔的透明區域輪廓繞排,比如:

來,一起幫忙制定CSS規範吧

(圖檔來源:https://drafts.csswg.org/css-shapes/#shape-margin-property)

initial-letter

initial-letter控制首字母下沉或上升的樣式,另一個屬性initial-letter-wrapping控制受首字母影響而縮短的行如何繞排首字母。

initial-letter接受兩個值:第一個控制首字母高度為幾行,第二個控制首字母下沉幾行。如果高度和下沉的行數相等,可以省略第二個值。比如initial-letter: 3;表示首字母高3行,下沉3行。

initial-letter-wrapping用于控制受首字母影響而縮短的行如何繞排,是繞着首字母的矩形盒子排,還是繞着首字母字形的輪廓排?這個屬性目前有如下幾個關鍵字值。

none:不考慮字母輪廓,受影響的行均沿首字母盒子外邊距的輪廓排布。

first:如果首字母是一個獨立的字母,後面跟着空格,則如同none;如果首字母是一個單詞中的第一個字母,則第一行如同all。

all:受影響的所有行的起點都必須頂到首字母字迹線外的一定位置。

grid:同none,但首字母的“外擴區”(exclusion area)會以正常單字網格的整數倍為限進行擴充。

來,一起幫忙制定CSS規範吧
initial-letter是CSS Inline Layout Module Level 3中定義的一個屬性。CSS Inline Layout Module的目的是替換或擴充CSS 2.1中定義的相關模型。目前這個規範還在制定中。

(以上圖檔來源:https://drafts.csswg.org/css-inline/)

讓inital-letter支援shape-outside

initial-letter-wrapping最多是讓受影響的行沿字母輪廓繞排,而shape-outside則支援比這多得多的形狀。是以就有人提出把shape-outside應用給首字母,也就是本文開頭的issue。

對此,CSS工作組也作出了積極回應,在CSS Inline Layout Module Level 3增加了這一句:

If the value of shape-outside is not none, shape-outside is used instead of the glyph outline.(如果shape-outside的值不是none,則應該依據shape-outside而不是字形繞排。)

API如何設計?

W3C特邀專家、CSS工作組資深編輯fantasai(Elika J. Etemad)最初建議給initial-letter-wrapping引入一個新的關鍵字值wrap。她希望在initial-letter-wrapping: wrap;存在時,shape-outside 才可以取代initial-letter-wrapping,否則仍然以initial-letter-wrapping 的值為準。

但CSS工作組成員、360前端工程師安佳對此發表了自己的看法。安佳認為不增加wrap值,讓shape-outside始終覆寫initial-letter-wrapping 的值更好。理由是這樣簡單、好了解,還可以将initial-letter-wrapping 的值作為後備,即在未設定shape-outside或浏覽器不支援shape-outside或shape-outside值寫錯的情況下,浏覽器都會回退為繼續使用initial-letter-wrapping 的值。

基于安佳的意見,fantasai第二天又修改了自己的建議,看樣子她也同意了不引入新wrap值,而是以現有的all值作為接納shape-outside的開關:

initial-letter-wrap: all; shape-outside: circle(); / _or something else_ /

也就是說,如果initial-letter-wrap: all;和shape-outside: ...;同時存在,則依據shape-outside來繞排。否則,如果initial-letter-wrap是其他值(如none、fisrt或grid),則即使shape-outside: ...;存在也不起作用。

這就是截止本文章釋出時,CSS工作組對該API的最新意見。筆者認為,經過前面的讨論和修訂,這個API相對更合理了,展現了CSS标準制定的開放性。如果你對此也有自己不同的看法,歡迎留言。