微信号:gh_b206cf608d16

介绍:爆米兔,是一个H5营销在线制作工具.

来,一起帮忙制定CSS规范吧

2018-06-13 13:40 李松峰

编者按:奇舞团在积极参与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用于控制受首字母影响而缩短的行如何绕排,是绕着首字母的矩形盒子排,还是绕着首字母字形的轮廓排?这个属性目前有如下几个关键字值。

  • none:不考虑字母轮廓,受影响的行均沿首字母盒子外边距的轮廓排布。


  • first:如果首字母是一个独立的字母,后面跟着空格,则如同none;如果首字母是一个单词中的第一个字母,则第一行如同all

  • all:受影响的所有行的起点都必须顶到首字母字迹线外的一定位置。

  • grid:同none,但首字母的“外扩区”(exclusion area)会以常规单字网格的整数倍为限进行扩展。

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-outsideshape-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是其他值(如nonefisrtgrid),则即使shape-outside: ...;存在也不起作用。

这就是截止本文章发布时,CSS工作组对该API的最新意见。笔者认为,经过前面的讨论和修订,这个API相对更合理了,体现了CSS标准制定的开放性。如果你对此也有自己不同的看法,欢迎留言。

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。


 
奇舞周刊 更多文章 同学,W3C了解一下 Deno 并不是下一代 Node.js 在 Node.js 中使用 Promise.prototype.finally 奇舞周刊第 262 期:你不是一个前端 教科书式的正则匹配
猜您喜欢 Atlas支持mysql的prepare特性吗 疯转|Java程序员必须知道的10个调试技巧 iOS 移动端面向文档开发 中美互联网金融与Fintech的比较分析 基于Zookeeper的分布式锁与领导选举