この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: unicode-bidiプロパティ
SEOタイトル: CSS unicode-bidi プロパティ完全ガイド（normal / embed / isolate / bidi-override / RTL対応）

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

unicode-bidi プロパティとは

unicode-bidi は CSS で双方向テキスト（Bidirectional Text、BiDi）の挙動を細かく制御するプロパティです。アラビア語やヘブライ語のような右から左（RTL）方向のテキストと、英語や日本語のような左から左（LTR）方向のテキストが混在するレイアウトで、文字や記号の並び順を意図通りに表示するために使います。

通常、ブラウザは Unicode の 双方向アルゴリズム（UBA）に従って自動的に方向を判定しますが、ユーザー名や動的データなど方向が事前にわからない場面で unicode-bidi を使うと、表示崩れを防げます。

値一覧

値意味用途
normal初期値。UBA に従う通常テキスト
embeddirection を埋め込み方向として適用明示的に方向を指定したい部分
isolate周囲のテキストから分離して方向判定ユーザー名等の動的データ（推奨）
bidi-overridedirection で方向を強制上書き意図的に方向を反転
isolate-overrideisolate + bidi-override の合わせ技分離して強制方向
plaintextdirection を無視し内容から自動判定方向不明のテキスト

基本構文

.user-name {
  unicode-bidi: isolate;
  direction: ltr;
}

direction プロパティとの関係

direction はテキストの方向を ltr（左から右）か rtl（右から左）で指定するプロパティで、unicode-bidi はその効果が周囲とどう関係するかを決めます。両者をセットで使うのが基本です。

directionunicode-bidi効果
ltr / rtlnormaldirection は inline 要素には事実上効かない
ltr / rtlembedその要素内で direction を埋め込み方向にする
ltr / rtlisolate分離して direction を内部方向に
ltr / rtlbidi-override強制的に direction の方向に並べる

isolate — 推奨される分離

動的データ（ユーザー名・タイトル・コメント）を表示する場面では isolate が最も安全です。周囲の LTR テキストに RTL の文字列が混ざっても、並び順が壊れません。




ユーザー: ابو علي - 投稿数 123

HTML5 の 要素はデフォルトで unicode-bidi: isolate 相当なので、可能ならまず を検討するとよいでしょう。

bidi-override — 方向の強制

テキストの並び順を強制的に反転させたい場合に使います。 要素のデフォルト動作と同じです。




Hello World

plaintext — 内容から自動判定

方向が事前にわからない動的データに使用。direction の指定を無視し、テキストの最初の強い方向文字から方向を判定します。

.dynamic-text {
  unicode-bidi: plaintext;
}

HTML 要素ごとのデフォルト値

要素unicode-bidi のデフォルト
通常の要素normal
isolate
isolate-override

実用例 — 多言語混在のリスト




    
  
  • 太郎: 1024 点
    • 
  
  • ابو علي: 980 点
    • 
  
  • שלום: 870 点
    • 
  
  • Smith: 850 点
    •

ユーザー名の言語に関係なく、点数を含む LTR の文の並びは安定します。

ブラウザサポート

Chrome / Firefox / Safari / Edge いずれも対応済み。isolate と plaintext は比較的新しいので IE は非対応ですが、現在はサポート対象外で問題ありません。

FAQ

Q: direction だけで十分では？
A: direction はブロック要素の方向には効きますが、インラインで埋め込まれた他言語テキストには UBA が優先します。unicode-bidi を併用して初めて意図通りの挙動になります。

Q: と CSS のどちらを使うべき？
A: HTML マークアップで意図が表現できる場合は が推奨。アクセシビリティと意味の明示が 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 レイアウトにする → + 必要に応じて CSS の direction を上書き

テストする方法

アラビア語・ヘブライ語のサンプル文字列をコピペして UI に流し込むと、双方向テキストの問題を簡単に再現できます。Chrome DevTools の Computed タブで unicode-bidi と direction の有効値を確認しましょう。



ユーザー: ابو علي - 投稿数 123




ユーザー: ابو علي - 投稿数 123

関連

  • direction — テキスト方向（ltr / rtl）
  • 要素 — 双方向テキストの分離
  • 要素 — テキスト方向の強制
  • writing-mode — 縦書き / 横書きの切替
  • Unicode 双方向アルゴリズム（UBA） — 文字レベルの方向決定ルール