direction和unicode-bidi

謙行發表於2014-11-10

在做多語言頁面,接觸過阿利伯語、希伯來語的同學肯定了解書寫方向的重要性,包括我們五四運動前的書寫順序也是從右到左的。css中 unicode-bididirection屬性決定了HTML或XML文字渲染方向,兩個屬性結合使用可以改變文字書寫順序

direction

direction屬性有三個值

  1. inherit 使用父元素的設定
  2. ltr 預設值,left to right,從左到右
  3. rtl right to left 從右到左

我們預設的書寫順序是從左到右的,不用做特殊設定,但是對於阿拉伯語是從右到左的,這時候就需要設定direction屬性來正確展示了

防止瀏覽器重寫text-align我們做一下預設設定

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
<div style="direction:rtl;text-align: initial;">
    طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد    
</div>

對應的也有個html屬性dir可以設定

<div dir="rtl" dtyle="text-align: initial;">
    طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد    
</div>
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

direction屬性局定了預設的書寫順序這是和text-align的區別,後者是對其方向,書寫書寫順序不變

<div style="direction: rtl;text-align: initial;">1 2 3 4 5 6。</div>
<div style="text-align:right;">1 2 3 4 5 6。</div>
1 2 3 4 5 6。
1 2 3 4 5 6。

unicode-bidi

貌似有direction就可以應付書寫方向的問題了,unicode-bidi是做什麼的呢?

瀏覽器通常根據lang屬性或者特殊的font-family決定書寫方向,但是如果一句話中同時包括兩種方向的文案的時候就需要用到unicode-bidi屬性了

unicode-bidi 有三個廣泛支援的值

  1. normal 原來是什麼順序就使用什麼順序
  2. embed 作用於inline元素,direction屬性的值指定嵌入層,在物件內部進行隱式重排序
  3. bidi-override 嚴格按照direction屬性的值重排序。忽略隱式雙向運算規則

說實話這麼解釋我也看不懂,看個例子

<div style="direction:rtl;text-align: initial;">this is a test</div>

<div style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
    this is a test
</div>

<div style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
    this <span style="unicode-bidi:embed;">is a</span> test
</div>
this is a test
this is a test
this is a test

第一行就是簡單的右對齊,文字不會倒著寫(阿拉伯語會,後面有解釋)

第二行兩個屬性結合使用,不但右對左書寫而且真的是從右到左書寫了,這才是正經的阿拉伯語寫法

第三行的效果奇妙之處在於在第二行的基礎上加了樣式unicode-bidi:embed;不會倒著寫了,按著正常的書寫順序在寫

小疑惑

為什麼對於阿拉伯語只設定direction就能正確展示了,但是英文單詞卻只有右對齊效果,不會從右到左書寫,只有設定了unicode-bidi:bidi-override;才好使呢

這和具體語言有關,對於阿拉伯語和希伯來語自動就好使了,單個數字、字母瀏覽器不能判斷語言就用rtl預設設定了,英語等還是使用預設的左到右的方式,只能用unicode-bidi重寫

在宣告的時候指定語言為阿拉伯語頁面會自動書寫順序rtl

<html lang="ar">

參考

unicode-bidi

direction

相關文章