writing-mode

writing-mode 这个 CSS 属性，感觉是不是很少见，很少用！其实往往是比较 '生僻'，有些时候能起到很大的作用。

实际上 writing-modu 这个属性已经在十多年前就已经存在了，在 IE5.5 浏览器就已经支持了，可以这个属性出来的这么早，资格这么老，为什么沉寂了快 20 年？

• 是因为，在很长一段时间里，FireFox, Chrome 这些比较常用的浏览器中都不支持 writing-mode, 可以说它就是 IE 的私有产物，又加上我们对 IE 浏览器也没有什么好感。所以就冷落了 writing-mode。

• 然而，现在前端技术的快速发展，各大浏览器纷纷对 writing-mode 实现了更加标准的支持。

• 先看一下它的兼容性(图片来自 caniuse 网站)

  
  兼容性

• writing-mode 语法

• horizontal-tb 表示，水平方向自上而下的书写方式。

• vertical-rl 表示文本是垂直方向展示，阅读的顺序是从右往左，跟古诗的阅读顺序一致。

• vertical-lr 表示文本是垂直方向展示，阅读的顺序还是默认的从左往右，也就仅仅是水平变垂直。

• lr-tb: 左 - 右，上 - 下。对象中内容在水平向上从左向右流入，后一行在前一行的下面。所有字形都是竖直向上的。 这种布局通常是罗马语系使用 (IE)

• tb-rl: 上 - 下，右 - 左。内容在垂直方法上从上向下流入，自右向左。后一竖在前一竖行的左面。全角字符是垂直向上的，半角字符如拉丁字母顺时针旋转 90 度。这种布局是东亚语系通常使用的 (IE)

• 下面是各个中英文的对照表 (图片截自 MDN)

  
  对比图