Layout direction override
警告: 作成者は可能な限り direction CSS プロパティの使用を避け、代わりに HTML の dir グローバル属性を使用することを推奨します。
direction は CSS のプロパティで、テキスト、表やグリッドの列、水平方向のはみ出し方向を設定します。右書きの言語(ヘブライ語やアラビア語など)では rtl を、左書きの言語(英語やそれ以外の多くの言語)では ltr を使います。
なお、テキストの方向はふつうは文書内で(例えば HTML の dir 属性 で)定義するものであり、 direction プロパティ直接使用して行うものではありません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 1 | 1 | 18 | 1 | |
ltr | 2 | 12 | 1 | 1 | 18 | 1 |
rtl | 2 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| unicode-bidi は CSS のプロパティで、 direction プロパティと共に、文書内の双方向テキストの扱いを指定します。例えば、テキストブロックに左書き (LTR) と右書き (RTL) の両方のテキストが含まれている場合、ユーザーエージェントは、複雑な Unicode アルゴリズムを用いてテキストの表示方法を決定します。 unicode-bidi プロパティは、このアルゴリズムを上書きして開発者がテキストの埋め込みを制御できるようにします。 | 2 | 12 | 1 | 1.3 | 18 | 1 |
| CSS プロパティ | ||||||
bidi-override | 2 | 12 | 1 | 1.3 | 18 | 1 |
embed | 2 | 12 | 1 | 1.3 | 18 | 1 |
isolate | 48 | 79 | 50 | 11 | 48 | 11 |
isolate-override | 48 | 79 | 50 | 11 | 48 | 11 |
normal | 2 | 12 | 1 | 1.3 | 18 | 1 |
plaintext | 48 | 79 | 50 | 11 | 48 | 11 |
注釈 3件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (16)
実装メモ
- Chrome 47 より前では、「-webkit-isolate」によりブラウザがロックされる可能性がありました。
- Chrome 19 以降では、「isolate」キーワードを「bidi-override」と一緒に使用できる、以前のバージョンの仕様の構文が許可されています。
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (79)
注釈 3件
削除済み
- このバージョンで機能が削除されました (54)
対応条件
- ベンダープレフィックス付きで対応: -moz- (10)
実装メモ
- Firefox 10 から Firefox 16 まで (両端を含む)、「isolate」キーワードは、仕様の以前のバージョンの構文である「bidi-override」と一緒に使用できました。 Firefox 17 以降、許可される値は 1 つだけです。 以前の `isolate bidi-override` の代わりに `isolate-override` を使用してください。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (6)
実装メモ
- Safari 9 より前では、「-webkit-isolate」によりブラウザがロックされる可能性がありました。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (6)
実装メモ
- iOS 9 の Safari より前では、「-webkit-isolate」によってブラウザがロックされる可能性がありました。
注釈 2件
削除済み
- このバージョンで機能が削除されました (54)
対応条件
- ベンダープレフィックス付きで対応: -moz- (17)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (7)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (7)
注釈 4件
削除済み
- このバージョンで機能が削除されました (54)
対応条件
- ベンダープレフィックス付きで対応: -moz- (10)
実装メモ
- Firefox 50 より前では、「plaintext」値は縦書きモードでは無視されていました (バグ 1302734)。
- Firefox 15 より前では、「plaintext」はインライン要素に対して何も行いませんでした。 Firefox 15では仕様が変更され実装が変更されました。
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (6)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (6)
基本構文
CSS
.rtl-text {
direction: rtl;
unicode-bidi: bidi-override;
}
.isolate {
unicode-bidi: isolate;
} ライブデモ
実務での使いどころ
-
混合方向テキストの表示制御
アラビア語と英語が混在するコンテンツで、テキストの方向を正しく制御して読みやすい表示を実現します。
注意点
- HTML文書ではCSSではなくdir属性を使って書字方向を設定することが強く推奨されています。CSSでの制御はDTD設計者向けです。
アクセシビリティ
- 書字方向の設定はスクリーンリーダーの読み上げ順序に影響するため、論理的な読み順序が正しく保たれることを確認してください。