unicode-bidi

『Unicode』で設定されている文字の進行方向を上書きします。このプロパティは主にアラビア語やヘブライ語など、右から左に読む言語（RTL言語）を含むページで、テキストの表示方向を制御するために使用します。

サンプルコード

style.css

/* normal: Unicodeの文字方向をそのまま適用（初期値） */
div.test { unicode-bidi: normal;}

/* embed: directionプロパティで指定した方向を追加 */
div.test2 { direction: rtl; unicode-bidi: embed;}

/* bidi-override: Unicodeの方向を完全に上書き */
div.test3 { direction: rtl; unicode-bidi: bidi-override;}

/* 多言語ページでの実践例（アラビア語段落） */
.arabic { direction: rtl; unicode-bidi: embed;}

/* 日本語と英語が混在するページ */
.mixed-ltr { direction: ltr; unicode-bidi: embed;}

指定可能な値一覧

値	概要
normal	『Unicode』で設定されている文字の進行方向をそのまま適用します。この『normal』が初期値です。
embed	『Unicode』で設定されている文字の進行方向に新たに『direction』プロパティで指定した値を追加します。
bidi-override	『Unicode』で設定されている文字の進行方向に関する項目を全て無効にし、『direction』プロパティで指定した値を強制的に適用します。

ブラウザでの表示結果

<p style="direction: rtl; unicode-bidi: bidi-override;">Hello World</p>
<p>Hello World（通常）</p>

<div style="direction: rtl; unicode-bidi: embed;">
	<p>アラビア語の段落（右から左への表示）</p>
</div>

概要

『Unicode』で設定されている文字の進行方向を上書きします。

『Unicode』とは日本語、英語、ロシア語、中国語などほぼ全ての言語を網羅している文字の集合体のことです。この『Unicode』には文字の進行方向といった情報も実装されていますが、その進行方向に対する情報を上書きできるのが『unicode-bidi』プロパティとなります。

『unicode-bidi』プロパティは主に『direction』プロパティで指定した値(文字の進行方向を指定)を反映させたい場合のみ記述されるプロパティです。ブラウザによって差がありますが、『unicode-bidi』プロパティに『bidi-override』と指定しておけば『direction』プロパティで指定した値を反映させることができるでしょう。

また、HTML側で文字の方向を制御する場合は『dir』属性を使用する方法もあります。アラビア語やヘブライ語など右から左に読む言語（RTL言語）を含む多言語ページでは、HTMLの構造と合わせて設計されることが多いです。

よくあるミス

unicode-bidi単体では効果がない

『unicode-bidi』プロパティは、『direction』プロパティと組み合わせて使用します。『unicode-bidi』だけを指定しても文字の進行方向は変わりません。

/* unicode-bidiのみではdirectionが反映されない */
.rtl-text { unicode-bidi: bidi-override; }

次のコードも別の記述例です。

/* directionと組み合わせて指定する */
.rtl-text {
    direction: rtl;
    unicode-bidi: bidi-override;
}

HTMLのdir属性との使い分け

文書全体や段落単位でテキスト方向を制御する場合は、CSSの『direction』+『unicode-bidi』より、HTMLの『dir』属性を使う方法が一般的に用いられます。CSSのアプローチはスタイルシートで一括制御したい場合に利用されます。

/* CSSで制御する場合 */
.arabic-paragraph {
    direction: rtl;
    unicode-bidi: embed;
}

対応ブラウザ

デスクトップ

Chrome

2 以降 ○

1 以前 ×

Firefox

1 以降 ○

Safari

1.3 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

9.2 以降 ○

8 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

CSS辞典