CSS辞典 directionプロパティ、unicode-bidiプロパティの解説

文字を表示する方向を指定する「directionプロパティ」、文字の書字方向の上書き方法を指定する「unicode-bidiプロパティ」の使用方法を記載

対応バージョン：CSS3／2.1

対応ブラウザ
directionプロパティ（文字を表示する方向を指定）
- 概要・使用方法
  - 使用方法
unicode-bidiプロパティ（文字の書字方向の上書き方法を指定）
- 概要・使用方法
  - 使用方法
- サンプルコード

対応ブラウザ

directionプロパティ（文字を表示する方向を指定）

初期値	ltr
適用される要素	すべての要素
モジュール	CSS Fonts Module Level3
継承	あり

概要・使用方法

{direction: 方向;}

「directionプロパティ」（ディレクション）は、文字を表示する方向を指定します。

使用方法

ltr	文字が左から右へ表示されます。
rtl	文字が右から左へ表示されます。

すなりん
directionプロパティ、unicode-bidiプロパティも、日本語や英語は左から右に書く言語ですが、アラビア語などの右から左に言語を表示するときに使用します。

unicode-bidiプロパティ（文字の書字方向の上書き方法を指定）

初期値	normal
適用される要素	すべての要素。ただし非インライン要素では値の一部は無効
モジュール	CSS Fonts Module Level3
継承	あり

概要・使用方法

{unicode-bidi: 上書き方法;}

「unicode-bidiプロパティ」（ユニコードディレクショナル）は、文字の書字方向の上書き方法を指定します。

使用方法

normal	文字の書字方向を上書きしない。
embed	要素がインラインボックスの場合、directionプロパティの指定に従って、文字の書字方向を上書きします。
bidi-override	要素がインラインボックスの場合、directionプロパティの指定に従って書字方向を上書きします。ブロックボックス内では、内包される子要素の書字方向を上書きします。
isolate	要素がインラインボックスの場合、双方向アルゴリズムに加えてdirectionプロパティの値に応じた書字方向決定アルゴリズムが組み込まれて表示されますが、その際の周囲のインラインボックスから独立したものとして扱われるUnicodeにおける LRI/RLIに相当します。
isolate-override	isolate同様。周囲のインラインボックスから独立したものとして扱われながらインラインボックス内にbidi-override同様の上書き処理を適用します。 UnicodeにおけるFSI,LRO/FSI,RLOに相当します。
plaintext	ブロックコンテナー、及びインラインボックスに対してisolateと同様に作業しますが、書字方向の決定はdirectionプロパティの値ではなく双方向アルゴリズムの規則に基づいて決定されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>directionプロパティ、unicode-bidiプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample1 p{font-size:1.5em;}
          .sample2{
                    direction: rtr;
                    unicode-bidi: bidi-override;        
                  }
    </style>
  </head>
  <body>
      <div class="sample1">
          <h1>direction調整なし</h1>
          <p>アラビア語訳聖書（あらびあごやくせいしょ、アラビア語:ترجمة الكتاب المقدس للغة العربية‎）はキリスト教聖書</p>
          <h1>direction調整あり</h1>
          <p class="sample2">アラビア語訳聖書（あらびあごやくせいしょ、アラビア語:<span> ترجمة الكتاب المقدس للغة العربية‎</span>）はキリスト教聖書</p>
      </div>
  </body>
</html>