CSS3

プロパティ

direction

→●、mdn

¶書字の方向性の指定法。

注意： HTML ユーザー エージェントにおける CSS スタイル付け機能は、オフにされることもあるので、HTML 作者には、スタイルシートが無い下でも正しい双方向レイアウトが確保されるよう、HTML dir 属性と BDO 要素を利用することを推奨する。作者は HTML 文書に direction を利用するべきでない。

このプロパティは、行内基底方向 ─ ボックスが確立する双向［段落（paragraph）／埋め込み（embedding）／隔離（isolate）／上書き（override）］の方向性（unicode-bidi を見よ） ─ を指定する。加えて、次のものにも波及する：

• table column レイアウトの順序付け
• ⇔横書き過フローの方向
• 行の中での 既定のテキスト整列
• ボックスの行内基底方向に依存する 他のレイアウト効果

ltr

この値は、行内基底方向（双向方向性）を［行左端から行右端へ］に設定する。

<DIV style="border:1px solid red; width:100px;
 direction:ltr;
">
 あいう
</DIV>

rtl

この値は、行内基底方向（双向方向性）を［行右端から行左端へ］に設定する。

<DIV style="border:1px solid red; width:100px;
 direction:rtl;
">
 あいう
</DIV>

【↑↓縦組みの下で、これらの値が表す物理方向は、§ 抽象方向と物理方向の対応関係 にも見られる。】

注記： direction プロパティは、［unicode-bidi 値が normal にされた行内ボックス］に指定されても、双向性による並び替えに対する効果はない。ボックスは、双方向アルゴリズムにおいて，追加の埋め込みレベルを開かないので。

注記： table column ボックスに指定される direction プロパティは、その column 下の cell には継承されない。column は、文書ツリーにおける cell の先祖ではないので。したがって、CSS の下では、［[HTML401] § 11.3.2.1 による dir 属性の継承規則］は、容易に得られない。

テスト