unicode-bidi「双方向アルゴリズムの変更」

「unicode-bidi」は、双方向アルゴリズムの変更を指定します。
変更内容は、「direction」に、指定します。

CSS Ver.	適用要素	継承
2.1	全要素	しない

unicode-bidi の指定方法

構文
unicode-bidi : normal \| embed \| bidi-override;
プロパティ/設定値	意味
unicode-bidi : normal;	Unicodeの双方向アルゴリズムがそのまま適用される。（unicode-bidiを指定しないのと同様）
unicode-bidi : embed;	インライン要素に指定した場合、「direction」の内容が組み込まれる。（単語の並びは、変更するが、文字の並びは、変更しない）
unicode-bidi : bidi-override;	「direction」の内容で上書きされる。（単語の並び、文字の並びを、変更する）
デフォルト：「タグ毎のスタイル初期値」を参照

ページTOP

unicode-bidi のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_bidi_embed_rtl { direction : rtl; unicode-bidi : embed;}
.css_bidi_override_rtl { direction : rtl; unicode-bidi : bidi-override;}
.css_bidi_normal { direction : rtl; unicode-bidi : normal;}

<!-- html -->
<div class="common">
  <div class="cssTitle">◆スタイル指定なし</div>
  <div>Hello?السلام عليكم!こんにちは。</div>

  <div class="cssTitle">◆unicode-bidi:embed; (rtl)</div>
  <div><span class="css_bidi_embed_rtl">Hello?السلام عليكم!こんにちは。</span></div>

  <div class="cssTitle">◆unicode-bidi:bidi-override; (rtl)</div>
  <div><span class="css_bidi_override_rtl">Hello?السلام عليكم!こんにちは。</span></div>

  <div class="cssTitle">◆unicode-bidi:normal; (rtl)</div>
  <div><span class="css_bidi_normal">Hello?السلام عليكم!こんにちは。</span></div>
</div>