direction

directionは、テキストの表示方向を指定するスタイルです。

解説

明示的に文字の表示方向を指定して表示したい場合に使用します。
たとえば、日本語文章中に右から左に記述するアラビア語を表示する場合などが想定されます。

日本語を右から左に表示させたい場合は「direction:rtl;」に加え、
「unicode-bidi:bidi-override;」の指定も必要です。

構文

構文は以下になります。

値

directionには以下の値が指定できます。

太字の値は初期値です。

サンプル

文字を右から左に表示する

.sample01 {
  direction:rtl;
  unicode-bidi:bidi-override;
}

<div class="sample01">あいうえおかきくけこ</div>

文字を左から右に表示する

.sample01 {
  direction:ltr;
}

<div class="sample01">あいうえおかきくけこ</div>

備考

• ltrとrtlは以下の省略形です。
  　ltr:Left To Right
  　rtl:Right To Left
• 明示的に文字の表示方向を指定したい場合のみ使用してください。
  （通常はデフォルトで言語に合った表示方向で表示されます。）

Tweet