【direction】文字表記の方向を設定

directionプロパティでは、文字表記の方向(左から、右からなど)を指定することができます。 値にltrを指定すると文字表記の方向が左から右、rtlを指定すると右から左というようになります。

このdirectionプロパティで指定した方向が要素の基本となる文字表記の方向と、unicode-bidiプロパティを指定した場合の組み込みや上書きの方向となります。 またdirectionプロパティをインライン要素に適用させる場合は、併せてunicode-bidiプロパティの値をembed、またはbidi-overrideにする必要があります。

なお文字表記の方向を指定し、表記方向の異なる言語を混在して表示できるようにするには、併せてunicode-bidiプロパティを使用します。 directionプロパティで上記に記述したように文字表記の方向を指定し、unicode-bidiプロパティで文字表記に関する指示についての、上書きや組み込みを設定して下さい。

Internet Explorerで日本語を右から左方向に表記させたい場合は、unicode-bidiを併せて使用し、値に「bidi-override」を指定します。 ちなみにこれらのプロパティは右から左へと記述するアラビア語、ヘブライ語などの文字に使用される事が多いようです。

またテーブルのセルなどにも設定することができ、セルの方向(並び方)を右から左にすることもできます。

書式

  • direction : ……… 文字表記の方向を指定する

★:ltr、rtl、inherit

ltr
文字表記の方向を左から右にします(left to rightという意味)
rtl
文字表記の方向を右から左にします(right to leftという意味)

使用した時の例

.sample1 {direction: rtl; unicode-bidi: bidi-override;}
.sample2 {direction: ltr;}

span {background:#F48282;}
<div>
昔は日本でも<span class="sample1">右から左へと文字</span>が書かれていましたね
</div>
<div class="sample2">
でも最近はまったく見かけません。たまに<span class="sample1">トラックの文字が
右から左</span>になってるくらいです。
</div>

ブラウザ上の表示例

昔は日本でも右から左へと文字が書かれていましたね
でも最近はまったく見かけません。たまにトラックの文字が右から左になってるくらいです。

対応ブラウザなどのデータ

初期値 ltr 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / writing mode
対応ブラウザ Internet Explorer5~ , Google Chrome2~ , Firefox1~ , Opera9.2~ , Safari1.3~

関連情報