css中關於direction與unicode-bidi的對比
- 黄舟原創
- 2017-06-20 10:39:192246瀏覽
在做多語言頁面，接觸過阿利伯語、希伯來語的同學肯定了解書寫方向的重要性，包括我們五四運動前的書寫順序也是從右到左的。 css中 unicode-bidi和direction屬性決定了HTML或XML文字渲染方向，兩個屬性結合使用可以改變文字書寫順序
direction
direction屬性有三個值
inherit 使用父元素的設定
ltr 預設值，left to right，從左到右
rtl right to left 從右到左
我們預設的書寫順序是從左到右的，不用做特殊設置，但是對於阿拉伯語是從右到左的，這時候就需要設置direction屬性來正確展示了
防止瀏覽器重寫text-align我們做一下預設設定
<p style="direction:rtl;text-align: initial;">
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
</p>對應的也有個html屬性dir可以設定
<p dir="rtl" dtyle="text-align: initial;">
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
</p># direction屬性局定了預設的書寫順序這是和text-align的區別，後者是對其方向，書寫書寫順序不變
<p style="direction: rtl;text-align: initial;">1 2 3 4 5 6。</p> <p style="text-align:right;">1 2 3 4 5 6。</p>
unicode-bidi
貌似有direction就可以應付書寫方向的問題了，unicode-bidi是做什麼的呢？
瀏覽器通常根據lang屬性或特殊的font-family決定書寫方向，但是如果一句話中同時包含兩個方向的文案的時候就需要用到unicode-bidi屬性了
unicode-bidi 有三個廣泛支援的值
normal 原來是什麼順序就使用什麼順序
embed 作用於inline元素，direction屬性的值指定嵌入層，在物件內部進行隱式重新排序
bidi-override 嚴格依照direction屬性的值重新排序。忽略隱式雙向運算規則
說實話這麼解釋我也看不懂，看例子
<p style="direction:rtl;text-align: initial;">this is a test</p>
<p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
this is a test
</p>
<p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
this <span style="unicode-bidi:embed;">is a</span> test
</p>第一行就是簡單的右對齊，文字不會倒著寫（阿拉伯語會，後面有解釋）
第二行兩個屬性結合使用，不但右對左書寫而且真的是從右到左書寫了，這才是正經的阿拉伯語寫法
第三行的效果奇妙之處在於在第二行的基礎上加了樣式unicode-bidi:embed;不會倒著寫了，按著正常的書寫順序在寫
為什麼對於阿拉伯語只設定direction就能正確展示了，但是英文單字卻只有右對齊效果，不會從右到左書寫，只有設定了unicode-bidi:bidi-override;才好使呢
這和具體語言有關，對於阿拉伯語和希伯來語自動就好使了，單個數字、字母瀏覽器不能判斷語言就用rtl默認設置了，英語等還是使用默認的左到右的方式，只能用unicode- bidi重寫
在聲明的時候指定語言為阿拉伯語頁面會自動書寫順序rtl
<html lang="ar">
direction是表示書寫方向的，和writing-mode是不同的作用，各有長短，可以結合使用。
以上是css中關於direction與unicode-bidi的對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！