CSS - direction

概要

属性名	direction
値	ltr \| rtl
初期値	ltr
適用可能要素	すべての要素
継承	継承する
メディア	visual
アニメーション	不可

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS2	5	1	2	9.2	1.3

説明

文章の方向を指定します。アラビア語やヘブライ語などのように、右から左に記述する文章を埋め込む場合などに利用されます。unicode-bidi が normal 以外の場合に有効です。

CSS はオフにされることもあるため、direction ではなく、HTML の dir 属性や <bdo> を用いる方が望ましく、これらを使用できる場合は、direction を用いるべきではありません。

通常のテキストの方向に加え、テーブルのセルの方向などにも影響します。

値	説明
ltr	left to right の略。左から右。英語、日本語など。
rtl	right to left の略。右から左。アラビア語など。

使用例

CSS

.sample-ltr {
  direction: ltr;
}
.sample-rtl {
  direction: rtl;
  unicode-bidi: bidi-override;
}
.sample-rtl td {
  border: 1px solid gray;
}

HTML

<div class="sample-ltr">昔の日本の新聞の題字も右から左でしたね</div>
<div class="sample-rtl">昔の日本の新聞の題字も右から左でしたね</div>
<table class="sample-rtl">
  <tr><td>テーブルの</td><td>セルも</td><td>右から左になります</td></tr>
</table>

表示

昔の日本の新聞の題字も右から左でしたね

テーブルの

セルも

右から左になります

リンク

初版：1997年7月27日、最終更新：2016年5月8日

https://www.tohoho-web.com/css/prop/direction.htm

CSS - direction

概要

サポート (説明)

説明

使用例

関連項目

リンク