今天是双十一，不知道各位剁手了没有，每年的狂欢节全民都在烧钱，在这里也温馨提醒大家：赶紧准备好土，该吃土了！话说自从知道马云和他的淘宝后，我拥有了一辆车——购物车，也终于认识到自己最大的不足——余额不足，所以这个双十一什么都没有买，听说今年仅 2 分 05 秒交易额就破百亿，一不小心错失参与一个百亿大项目，真是遗憾啊！

言归正传，这次要介绍的两个属性就是 css 中改变水平流向的direction属性和改变文本流的writing-mode属性，如果你没听过这两个属性，那正好学习下，没准以后会遇到它们。

direction

这个属性的兼容性特别好，所有浏览器包括 IE 都支持它，w3school 对该属性的介绍是规定文本的方向 / 书写方向。简单讲就是让文字从左向右还是从右向左显示，所以它有以下两个属性值

direction: ltr | rtl ;

默认值是 ltr，也就是 left-to-right，表示文字从左至右显示，很形象好记。它可以让图片或者按钮不按原本顺序显示，例如下面的例子


代码如下:
1
2
3
4
<div dir="rtl">
    <img src="elephant.jpg" alt="">
    <img src="boy.jpg" alt="">
</div>

本来正常大象的图片 img 标签在男孩之前，但是因为我们设置了dir="rtl"这是写在元素标签的缩写方法，也可以在 css 中写成direction: rtl，所以水平流向的顺序改变了，现在是从右往左，所以上面的图片显示男孩在大象图片的左边。通过这个例子现在知道 direction 的用处了，但是如果你把 div 里的内容换成文字，此时这个属性就不起作用了，你看不到什么反转的效果，这就需要介绍接下来的这个unicode-bidi属性

unicode-bidi: bidi-override;

direction: rtl只能作用于图片或者按钮标签，而上面这个属性的作用就是对文字起作用的，多说无益，来看下实现效果。

1
2
3
<div dir="rtl">
   我是 Light Lin，欢迎来到我的公众号
</div>

在浏览器的效果是这样


我们现在修改下代码
1
2
3
4
5
6
7
8
9
10
<head>
    <style>
        div{
           unicode-bidi: bidi-override;
        }
    </style>
</head>
<div dir="rtl">
   我是 Light Lin，欢迎来到我的公众号
</div>

运行出来后是这个效果


可以看到，有了unicode-bidi: bidi-override; 的作用，现在文字已经能改变水平流向了，关于该属性的更多详细信息可以去网上查阅。

writing-mode

这个属性同样兼容性非常好，浏览器都支持它。MDN文档说它定义了文本水平或垂直排布以及在块级元素中文本的行进方向。它的主要取值有以下几个

1
2
3
4
5
6
7
8
9
// 关键字
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

// 全局属性值
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

horizontal-tb 默认值，表示了文本是水平方向（horizontal）的，从上至下堆叠（top-bottom）。
vertical-rl 表示了文本是垂直方向的，从右往左堆叠。
vertical-lr 表示了文本是垂直方向的，从左往右堆叠。
看看下面的例子

1
2
3
<div style="writing-mode: horizontal-tb">
   我是 Light Lin，欢迎<br>来到我的公众号和博客,<br>现在是默认显示
</div>

运行截图如下


现在改改代码，换下 css 值
1
2
3
<div style="writing-mode: vertical-rl">
    我是 Light Lin，欢迎<br>来到我的公众号和博客,<br>现在是从右往左显示
</div>

效果变成了下面这样


在改下代码，看看又变了什么
1
2
3
<div style="writing-mode: vertical-lr">
    我是 Light Lin，欢迎<br>来到我的公众号和博客,<br>现在是从左往右显示
</div>

通过上面这三个效果演示，应该就能理解writing-mode以及它的三个属性值的作用效果了，有没发现第二种从右往左实际上就是古诗词的排版方式？
值得注意的是，在 IE 浏览器里有另外的一套写法，如下

writing-mode: lr-tb; // 相当于默认值 horizontal-tb
writing-mode: tb-rl; // 相当于 vertical-rl

IE 浏览器里支持的不止上面这两个，多达 11 个，感兴趣的可以上网去查阅更多。

总结

css 有很多很多属性值，writing-mode 和 direction 平常可能比较少见，但是我们学习东西就是要广泛涉猎，虽然现在对它们的实际应用知道得较少，但说不定以后的某天就用到并解决问题了呢，所以先好好认识下他们吧！