| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {unicode-bidi: 値 } |
| 値 の形式 | normal，embed，isolate，bidi-override，isolate-override，plaintext |
| 初 期 値 | all |
| 対応ブラウザー | C2+ / e5+ / N6+ / Fx1+ / Op9.2+ / Ch2+ / Sa1.3+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
unicode-bidi プロパティ は，Unicode文字の表記方向について，その決定アルゴリズムの組み込み・上書きを指定します。 Unicode で英語や日本語などの左から右に書く言語と，さらに，アラビア語などの右から左に書く言語を同時に表示する場合， 多くのブラウザーでは各言語の文字の表示方向を適切に決定する 双方向アルゴリズム (bidirectional algorithm) が実装されています。 このアルゴリズムによる表示では，期待通りの結果が得られない場合に，Unicode によるアルゴリズムを direction プロパティ で指定したアルゴリズムで強制的に上書きするかどうかを指定するものです。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| normal | 双方向アルゴリズムに加えて，この要素に新たなアルゴリズムを組み込むことはしません。 インライン要素に対してはブラウザー備え付けの処理方法に従って要素境界部分での順序変更を行います。 |
| embed | インライン要素に対しては双方向アルゴリズムに加えて，direction プロパティ で指定した方向に表示するアルゴリズムが組み込まれ，それに従って表示されます。 ただし，要素内部（単語内の文字列）の表示方向はブラウザーによって決められます。 |
| isolate | インライン要素においては，その要素のコンテンツと分離した表記方向のアルゴリズムとなります。 通常の表示方向のアルゴリズムの組み込みと異なる点は，連続したインラインレベル・ボックスの列（ブロックの境界や強制的な段落更新により中断しない）では，各ボックスそれぞれが 分離された列，すなわち，その列内のコンテンツは，あたかもその要素の directionプロパティで指定した表示方向を持つ独立した段落の内部であるかのように並べられます。 |
| bidi-override | インライン要素においては，ブラウザーに組み込まれた表示方法に置き換わって，direction プロパティ で指定した方向に表示するアルゴリズムに従って表示方向が決められます。 従って，要素内部（単語内の文字列）の表示方向もこのアルゴリズムによって決められます。 |
| isolate-override | isolate による分離処理と bidi-override による表示方向の強制の双方を周囲のコンテンツに対して適用します。 基本的には isolate と同様の処理になりますが，その要素のコンテンツの内部（たとえば，単語内の文字列）も bidi-override が指定された場合と同様の表示となります。 |
| plaintext | 基本的には isolate と同様の分離処理になりますが，ブロックコンテナに対しては bidiパラグラフ，インライン要素に対しては分離された列の表示方向が，要素の direction プロパティに従ってではなく， Unicodeの双方向アルゴリズムの規則: P2 と P3 によって決定されます。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- .bidi1 { direction: rtl; unicode-bidi: normal; } .bidi2 { direction: rtl; unicode-bidi: embed; } .bidi3 { direction: rtl; unicode-bidi: isolate; } .bidi4 { direction: rtl; unicode-bidi: bidi-override; } .bidi5 { direction: rtl; unicode-bidi: isolate-override; } .bidi6 { direction: rtl; unicode-bidi: plaintext; } --> </style> |
| HTML <body> ～ </body> |
<div><b>normal</b>: <br>Osaka12 [ <span class="bidi1">فارسی13 | Osaka14 | فارسی15</span> ] Osaka16</div> <br> <div><b>embed</b>: <br>Osaka12 [ <span class="bidi2">فارسی13 | Osaka14 | فارسی15</span> ] Osaka16</div> <br> <div><b>isolate</b>: <br>Osaka12 [ <span class="bidi3">فارسی13 | Osaka14 | فارسی15</span> ] Osaka16</div> <br> <div><b>bidi-override</b>: <br>Osaka12 [ <span class="bidi4">فارسی13 | Osaka14 | فارسی15</span> ] Osaka16</div> <br> <div><b>isolate-override</b>: <br>Osaka12 [ <span class="bidi5">فارسی13 | Osaka14 | فارسی15</span> ] Osaka16</div> <br> <div><b>plaintext</b>: <br>Osaka12 [ <span class="bidi6">فارسی13 | Osaka14 | فارسی15</span> ] Osaka16</div> |
| ブラウザー 表示例 |
|---|
normal:
Osaka12 [ فارسی13 | Osaka14 | فارسی15 ] Osaka16 embed:
Osaka12 [ فارسی13 | Osaka14 | فارسی15 ] Osaka16 isolate:
Osaka12 [ فارسی13 | Osaka14 | فارسی15 ] Osaka16 bidi-override:
Osaka12 [ فارسی13 | Osaka14 | فارسی15 ] Osaka16 isolate-override:
Osaka12 [ فارسی13 | Osaka14 | فارسی15 ] Osaka16 plaintext: Osaka12 [ فارسی13 | Osaka14 | فارسی15 ] Osaka16 |