direction
文章の進行方向を指定します。
サンプルコード
div.test { direction: ltr;}
div.test1 { direction: rtl;}
指定可能な値一覧
| 値 | 概要 |
|---|---|
| ltr | 文章の進行方向を左から右方向へと指定します。日本語圏や英語圏ではこの『ltr』が初期値です。 |
| rtl | 文章の進行方向を右から左方向へと指定します。この値を指定する場合には『unicode-bidi』プロパティに『bidi-override』と同時に指定する必要がありますのでご注意ください。 |
ブラウザでの表示結果
<p style="direction: ltr">ここはp要素です。『direction: <span style="color: #f00">ltr</span>』と指定しています。</p>
<p style="direction: rtl; unicode-bidi: bidi-override;">ここはp要素です。『direction: <span style="color: #f00">rtl</span>』、『unicode-bidi: bidi-override;』と指定しています。</p>
対応ブラウザ
デスクトップ
Chrome2 以降 ○
1 以前 ×
Firefox1 以降 ○
Safari1 以降 ○
Edge12 以降 ○全バージョンで対応しています
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera9.2 以降 ○
8 以前 ×モバイル
iOS Safari1 以降 ○
Android Browser4.4 以降 ○3 以前 × Chrome Android最新版 ○デスクトップ版と同等の対応です
Firefox Android最新版 ○デスクトップ版と同等の対応です
※ バージョン情報は MDN に基づいています。
概要
文章の進行方向を指定します。
文章を右から左方向へと進めたい場合は値に『rtl』と指定するだけでなく、『unicode-bidi』プロパティに『bidi-override』と指定する必要がありますのでご注意ください。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする