direction和writing-mode的介绍

direction介绍

属性值和兼容都很好

CSSdirection属性简单好记，属性值少，兼容性好，关键时候省心省力，是时候给大家宣传宣传，不要埋没了人家的特殊技能。

Chrome	Safari	Firefox	Opera	IE	Android	iOS

2.0+	1.3+	Any	9.2+	5.5+	Any	3.1+

从表中可以看出android和ios的很早版本就在支持direction属性了。基本上，大家只要关心下面这两个属性值就好了：

direction: ltr;   // 默认值

direction: rtl;//标点符号也是反的，适用于阿拉伯文字和古汉语等

其中，ltr是初始值，表示left-to-right，就是从左往右的意思，
rtl则是另外一个值，right-to-left缩写，就是从右往左的意思。
默认时的图片是从左往右依次排布的；就是direction: ltr; // 默认值

<p><img src="demo.jpg" alt=""><img src="demo1.jpg" alt=""></p>

那通过direction: rtl; 就可以改变内联块元素的顺序：从右向左依次排布：

<p class="rtl"><img src="demo.jpg" alt=""><img src="demo1.jpg" alt=""></p>

<style>

.rtl{

        text-align: left;

        direction:rtl;

    }

</style>

看吧，很神奇对不对，代码里并没有改变书写顺序；只需要加上{text-align:left;direction:rtl;}就让文档流的渲染改变了方向；

direction只能改变内联块元素的顺序，对于内联元素和text-align是一样的

那什么是“内联块元素”呢？包括替换元素(replaced element)，如<img>,<button>,<input>,<video>,<object>等，或者inline-block的元素。因此，只有任意元素设置display:inline-block，都会看到左右顺序的变化。

简单的一个domo

在做弹窗的时候；一般都有确定和取消button；有的是左‘取消‘右‘确认‘，有的是左‘确认’右’取消’。如果在同一个项目中需要2种情况都存在的时候呢？
第一种；可以用flex布局，但flex布局在安卓低版本webview下有兼容问题；
第二种就是用direction:rtl；属性了；

<div style="text-align: center;"><span>确定</span><span>取消</span></div>

<style>

 span {

        display: inline-block;

        background-color: #f0f3f9;

        padding: 5px 10px;

        margin: 0 10px;

    }

</style>

<div class='rtl' style="text-align: center;"><span>确定</span><span>取消</span></div>

<style>

.trl{

    direction:rtl;

}

 span {

        display: inline-block;

        background-color: #f0f3f9;

        padding: 5px 10px;

        margin: 0 10px;

    }

</style>

writing-mode介绍

先来看看writing-mode都有哪些属性值：

writing-mode: horizontal-tb;    //默认值 水平从左到右满横行后折行；

writing-mode: vertical-rl;    //垂直从上到下书写满竖行后折行（从右边开始书写）古代汉语的顺序

writing-mode: vertical-lr;    //垂直从上到下书写满竖行后折行（从左边开始书写）

和direction相似writing-mode也是改变文档流的顺序滴，在caniuser网站显示的兼容性基本所有现代浏览器都支持此属性。

中国古诗词

writing-mode属性本来就是为了解决像中国古汉语这样的排版顺序的；像

<style>

 .verticle-mode {

        writing-mode: vertical-rl;

    }

</style>

<div class="verticle-mode">

    <h4>枫桥夜泊</h4>

    <p>月落乌啼霜满天，</p><p>江枫渔火对愁眠。</p><p>姑苏城外寒山寺。</p><p>夜半钟声到客船。</p>

</div>

别的地方能用吗