【CSS Modules】unicode-bidiプロパティの使い方
unicode-bidiプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
unicode-bidiプロパティは、テキストの双方向性(bidirectional text)の処理を制御するプロパティです。主に、アラビア語やヘブライ語のように右から左へ記述する言語(RTL:Right-To-Left)と、英語や日本語のように左から右へ記述する言語(LTR:Left-To-Right)が混在する多言語環境において、テキストの表示順序を適切に制御するために使用されます。このプロパティは、Unicodeの双方向アルゴリズム(Unicode Bidirectional Algorithm)に従ってテキストがどのように配置されるかを調整します。
主な値としては、「normal」、「embed」、「bidi-override」、「isolate」、「isolate-override」、「plaintext」などがあります。デフォルト値である「normal」は、テキストをUnicode双方向アルゴリズムに従って処理し、明示的な方向性を持たない文字は親要素の方向性に合わせます。「embed」は、指定された要素内に新しい双方向の埋め込みコンテキストを作成し、その内部のテキストフローはdirectionプロパティの値によって制御されます。「bidi-override」は、要素内のテキストを強制的にdirectionプロパティで指定された方向で表示させ、Unicode双方向アルゴリズムを完全に上書きします。「isolate」は「embed」に似ていますが、要素の内部が外部のテキストの双方向性から完全に隔離されるため、互いに影響を与えずに表示されます。「isolate-override」は「isolate」と「bidi-override」の特性を組み合わせたものです。「plaintext」は、親要素から双方向の埋め込みやオーバーライドの状態を継承せず、新しい独立した双方向コンテキストを開始します。
このプロパティは、特に国際化されたウェブアプリケーションにおいて、異なる言語が混在するコンテンツの視認性と正確性を保つ上で非常に重要です。正しいテキストの順序を保証することで、ユーザーが混乱することなく情報を読めるように貢献します。
構文(syntax)
1div { 2 unicode-bidi: normal; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません