zw-1988.com

writing-mode

一个很好用的代码,原本竖排文字要么一个一个竖排过来,要么用插件或者SVG,现在 writing-mode 就可以为我们实现.
这个代码在很早就出现过，但是在很长一段时间里,FireFox, Chrome这些现代浏览器都不支持writing-mode，仅仅支持IE浏览器,因IE浏览器的特行所以自然对writing-mode也不待见.
不知道什么时候起writing-mode悄悄的被各大浏览器所兼容,其本身的强大属性让大家对它更加钟爱.

兼容性：

• 浅绿 = 支持
• 红色 = 不支持

值：

lr-tb
IE7+浏览器支持。初始值。内容从左往右( l eft- r ight)，从上往下( t op- b ottom)水平流动，以及下一行水平元素在上一行元素的下面，所有符号都是直立定位。基本应用都是使用这种布局。
rl-tb
IE7+浏览器支持。内容从右往左( r ight- l eft，从上往下( t op- b ottom)水平流动，以及下一行水平元素在上一行元素的下面，所有符号都是直立定位。这种布局适合从右往左书写的语言，例如阿拉伯语，希伯来语，塔安那文，和叙利亚语。
tb-rl
IE7+浏览器支持。内容从上往下( t op- b ottom)，从右往左( r ight- l eft)垂直流动，下一个垂直行定位于前一个垂直行的左边，全角符号直立定位，非全角符号(也可以被称作窄拉丁文或者窄假名符号)顺时针方向旋转90°。这种布局多见于东亚排版。
bt-rl
IE7+浏览器支持。内容从下往上( b ottom- t op)，从右往左( r ight- l eft)垂直流动，下一个垂直行定位于前一个垂直行的左边，全角符号直立定位，非全角符号(也可以被称作窄拉丁文或者窄假名符号)顺时针方向旋转90°。此布局多见于在东亚垂直排版从右往左的文本块上。
tb-lr
IE8+浏览器支持。内容从上往下( t op- b ottom)，从左往右( l eft- r ight)垂直流动。下一个垂直行在前一个的右边。
bt-lr
IE8+浏览器支持。内容从下往上( b ottom- t op)，从左往右( l eft- r ight)垂直流动。
lr-bt
IE8+浏览器支持。内容从下往上( b ottom- t op)，从左往右( l eft- r ight)水平流动。下一个水平行在前一行的上面。
rl-bt
IE8+浏览器支持。内容从下往上( b ottom- t op)，从右往左( r ight- l eft)水平流动。
lr
IE9+浏览器支持。在SVG和HTML元素上使用。等同于lr-tb.
rl
IE9+浏览器支持。在SVG和HTML元素上使用。等同于rl-tb.
tb
IE9+浏览器支持。在SVG和HTML元素上使用。等同于tb-rl.

实际结果

参考自(dome)