ぱたぱたアニメ館unicode-bidi CSS3CSS4
unicode-bidi は、Unicode で各言語ごとに書字方向が決まっているものを新しく上書き指定したりします。 「direction」プロパティと「unicode-bidi」プロパティは組み合わせて使用します。
UA は指定したスタイルシートを無効にすることもできるため、
スタイルシートがない場合の正しい双方向レイアウトを保証するために、HTML の
dir属性、
<bdo>要素を利用することを推奨します。
| 名前 | : | unicode-bidi |
| 値 | : | normal | embed | isolate | bidi-override | isolate-override | plaintext |
| 初期値 | : | normal |
| 適用対象 | : | 全ての要素、正し、文を参照のこと |
| 継承 | : | しない |
| パーセンテージ | : | n/a |
| メディア | : | visual（視覚的） |
| 計算値 | : | per grammar（文法ごと） |
| アニメーション | : | discrete（離散的） |
Value（値）
- normal
- 初期値
- embed
- ボックスがインラインの場合、この値は、双方向アルゴリズムの埋め込みの追加レベルを開くことによって directional embedding（方向上の埋め込み）を作成する。 埋め込みの方向は「direction」プロパティで指定する。 ボックス内では並べ替えは暗黙的に行われる。
- isolate
- インラインボックスではその内容を双方向分離する。
ブロック境界と強制段落区切りで中断されないインラインレベルボックスの
各シーケンスが独立したシーケンスとして扱われる点を除いて directional embedding（方向上の埋め込み）と同様。
- シーケンス内の内容は、ボックスの direction プロパティで指定された基本方向性をもつ独立した段落内にあるかのように並べられる。
- それを含む双方向段落における双方向解決の目的のために、 シーケンスは単一のオブジェクト置換文字（U+FFFC）であるかのように扱われる。
- bidi-override
- ボックスに直に含まれるインライン内容に directional override（方向上の上書き）がされる。 インラインの場合、directional embedding （方向上の埋め込み）と同じように処理するが 並べ替えは、direction プロパティに基づいて行われ、 双方向アルゴリズムの暗黙的な部分は無視される。 ブロックコンテナの場合、全ての内容を囲む 匿名インラインボックスに上書きされる。
- isolate-override
- isolate の双方向分離処理 と bidi-override の directional override（方向上の上書き）処理を組み合わせたもの。 周囲の内容には isolate と同じだが、ボックス内では bidi-override が指定されたかのように順序付けられる。 これは分離されたシーケンス内で方向上の上書きを入れ子にする。
- plaintext
- Unicode 双方向アルゴリズムの目的以外では分離されたものとして処理する。 ボックスの、双方向段落（ブロックコンテナの場合）または 分離されたシーケンス（インラインの場合）の基本方向性は、 ボックスの direction プロパティを使用するのではなく、 Unicode 双方向アルゴリズムの規則 P2、P3 によって決定される。
ボックス内部及びボックス外部効果
unicode-bidi:normal の場合、インラインボックスは Unicode 双方向アルゴリズムに対して透過的になり、 まるでボックスの境界が存在しないかのように内容が順序付けられます。 unicode-bidi プロパティの他の値は、インラインボックスにアルゴリズムのスコープ（可視範囲）を作成させ、 テキストの本来の方向性を無効にします。次の表はインラインボックス上の unicode-bidi:normal 以外の場合になります。
| Outside | |||
| strong | neutral | ||
| Inside | scoped | embed | isolate |
| override | bidi-override | isolate-override | |
| plaintext | - | plaintext | |
Unicode 双方向制御コード
normal 以外の値は、Unicode 双方向アルゴリズム HL3 [UAX9]に従って、 インライン要素の先頭（start）と末尾（end）に対応する Unicode 双方向制御コードを挿入してから、並べ替えのために段落を Unicode 双方向アルゴリズムに渡します。
| unicode-bidi value | direction value | |||
| ltr | rtl | |||
| start | end | start | end | |
| normal | - | - | - | - |
| embed | LRE (U+202A) | PDF (U+202C) | RLE (U+202B) | PDF (U+202C) |
| isolate | LRI (U+2066) | PDI (U+2069) | RLI (U+2067) | PDI (U+2069) |
| bidi-override* | LRO (U+202D) | PDF (U+202C) | RLO (U+202E) | PDF (U+202C) |
| isolate-override* | FSI,LRO (U+2068,U+202D) |
PDF,PDI (U+202C,U+2069) | FSI,RLO (U+2068,U+202E) | PDF,PDI (U+202C,U+2069) |
| plaintext | FSI (U+2068) | PDI (U+2069) | FSI (U+2068) | PDI (U+2069) |
* LRO+PDF、RLO+PDF のペアは、 unicode-bidi の値がブロックコンテナ上に指定されている場合、 ブロックコンテナの root インラインボックスにも適用される。
HTML source
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p { background: #eeeeee; } /* p 要素のブロックレベルボックスに薄いグレー背景 */
span { background: #fffeee; } /* span 要素のインラインレベルボックスに薄い黄色背景 */
p.test01 { direction: ltr; unicode-bidi: normal; }
span.test02 { direction: ltr; unicode-bidi: embed; }
span.test03 { direction: ltr; unicode-bidi: isolate; }
p.test04 { direction: ltr; unicode-bidi: bidi-override; }
span.test05 { direction: ltr; unicode-bidi: isolate-override; }
p.test06 { direction: ltr; unicode-bidi: plaintext; }
p.test07 { direction: rtl; unicode-bidi: normal; }
span.test08 { direction: rtl; unicode-bidi: embed; }
span.test09 { direction: rtl; unicode-bidi: isolate; }
p.test10 { direction: rtl; unicode-bidi: bidi-override; }
span.test11 { direction: rtl; unicode-bidi: isolate-override; }
p.test12 { direction: rtl; unicode-bidi: plaintext; }
</style>
</head>
<body>
| <p class="test01">あいうえお。<span> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p>あいうえお。<span class="test02"> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p>あいうえお。<span class="test03"> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p class="test04">あいうえお。<span> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p>あいうえお。<span class="test05"> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p class="test06">あいうえお。<span> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p class="test07">あいうえお。<span> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p>あいうえお。<span class="test08"> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p>あいうえお。<span class="test09"> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p class="test10">あいうえお。<span> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p>あいうえお。<span class="test11"> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
| <p class="test12">あいうえお。<span> | اللغة العربية | かきくけこ。 | abcde</span> | עברית | 123</p> |
</body> </html>
display
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: ltr; unicode-bidi: normal; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: ltr; unicode-bidi: embed; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: ltr; unicode-bidi: isolate; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: ltr; unicode-bidi: bidi-override; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: ltr; unicode-bidi: isolate-override; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: ltr; unicode-bidi: plaintext; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: rtl; unicode-bidi: normal; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: rtl; unicode-bidi: embed; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: rtl; unicode-bidi: isolate; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: rtl; unicode-bidi: bidi-override; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: rtl; unicode-bidi: isolate-override; |
あいうえお。اللغة العربية かきくけこ。abcdeעברית123 |
direction: rtl; unicode-bidi: plaintext; |
unicode-bidi CSS2.2
| 名前 | : | unicode-bidi |
| 値 | : | normal | embed | bidi-override | inherit |
| 初期値 | : | normal |
| 適用対象 | : | 全ての要素、正し、文を参照のこと |
| 継承 | : | しない |
| パーセンテージ | : | n/a |
| メディア | : | visual（視覚的） |
| 計算値 | : | As specified（指定通り） |
Value（値）
- normal
- 初期値
- embed
- Unicodeに準じた文字表記の方向になり「direction」プロパティでの指定は組み込まれる形となる
- bidi-override
- 「direction」で指定された文字方向が表示されUnicodeによる文字表記の方向は無効にする
- inherit
- 親要素の値を継承する
