2008/11/12

direction, unicode-bidi

direction | unicode-bidi
direction

此特徵可以指定區塊元素的文字書寫方向,及文字行(inline)元素的展現方向。unicode-bidi 必須設為 embed 或 bidi-override 才能使此特徵產生效果。

  1. ltr:文字或其它元素 由左向右 展現,此為預設值。
  2. rtl:文字或其它元素 由右向左 展現。
  3. inherit:繼承父元素的特徵值。
  • 上例,IE6, Firefox 成功;Safari, Chrome 失敗,必須拿掉 P 元素改為文字行元素,例如 SPAN,就能成功。
unicode-bidi

配合 direction 決定文字的書寫方向,及文字行元素的展現方向。可設為:

  1. normal:元素不開放一個新增的雙向規則植入層,此為預設值。元素以預設的方向展現。
  2. embed:元素開放一個新增的雙向規則植入層,用 direction 設定其展現方向。元素的內容則以預設的方向展現。
  3. bidi-override:與 embed 相同,加上如果元素的內容只有文字行元素,會完全依據 direction 改寫其內容的書寫方向。此特徵值會蓋過預設的雙向規則。前面的範例在元素中加入區塊元素,IE6, Firefox 可以執行;但是 Safari, Chrome 會失敗。
  4. inherit:繼承父元素的特徵值。

測試 embed。下面例子顯示,四個連續的 SPAN 都設為 embed,這四個元素會由右向左排列。其中 12 34 56 會展示成 56 34 12。實測時,在四個元素間加入不同類別的元素,會使其分成兩組。

測試 bidi-override。下面例子顯示,連續的 SPAN 會由右向左排列。其內容文字也是由右向左書寫。實測時,在四個元素間加入不同類別的元素,會使其分成兩組。

測試 TABLE。改變其展現方向。

測試區塊元素。改變其對齊方向。

  • 在部落格必須加上 text-align:justify,否則看不出靠右的效果。

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

  • 上例,Firefox 完全成功;Safari, Chrome 第一次沒法進入 :hover 風格;然後 :active 之後無法退回一般狀態。

javascript 應用。可以用 style 物件 的特徵 direction, unicodeBidi 作動態變化。此範例使用到 toggleCSS()