言語の境界線を制御せよ：`direction`と`unicode-bidi`が解き明かす双方向テキストの深淵
Webアプリケーションがグローバル展開を前提とする現代において、多言語対応（i18n）は単なる翻訳の問題ではない。特に、アラビア語やヘブライ語に代表される右書き（RTL: Right-to-Left）と、我々が慣れ親しんだ左書き（LTR: Left-to-Right）が同一のインラインコンテキストで混在する場合、ブラウザのレンダリングエンジンは「Unicode双方向アルゴリズム（Bidi Algorithm）」という複雑な計算を強いられる。
多くのエンジニアが「CSSでなんとかなる」と高を括っているこの領域だが、実際にはレンダリングの不整合や、アクセシビリティの欠落を招く地雷原でもある。今日は、この泥臭い双方向テキスト制御の核心にメスを入れる。
1. ブラウザエンジン内部で起きていること：Bidiアルゴリズムの呪縛
ブラウザはテキストをレンダリングする際、Unicodeの文字属性に基づいて視覚的な配置を決定する。しかし、インライン要素内で複数の言語が入り混じると、デフォルトの挙動だけでは「文脈の断絶」が発生し、句読点の位置が逆転したり、数値が予期せぬ順序で表示されたりする。
ここで重要になるのが、CSSの `direction` プロパティと `unicode-bidi` プロパティの組み合わせだ。
- `direction`: テキストの基底方向（`ltr` または `rtl`）を決定する。
- `unicode-bidi`: Bidiアルゴリズムに対して、要素をどのように「独立したブロック」として扱うかを指示する。
特に `unicode-bidi: isolate` は重要だ。これは、その要素を周囲のテキストから「隔離」し、内部の順序が外部のアルゴリズムに汚染されないようにする強力なプロパティである。
2. 堅牢な実装：TypeScriptによる型安全なコンポーネント設計
双方向テキストを扱うコンポーネントを設計する際、マジックナンバーや生のCSSクラスを乱立させるのは悪手だ。型安全を確保し、意図を明確にする設計が求められる。
type Direction = ‘ltr’ | ‘rtl’;
interface BidiProps {
dir: Direction;
// 意図的に隔離を行うかどうかを制御するためのフラグ
isolate?: boolean;
}
/
- 双方向テキストを安全に制御するためのラッパーコンポーネント
- CSS変数またはインラインスタイルで動的に適用することで、
- 再レンダリング時のレイアウトシフト（CLS）を最小限に抑える
/
const BidiContainer = ({ dir, isolate = true, children }: React.PropsWithChildren
return (
{children}
);
};
なぜ `display: inline-block` が必要なのか？
`inline` 要素のままだと、ブラウザのBidiアルゴリズムによる文字の再配置が断続的に発生し、リフロー時に予期せぬ計算コストを招くことがある。`inline-block` にすることで、要素のボックスが独立した計算コンテキストを持ち、レンダリング負荷の予測可能性が向上する。
3. エッジケースの回避：アクセシビリティと不可視の罠
双方向テキストにおける最大のバグは、視覚的には正しく見えても、スクリーンリーダーが読み上げる順序が逆転してしまうことだ。
- `time`要素の罠: タイムスタンプをRTL環境で扱う場合、`datetime`属性と視覚的なテキストが乖離しないよう注意が必要だ。
- ゼロ幅接合子（ZWJ）とマーク: 不可視の制御文字（LRM/RLM）を意図的に挿入することで、アルゴリズムを強制的に矯正する必要がある場面がある。
特に、動的に更新される非同期データ（APIからのレスポンスなど）を表示する場合、DOMの更新タイミングでBidiアルゴリズムが再計算される。これによる「一瞬の表示揺れ」は、ユーザー体験を著しく損なう。
回避策:
更新が必要な領域には `contain: layout style;` を付与し、その領域内での変更が親要素のレイアウト計算に波及しないよう、ブラウザの描画パイプラインを最適化することだ。
.bidi-stable-container {
/ レイアウト計算をこのコンテナ内に閉じ込める /
contain: layout style;
unicode-bidi: isolate;
}
4. 結び：エンジニアが向き合うべき「言語の壁」
`direction` と `unicode-bidi` は、単なる装飾のためのプロパティではない。これは、世界中のユーザーが等しく情報にアクセスするための「論理的な境界線」を定義する技術である。
パフォーマンスを追求する上級エンジニアならば、CSSのプロパティを機械的に当てるだけでなく、それがブラウザのレイアウトエンジンにどのような負荷をかけ、アクセシビリティツリーをどう構築しているのかまで想像を巡らせるべきだ。
コードは、常にその背後にある人間（ユーザー）の営みを尊重するためにある。次回のUI設計では、ぜひ「言語の流れる方向」にまで深く配慮した、血の通った実装を試みてほしい。
コメント