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 以外の場合になります。

<unicode-bidi ボックス内部及びボックス外部効果>
  Outside
strongneutral
Insidescoped embedisolate
overridebidi-overrideisolate-override
plaintext-plaintext

上に戻る

Unicode 双方向制御コード

normal 以外の値は、Unicode 双方向アルゴリズム HL3 [UAX9]に従って、 インライン要素の先頭(start)と末尾(end)に対応する Unicode 双方向制御コードを挿入してから、並べ替えのために段落を Unicode 双方向アルゴリズムに渡します。

<表示の開始/終了時にUnicode-bidiによって注入される双方向制御コード:インラインボックス>
unicode-bidi value direction value
ltrrtl
startendstartend
normal----
embedLRE (U+202A)PDF (U+202C)RLE (U+202B)PDF (U+202C)
isolateLRI (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)
plaintextFSI (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
親要素の値を継承する

上に戻る