Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

対応ブラウザ

機能 デスクトップ モバイル
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
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 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;
}

ライブデモ

direction: rtl

CSS Direction: rtl demo.

プレビュー全画面表示

bidi-override

CSS Bidi-override demo.

プレビュー全画面表示

unicode-bidi: isolate

CSS Unicode-bidi: isolate demo.

プレビュー全画面表示

実務での使いどころ

  • 混合方向テキストの表示制御

    アラビア語と英語が混在するコンテンツで、テキストの方向を正しく制御して読みやすい表示を実現します。

注意点

  • HTML文書ではCSSではなくdir属性を使って書字方向を設定することが強く推奨されています。CSSでの制御はDTD設計者向けです。

アクセシビリティ

  • 書字方向の設定はスクリーンリーダーの読み上げ順序に影響するため、論理的な読み順序が正しく保たれることを確認してください。