CSS unicode-bidiプロパティ｜双方向テキストとisolateの使い方

この記事の要点

unicode-bidi は 双方向テキスト（BiDi）の挙動を制御する CSS プロパティ
値: normal / embed / isolate / bidi-override / isolate-override / plaintext
direction プロパティと組み合わせて使う — direction は方向、unicode-bidi はその効果範囲を制御
推奨は isolate：周囲のテキストから分離して方向判定する。<bdi> 要素のデフォルト
bidi-override は表示順を強制上書き — <bdo> 要素のデフォルト動作

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>

ページ一覧

その他