writing-mode 是控制内联元素的显示的,和 float 属性有些类似,writing-mode 可以实现文字竖向的排版。

writing-mode语法

writing-mode有两套语法,一套是IE私有的,一套是CSS规范属性。

CSS3语法

/* 关键字值 */
writing-mode: horizontal-tb; /* 默认值 */
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* 全局值-关键字 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;
  • 默认值horizontal-tb表示文本流是水平方向(horizontal)的,元素是从上往下(tb:top-bottom)堆叠的。
  • vertical-rl表示文本是垂直方向(vertical)展示,然后阅读的顺序是从右往左(rl:right-left),跟我们古诗的阅读顺序一致。
  • vertical-lr表示文本是垂直方向(vertical)展示,然后阅读的顺序还是默认的从左往右(lr:left-right),也就是仅仅是水平变垂直。

下面是各个值下的中英文表现对照(参考自MDN):
对照表
使用text-orientation:upright可让英文字符竖立,IE不支持,FF和Chrome支持。

IE浏览器语法

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

各个属性值的表现如下(参考自微软
对照表

参考:
改变CSS世界纵横规则的writing-mode属性