編者按：奇舞團在積極參與WEB標準的討論與制定， 今天發的這篇文章是關於CSS工作組的正討論的一個特性，歡迎大家踴躍留言，貢獻自己的力量， 我們會幫大家反饋給CSS工作組的哦！
CSS工作組又要開會了，其中一個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);則會導致文本基於圖片的透明區域輪廓繞排，比如：
（圖片來源：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用於控制受首字母影響而縮短的行如何繞排，是繞著首字母的矩形盒子排，還是繞著首字母字形的輪廓排？這個屬性目前有如下幾個關鍵字值。
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標準制定的開放性。如果你對此也有自己不同的看法，歡迎留言。
關於奇舞周刊《奇舞周刊》是360公司專業前端團隊「奇舞團」運營的前端技術社區。關注公眾號後，直接發送連結到後臺即可給我們投稿。