タイトル: unicode-bidiプロパティ
SEOタイトル: CSS unicode-bidi プロパティ完全ガイド（normal / embed / isolate / bidi-override / RTL対応）
| この記事の要点 |
|
unicode-bidi プロパティとは
unicode-bidi は CSS で双方向テキスト（Bidirectional Text、BiDi）の挙動を細かく制御するプロパティです。アラビア語やヘブライ語のような右から左（RTL）方向のテキストと、英語や日本語のような左から左（LTR）方向のテキストが混在するレイアウトで、文字や記号の並び順を意図通りに表示するために使います。
通常、ブラウザは Unicode の 双方向アルゴリズム（UBA）に従って自動的に方向を判定しますが、ユーザー名や動的データなど方向が事前にわからない場面で unicode-bidi を使うと、表示崩れを防げます。
値一覧
| 値 | 意味 | 用途 |
|---|---|---|
normal | 初期値。UBA に従う | 通常テキスト |
embed | direction を埋め込み方向として適用 | 明示的に方向を指定したい部分 |
isolate | 周囲のテキストから分離して方向判定 | ユーザー名等の動的データ（推奨） |
bidi-override | direction で方向を強制上書き | 意図的に方向を反転 |
isolate-override | isolate + bidi-override の合わせ技 | 分離して強制方向 |
plaintext | direction を無視し内容から自動判定 | 方向不明のテキスト |
基本構文
.user-name {
unicode-bidi: isolate;
direction: ltr;
}direction プロパティとの関係
direction はテキストの方向を ltr（左から右）か rtl（右から左）で指定するプロパティで、unicode-bidi はその効果が周囲とどう関係するかを決めます。両者をセットで使うのが基本です。
| direction | unicode-bidi | 効果 |
|---|---|---|
| ltr / rtl | normal | direction は inline 要素には事実上効かない |
| ltr / rtl | embed | その要素内で direction を埋め込み方向にする |
| ltr / rtl | isolate | 分離して direction を内部方向に |
| ltr / rtl | bidi-override | 強制的に direction の方向に並べる |
isolate — 推奨される分離
動的データ（ユーザー名・タイトル・コメント）を表示する場面では isolate が最も安全です。周囲の LTR テキストに RTL の文字列が混ざっても、並び順が壊れません。
<style>
.username { unicode-bidi: isolate; }
</style>
<p>ユーザー: <span class="username">ابو علي</span> - 投稿数 123</p>HTML5 の <bdi> 要素はデフォルトで unicode-bidi: isolate 相当なので、可能ならまず <bdi> を検討するとよいでしょう。
bidi-override — 方向の強制
テキストの並び順を強制的に反転させたい場合に使います。<bdo> 要素のデフォルト動作と同じです。
<style>
.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
<p class="reverse">Hello World</p>
<!-- 表示: dlroW olleH -->plaintext — 内容から自動判定
方向が事前にわからない動的データに使用。direction の指定を無視し、テキストの最初の強い方向文字から方向を判定します。
.dynamic-text {
unicode-bidi: plaintext;
}HTML 要素ごとのデフォルト値
| 要素 | unicode-bidi のデフォルト |
|---|---|
| 通常の要素 | normal |
<bdi> | isolate |
<bdo> | isolate-override |
実用例 — 多言語混在のリスト
<style>
.score-list li > .name {
unicode-bidi: isolate;
}
</style>
<ul class="score-list">
<li><span class="name">太郎</span>: 1024 点</li>
<li><span class="name">ابو علي</span>: 980 点</li>
<li><span class="name">שלום</span>: 870 点</li>
<li><span class="name">Smith</span>: 850 点</li>
</ul>ユーザー名の言語に関係なく、点数を含む LTR の文の並びは安定します。
ブラウザサポート
Chrome / Firefox / Safari / Edge いずれも対応済み。isolate と plaintext は比較的新しいので IE は非対応ですが、現在はサポート対象外で問題ありません。
FAQ
Q: direction だけで十分では？
A: direction はブロック要素の方向には効きますが、インラインで埋め込まれた他言語テキストには UBA が優先します。unicode-bidi を併用して初めて意図通りの挙動になります。
Q: <bdi> と CSS のどちらを使うべき？
A: HTML マークアップで意図が表現できる場合は <bdi> が推奨。アクセシビリティと意味の明示が CSS より優れています。
Q: writing-mode との関係は？
A: writing-mode は縦書き / 横書きを切り替えるプロパティで、unicode-bidi とは独立しています。両方を組み合わせる場面はほぼありません。
歴史と背景
unicode-bidi は CSS2 で導入された古いプロパティですが、初期の normal / embed / bidi-override だけでは動的データの安全な表示が難しい状況が続いていました。SNS の世界化により多言語混在のニーズが高まったため、CSS Writing Modes Level 3 で isolate / isolate-override / plaintext が追加され、現在の分離の概念が確立しました。
typical patterns — どの値をいつ使うか
- 動的に挿入される他者投稿（ユーザー名・コメント） →
isolate - 意図的にテキストの方向を反転させたい演出 →
bidi-override+direction: rtl - 方向不明のテキストを内容に従わせたい →
plaintext - サイト全体を RTL レイアウトにする →
<html dir="rtl">+ 必要に応じて CSS のdirectionを上書き
テストする方法
アラビア語・ヘブライ語のサンプル文字列をコピペして UI に流し込むと、双方向テキストの問題を簡単に再現できます。Chrome DevTools の Computed タブで unicode-bidi と direction の有効値を確認しましょう。
<!-- アラビア語サンプル -->
<p>ユーザー: <span class="bad">ابو علي - 投稿数 123</span></p>
<!-- 期待: 周囲は LTR、内側は RTL として読みやすく分離される -->
<p>ユーザー: <span class="good">ابو علي</span> - 投稿数 123</p>関連
- direction — テキスト方向（ltr / rtl）
- 要素 — 双方向テキストの分離
- 要素 — テキスト方向の強制
- writing-mode — 縦書き / 横書きの切替
- Unicode 双方向アルゴリズム（UBA） — 文字レベルの方向決定ルール