CSS - direction

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

概要

サポート (説明)

説明

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

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

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

使用例

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

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

関連項目

リンク

• https://www.w3.org/TR/CSS2/visuren.html#direction
• https://www.w3.org/TR/css-writing-modes-3/#direction
• http://www.y-adagio.com/public/standards/tr_css2/visuren.html#propdef-direction
• https://triple-underscore.github.io/css-writing-modes-ja.html#direction
• https://developer.mozilla.org/ja/docs/Web/CSS/direction
• http://caniuse.com/#feat=css-writing-mode