CSS 進階（終章）—— CSS 世界流向的掌控者 direction 和 writing-mode

人往高處走，水往低處流，CSS世界亦是如此嗎？至今爲止，咱們討論的CSS彷佛一直遵循不知從何時就印在腦子裏的「從左往右，從上往下」原則。這可能和咱們平常的讀寫順序相關，咱們看文章的時候習慣從左往右，從上往下進行閱讀。然而CSS世界的流向並非固定的，只須要幾條聲明，就能夠改變CSS世界的水平垂直流向。

1.改變水平流向的direction

direction屬性的兼容性很是好卻鮮有人用（又包括我了），不少人甚至都沒有聽過這個屬性，要說這個屬性的做用，可了不起，他能改變水平流的方向。做者對這個屬性對於純文本影響介紹的很少，只提到某些國家的語言是從右往左書寫的，所以這個屬性開發的本意是爲了兼顧這些語言。那麼具體是怎麼兼顧的呢？會給中文帶來什麼影響嗎？作個測試就知道了，測試以下：

<p>文字會倒過來嘛 我打了個空格
 我打了個回車 ？我打了個問號</p>
<style> p{ direction: rtl; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

文字會倒過來嘛 我打了個空格 我打了個回車 ？我打了個問號

根據測試的結果，咱們能夠總結出以下結論:

（1）元素水平流方向改變，所以text-align:start變成右對齊了，對於不支持text-align:start的瀏覽器，則會默認修改text-align:right。

（2）連續的文字/單詞依舊保持連續性，只有在遇到部分"標點"（測試發現，逗號不算，問號能夠，其餘的沒測，你們能夠本身測一測）、「回車」、「空格」等特殊字符的時候纔會分割。

（3）連續的文字/單詞自己並不會倒着寫，也就是‘你好’不會變成‘好你’，實現這個效果須要藉助還有一個屬性的幫忙。

以上是我的對direction對純文本的影響的一些測試，不能保證徹底的準確性，只能根據結果推算原理。下面咱們來看看direction在內聯類元素佈局中的一些使用。

第一個例子是要實如今桌面端的時候，肯定按鈕在左邊，而到移動端的時候，肯定按鈕在右邊。因爲是水平流方向上的位置互換，咱們就能夠藉助direction:rtl；來替換兩個inline-block元素的順序了。

第二個例子實現開頭打點的效果，這個例子我的以爲沒什麼軟用，詳情請參考上面三個結論的第二條，遇到相似問號的標點符號，內容就會出現調換順序的狀況，和原來的閱讀順序不一樣，不知做者本身有沒有測試過這個例子。原文測試用例以下:

<p>做者在這裏只用了逗號，所以文字全都是連續的，咱們就按他的來，給他點面子</p>
<p style="direction: rtl">做者在這裏只用了逗號，所以文字全都是連續的，咱們就按他的來，給他點面子</p>
<style> p{ width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

做者在這裏只用了逗號，所以文字全都是連續的，咱們就按他的來，給他點面子

做者在這裏只用了逗號，所以文字全都是連續的，咱們就按他的來，給他點面子

注意這個只是按照做者的測試用例給的結果，若是你的文章裏有一些諸如空格，問號之類的標點符號，這個效果瞬間崩了。所以不推薦使用這個效果。

2.direction的黃金搭檔unicode-bidi

好了，又來一個聽都沒聽過的屬性，看見Unicode就以爲跟系統屬性可能有關係，然而這個CSS屬性是用來控制字符是否反向顯示的，還記不記得我在講direction的時候提到，純文本的內容並不能徹底反向，direction只對內聯元素起做用，而不是對每一個字符起做用，所以這時候咱們就能夠藉助unicode-bidi來實現文字反向輸出的結果。

unicode-bidi有三個經常使用的屬性，這裏作一個小的總結：

（1）normal。相似於auto，是unicode-bidi的默認屬性，表示正常排列，在設置了direction:rtl的狀況下，圖片、按鈕以及問號、加號等字符會從右往左顯示，可是中文英文字符仍是會從左往右顯示，這裏解釋了上文中問號在左邊的緣由。

（2）embed。embed也表示正常排列，這也就是我爲何強調normal相似於auto的緣由了，normal的計算值是受父元素的排列方式的影響的，而embed不會，embed永遠表示正向排列，而normal不必定。

（3）bidi-override。表示重寫雙向排列，配合direction:rtl，則全部字符均會從右往左方向排列，效果強烈。

下面咱們經過一個例子來驗證一下normal和embed的區別，以及bidi-override的反向排列效果。

!-- 驗證normal和embed的區別 -->
<p style="direction: rtl;unicode-bidi: bidi-override;">
    隨便寫點開頭，<span style="unicode-bidi: normal;">驗證normal和embed的區別</span>，隨便寫點結尾
</p>
<p style="direction: rtl;unicode-bidi: bidi-override;">
    隨便寫點開頭，<span style="unicode-bidi: embed;">驗證normal和embed的區別</span>，隨便寫點結尾
</p>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

隨便寫點開頭，驗證normal和embed的區別，隨便寫點結尾

隨便寫點開頭，驗證normal和embed的區別，隨便寫點結尾

3.能改水平流規則的writing-mode

writing-mode能將頁面默認的水平流改爲垂直流，在設計之初是爲了實現某些文字排版實現垂直顯示的效果，如中國的古詩，就須要以從上到下，從右往左的順序閱讀。

writing-mode有三個關鍵字（不考慮兼容性）。分別是，horizontal-tb（默認值，表示文本流是水平方向），vertical-rl（文本流是垂直方向，閱讀順序是從右往左），vertical-lr（文本流是垂直方向，閱讀順序是從左往右）

因爲writing-mode被設計出來以後，改變了CSS世界的默認規則，使得不少水平方向上的規則忽然在垂直方向上有了用武之地，如text-align:center。本來是用來實現內聯元素水平居中的，當修改了writing-mode的默認值後，即可以讓內聯元素在垂直方向上居中了。本來margin垂直方向上的疊壓，如今在水平方向上也能產生合併。使用margin:auto能夠實現垂直方向上的居中，這樣的例子多的數不勝數，若是你對CSS世界足夠了解的話，本來用在水平方向上的規則如今均可以放到垂直方向上。

本系列的內容就到此爲止了（心裏想法是，終於把這個坑填滿了，後面填的可能有些粗糙，權當是取其精華去其糟粕了）~對前端感興趣的小夥伴點個關注吧~

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。