direction、text-align和unicode-bidi設置文本方向

進入到css文本設置，又是一個迷惑，不過好在都解決。

 

    問題描述：

1. direction和unicode都表示設置文本方向，到底有何不同？

   （解決文章參考：《direction和unicode-bidi》--Samaritans）

2. 為什么【<div style="direction: rtl; ">this is a test</div>】和

【</div><div style="text-align:right;">this is a test</div>】寫出來的效果都是“this is a test”在瀏覽器的最右邊，而不是其中一個為“test a is this”？

         （解決文章參考：《CSS direction屬性簡介與實際應用》--張鑫旭）

 

    探究路程：

    首先當然是先查看官方釋義啊，然后發現高考語文沒及格真的是硬傷，這里還是放出來鏈接給大家看！

 

1.   text-align：對齊元素中的文本。

2.   direction：設置文本方向。

3.   unicode-bidi：設置或返回文本是否被重寫 。

    事后我回去找鏈接的時候發現，其實W3C school里面確實是講清楚了！

“文本方向

    如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，並不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。

    direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最后一行的位置。

    注釋：對於行內元素，只有當 unicode-bidi 屬性設置為 embed 或 bidi-override 時才會應用 direction 屬性。

    direction 屬性有兩個值：ltr 和 rtl。大多數情況下，默認值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl。”

 

    總結：

    懶得看上面兩篇解決文章和同我一樣看不懂w3c解釋的朋友看我這里~

1. direction屬性的作用級別是 內聯元素塊 。就是當你輸入一句話的時候，使用了【<p style="direction:rtl;">我愛他</p>】這句話中的文字順序是不會變的，就是顯示出來的【我愛他】不會變成【他愛我】。說到這里有種蛋蛋的憂傷T.T 。所以整句的【我愛他】被看為一個整體，從右到左設置方向時，自然就直接被放置到最右邊，視覺上和【text-align:right】一樣了。

2.  有了第一條的總結，我們在聯系w3c中的那段話就知道了，在行內設置文本方向的就是 unicode-bidi 了。那么unicode-bidi和direction屬性決定了HTML或XML文字渲染方向，兩個屬性結合使用可以改變文字書寫順序。就是當設置為【<p style="direction:rtl; unicode-bidi: bidi-override;">我愛他</p>】的時候，“他就會愛我了”。

3. 更多的詳細解釋在最上面的兩條鏈接中哦~這里遠程謝謝前面的兩位前輩！

最后祝大家都能找到那個 你愛他 他愛你 的人（手動比心）♥