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>

別的地方能用嗎