首先我們先來了解一下writing-mode，direction，unicode-bidi屬性：
dircetion定義和用法：
direction 屬性規定文本的方向 / 書寫方向。
該屬性指定了塊的基本書寫方向，以及針對 Unicode 雙向算法的嵌入和覆蓋方向。不支持雙向文本的用戶代理可以忽略這個屬性。
| 默認值： | ltr |
|---|---|
| 繼承性： | yes |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.direction="rtl" |
direction的值：
| 值 | 描述 |
|---|---|
| ltr | 默認。文本方向從左到右。 |
| rtl | 文本方向從右到左。 |
| inherit | 規定應該從父元素繼承 direction 屬性的值。 |
unicode-bidi的定義：
unicode-bidi 屬性設置文本的方向。
繼承性：Yes
unicode-bidi的說明：
盡管 CSS 試圖處理書寫方向，但 Unicode 有一種更健壯的方式來處理方向性。利用屬性 unicode-bidi，CSS 創作人員可以充分利用 Unicode 的某些功能。
unicode-bidi的的值：
normal
元素不會對雙向算法打開附加的一層嵌套。對於行內元素，順序的隱式重排會跨元素邊界進行。
embed
如果是一個行內元素，這個值對於雙向算法會打開附件的一層嵌套。這個嵌套層的方向由 direction 屬性指定。會在元素內部隱式地完成順序重排。這對應於在元素開始處增加一個 LRE（對於 direction:ltr ：U+202A）或 RLE（對於 direction:rtl ：U+202B），並在元素的最后增加一個 PDF（U+202C）。
bidi-override
這會為行內元素創建一個覆蓋。對於塊級元素，將為不在另一塊中的行內后代創建一個覆蓋。這說明，順序重排在元素內部嚴格按照 direction 屬性進行；忽略了雙向算法的隱式部分。這對應於在元素開始處增加一個 LRO（對於 direction:ltr ：U+202D）或 RLO（對於 direction:rtl ：U+202E），並在元素最后增加一個 PDF（U+202C）。
writing-mode屬性：
在ie5的時候已經支持使用了，它最初只是ie的屬性，現在在css3中：谷歌，火狐也開始支持。所以在使用的時候需要記住兩套不同的語法：ie的私有屬性和css3的規范屬性，如果只需要兼容到ie8+，可以只使用css3的規范屬性。因為vertical-rl此時的文檔流為垂直方向，rl表示水平方向，此時再設direction-rtl，實際上值rtl改變的是垂直方向的內聯元素的文本方向，一縱一橫，沒有交集，而且writing-mode可以對塊狀元素產生影響，直接改變了CSS世界的縱橫規則，要比direction強大和鬼畜的多。
writing-mode的css3規范屬性：
writing-mode：horizontal-tb；//默認值 ：水平方向，從上倒下
writing-mode：vertical-rl ； //垂直方向，從右向左
writing-mode ： vertical-lr； //垂直方向，從左向右
writing-mode的ie私有屬性：
writing-mode：lr-tb； // 默認值 ： 從左到右，從上到下。
writing-mode：tb-rl； //從上到下，從右向左。
writing-mode：tb-lr（IE8+）； //水平方向，從上到下，從左到右。
如果需要兼容IE7，關注初始值：lr-tb和tb-rl，對css3規范中的horizontal-tbhebertical-rl。
writing-mode，direction，unicode-bidi是CSS世界中3大可以改變文本布局流向的屬性。
其中direction，unicode-bidi屬於近親，經常在一起使用，也是唯一不受CSSc all屬性影響的CSS屬性，基本上就是和內聯元素一起使用的。
writing-mode似乎包含了direction，unicode-bidi某些功能和行為，例如vertical-rl的rl和direction的rtl值有相似之處，都是從右往左。然而，實際上，兩者是沒有jiao'ji
css的奇妙就在於：某些特性當初可能就是問了某些圖文排版設計，但是，我們可以利用其帶來的特性，發揮自己的創造力，實現其他很多意想不到的效果。所以，以上的三個屬性都是非常好的資源