CSS 文本方向

一般地，正常网页文本方向都是从上到下，从左到右。实际上，有多种设置文本方向的属性，除text-align外，HTML全局属性中有一个"dir"属性就是专门用来设置文本方向的，设置文本方向的CSS样式有direction、unicode-bidi和writing-mode。

[1] writing-mode

writing-mode原先是IE的私有属性，原先的属性是lr-tb(左-右，上-下)和tb-rl(上-下，右-左)。其中writing-mode:tb-rl常用于触发haslayout。但W3C将writing-mode属性标准化后，其属性值也发生了变化。

writing-mode属性与其他改变文本方向的属性非常不一样。它不仅改变文本的显示方向，更直接改变了文本流的方向。如果其属性值改为vertical-rl，则文本流改成了垂直方向，则text-align变成了垂直对齐，vertical-align变成了水平对齐。

值: horizontal-tb | vertical-rl | vertical-lr

初始值: horizontal-tb

应用于: 除表格类元素之外的所有元素

继承性: 有

[注意] safari和移动端IOS和android需要添加-webkit-前缀；IE浏览器只支持自己的私有属性值。

[2] dir

dir是HTML的全局属性，专门用来设置文本的方向

值: ltr | rtl | auto

//ltr: 1 23 456
//rtl: 456 23 1

[3] direction

direction是设置文本方向的CSS样式

值: ltr | rtl | inherit

初始值: ltr

应用于: 所有元素

继承性: 有

[注意] 想让direction样式在inline元素上起作用，需要unicode-bidi样式的相关设置

[注意] 设置direction样式时，HTML元素的全局属性dir无效

ltr: 从左到右(left to right)
rtl: 从右到左(right to left)

// ltr: 1 23 456
// rtl: 456 23 1

[4] unicode-bidi

unicode-bidi是一种更健壮的处理文本方向的方式

值: normal | embed | bidi-override | isolate | isolate-override | plaintext | inherit

初始值: normal

应用于: 所有元素

继承性: 无

[注意] unicode-bidi属性应用于flex弹性盒模型上有问题，除非伸缩容器只包含一个匿名伸缩项目时有效，其余情况都无效；isolate、isolate-override、plaintext是实验属性值，几乎没有浏览器支持。