direction プロパティ
direction プロパティは、テキストの右横書き、左横書きといった横書きにおける記述方向を指定するプロパティです。Unicode に設定された記述方向に合わせられます。
direction プロパティが機能するにはエレメントがブロックレベルである必要があります。
direction プロパティのみで左横書きの言語で右横書きを指定すると句読点だけが右横書きになります。
direction : rtl; のみの場合は、このように表示されます。これは日本語は左から記述するためです。
完全に記述方向を指定するには、unicode-bidi プロパティとあわせて使います。テキストの表示方向も変化します。
direction: rtl;
unicode-bidi: bidi-override;
unicode-bidi: bidi-override;も指定すると、このように表示されます。記述方向も rtl、lrt に合わせられます。
詳しくは Example を参照してください
direction プロパティと同じ機能にエレメントの dir 属性があります。
日本語の横書きではデフォルトで左から読みますので direction プロパティの設定は必要がありません。アラビア語を表示したい場合や日本語の旧字での表示には便利な機能です。
ページ内 Index
構文(Syntax)
CSS
direction: ltr | rtl | initial | inherit ;
DOM ( JavaScript )
String = object.style.direction;
object.style.direction=" ltr | rtl | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| ltr | 初期値（default値）、左寄せ |
| rtl | 右寄せ |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | ltr |
| 継承（Inherited） | Yes |
| CSS Animation | No |
Example
関連する CSS プロパティ
以下のような direction に関連する CSS プロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| border-block | 横書きでは上下、縦書きでは左右の border （枠線） |
| border-inline | 横書きでは左右、縦書きでは上下の border （枠線） |
| block-size | 横書きでは高さ、縦書きでは幅に設定される |
| inline-size | 横書きでは幅、縦書きでは高さに設定される |
| direction | テキストの右寄せ、左寄せ |
| unicode-bidi | 右から読む、左から読むの切り替え |
| text-orientation | 縦書きテキストにおけるフォントの向き |
| writing-mode | テキストの記述方向 |