direction CSS3CSS4

このプロパティは、行内の基本書字方向と unicode-bidi で指定された 埋め込み、分離、上書きの方向を指定します。更に、table の列レイアウト順序、horizontal overflow （水平のはみ出し）の方向、 行内のテキストのデフォルトの配置なども指定できます。

三角矢印 UA は指定したスタイルシートを無効にすることもできるため、 スタイルシートがない場合の正しい双方向レイアウトを保証するために、HTML の dir属性、 <bdo>要素を利用することを推奨します。

名前:direction
値: ltr | rtl
初期値:ltr
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:specified value（指定値）
正規順序:n/a
アニメーション:できない

Value（値）

ltr
初期値 左から右へ表記する（Left to Rightの意）
rtl
右から左へ表記する（Right to Leftの意）

bidi（双方向性）

文字体系には、漢字やラテン文字などのように左から右へ書かれる文字体系と アラビア文字やヘブライ文字などのように右から左へと書かれる文字体系があります。 右横書きの文字体系であっても数字（アラビア数字・インド数字）は左から右に書くというように 一つの言語でも左書き、右書きが混在するテキストがあります。 このように両方の方向性が混在するテキストを "bidirectionality" （双方向性）、略して "bidi" と呼びます。

双方向性イメージ

Unicode 標準は、テキストの適切な方向性を処理する為の複雑なアルゴリズム （Unicode 双方向アルゴリズム）を定義しています。 このアルゴリズムは、文字プロパティに基づく暗黙的な部分と、埋め込みと上書きのための明示的な制御で構成されています。 CSSは、テキストの適切なレンダリングを実現させるためにこのアルゴリズムに依存しています。 「direction」プロパティと「unicode-bidi」プロパティで、 このアルゴリズムに文書言語の要素と属性がどのようにマップされるかを指定します。

direction CSS2.2

direction は、テキストの表記の方向を指定する時に使います。

詳しくは、ブロックの基本的書き込み方向と埋め込みの方向を指定して Unicode 双方向アルゴリズムの上書きをさせる時に使います。 （「unicode-bidi」を参照） 更に、table の列の方向、overflow の水平方向、 "text-align:justify" の場合のブロック内の最終行の位置なども指定できます。

名前:direction
値: ltr | rtl | inherit
初期値:ltr
適用対象:全ての要素、正し、文を参照のこと
継承:する
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:As specified（指定通り）

Value（値）

ltr
初期値 左から右へ表記する（Left to Rightの意）
rtl
右から左へ表記する（Right to Leftの意）
inherit
親要素の値を継承する

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { direction: ltr; unicode-bidi: embed; }
   p.test2 { direction: ltr; unicode-bidi: bidi-override; }
   p.test3 { direction: rtl; unicode-bidi: embed; }
   p.test4 { direction: rtl; unicode-bidi: bidi-override; }
  </style>
 </head>
 <body>
   <p class="test1">あいうえお。かきくけこ。さしすせそ。</p>
   <p class="test2">あいうえお。かきくけこ。さしすせそ。</p>
   <p class="test3">あいうえお。かきくけこ。さしすせそ。</p>
   <p class="test4">あいうえお。かきくけこ。さしすせそ。</p>
 </body>
</html>

display

あいうえお。かきくけこ。さしすせそ。

あいうえお。かきくけこ。さしすせそ。

あいうえお。かきくけこ。さしすせそ。

あいうえお。かきくけこ。さしすせそ。

上に戻る