概要
unicode-bidiプロパティは、CSSでテキストの双方向性（Bi-Directional、Bidi）を制御するためのプロパティです。このプロパティは、主に多言語対応や複雑なテキスト配置において、テキストの表示方向を正しく制御する際に使用されます。例えば、アラビア語やヘブライ語のような右から左に流れるテキストと、英語のような左から右に流れるテキストが混在する場合に役立ちます。
unicode-bidiプロパティの基本構文
unicode-bidiプロパティの基本的な構文は次の通りです。
unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;
normalデフォルト値。特に双方向のテキスト処理を行いません。embedテキストの双方向処理を有効にし、親のテキスト方向を継承します。isolate外部のテキスト方向に影響を与えず、要素内の双方向処理を独立させます。bidi-overridedirectionで設定したテキスト方向を強制し、双方向テキスト処理を無視します。isolate-overrideisolateとbidi-overrideの効果を組み合わせたもの。plaintextテキスト全体を一つの段落として扱い、内容に基づいて方向を決定します。
使用例
基本的な使用例
以下の例では、unicode-bidiプロパティを使用して双方向テキストの表示を制御しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>unicode-bidiプロパティの例</title>
<style>
.normal {
direction: rtl;
unicode-bidi: normal;
}
.embed {
direction: rtl;
unicode-bidi: embed;
}
.bidi-override {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h2>unicode-bidi: normal</h2>
<p class="normal">This text is displayed in a normal bidi context.</p>
<h2>unicode-bidi: embed</h2>
<p class="embed">This text is displayed with an embedded bidi context.</p>
<h2>unicode-bidi: bidi-override</h2>
<p class="bidi-override">This text is forced to be right-to-left.</p>
</body>
</html>
normalは通常の双方向処理を行いません。embedは右から左の方向性を保持しつつ、親のテキスト方向を継承します。bidi-overrideは右から左の方向を強制します。
双方向テキストの管理
unicode-bidiプロパティは、特定の方向を強制する場合に便利です。例えば、文章中に英語とアラビア語が混在している場合、方向の不整合を修正できます。
.container {
direction: rtl;
unicode-bidi: embed;
}
このスタイルは、右から左へ流れるテキストの中に英語のフレーズを適切に配置する際に有効です。
unicode-bidiプロパティの注意点
unicode-bidiはdirectionプロパティと併用することが多く、特にbidi-overrideを使うと、directionで設定した方向を強制的に適用できます。isolateは外部のテキストの方向に影響を与えないため、要素内のテキスト方向を独立して制御したい場合に便利です。plaintextは特定の段落全体の方向を解析し、混在するテキストの方向を自動で調整しますが、処理コストが高くなる可能性があるため、使いどころに注意が必要です。
まとめ
unicode-bidiプロパティは、双方向テキストを制御する強力なツールです。特に多言語対応のWebデザインにおいて、テキストの表示方向を細かく調整するために活用できます。normalからbidi-overrideまで、それぞれの値の特性を理解し、適切に組み合わせることで、テキストのレイアウトや視覚的な整合性を確保しましょう。