CSS - direction

トップ > CSSリファレンス > direction

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS25129.21.3

説明

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

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

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

説明
ltrleft to right の略。左から右。英語、日本語など。
rtlright 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>
表示
昔の日本の新聞の題字も右から左でしたね
昔の日本の新聞の題字も右から左でしたね
テーブルのセルも右から左になります

関連項目

unicode-bidi

リンク


Copyright (C) 1997-2016 杜甫々
初版:1997年7月27日、最終更新:2016年5月8日
http://www.tohoho-web.com/css/prop/direction.htm