CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのunicode-bidiプロパティとは？テキストの書字方向を制御する方法

CSSのunicode-bidiプロパティは、多言語対応のためにテキストの書字方向（双方向テキスト）を上書きするかどうかを設定するためのプロパティです。アラビア語やヘブライ語のように右から左へ記述される言語（RTL言語）と、日本語や英語のような左から右へ記述される言語（LTR言語）が混在するコンテンツで特に役立ちます。

unicode-bidiプロパティの主な値

  • normal：デフォルト値。追加の埋め込みレベルを適用しません。
  • bidi-override：directionプロパティで指定した方向に従い、テキストの並び順を強制的に上書きします。
  • isolate：要素内のテキストを周囲のテキストから分離（隔離）し、書字方向の影響を与えません。
  • embed：directionプロパティに基づいて追加の埋め込みレベルを適用します。

使用例

以下の例では、directionプロパティと組み合わせて、bidi-overrideとisolateそれぞれの挙動を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p.demo1 {
            direction: rtl;
            unicode-bidi: bidi-override;
         }
         p.demo2 {
            direction: rtl;
            unicode-bidi: isolate;
         }
      </style>
   </head>
   <body>
      <h1>unicode-bidiプロパティのデモ</h1>
      <p>これはサンプルテキストです。</p>
      <p class="demo1">This is demo text</p>
      <p class="demo2">This is demo text</p>
   </body>
</html>

実行結果のポイント

bidi-overrideを指定したdemo1では、direction: rtl の設定によりテキストが強制的に右から左へ表示されます。一方、isolateを指定したdemo2では、要素の内容が独立した領域として扱われ、周囲のテキストとの書字方向の干渉を防ぎます。

国際化対応のWebサイトを構築する際には、directionプロパティとunicode-bidiプロパティを適切に組み合わせることで、複数の言語が混在するテキストでも正しく自然な表示を実現できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります