CSS プロパティ direction：テキストの方向を制御する
direction プロパティは、テキストの並び方向を設定するために使用される重要な CSS プロパティです。テキストを左から右 (ltr) に表示するか、右から左 (rtl) に表示するかを決定します。これは、複数の言語や書記体系をサポートするウェブページにとって非常に重要です。
1. プロパティ値の詳細
- ltr: テキストは左から右に配置されます。英語、フランス語などが該当します。
- rtl: テキストは右から左に配置されます。アラビア語、ヘブライ語などが該当します。
2. 適用可能な要素
direction プロパティは、テキストを表示するすべての HTML 要素に適用できます。
3. direction と unicode-bidi の関係
direction プロパティは、双方向テキストの表示をより細かく制御するために、unicode-bidi プロパティと組み合わせて使用されることがよくあります。 unicode-bidi プロパティを使用すると、周囲のテキストの配置に影響を与えることなく、異なる方向性を持つテキストのセグメントを埋め込むことができます。
<p dir="ltr">This is an example of <bdi dir="rtl">Arabic text</bdi> embedded within an English sentence.</p>
上記の例では、アラビア語のテキストは英語の文の中に埋め込まれていますが、unicode-bidi プロパティを使用することで、アラビア語のテキストは正しく右から左に表示されます。
4. 継承性
direction プロパティは継承可能です。つまり、要素に direction プロパティが明示的に設定されていない場合、親要素の direction 値を継承します。
5. ブラウザの互換性
direction プロパティは、すべての主要なモダンブラウザでサポートされているため、優れたブラウザ互換性を備えています。
| ブラウザ | バージョン | サポート |
|---|---|---|
| Chrome | すべて | ✅ |
| Firefox | すべて | ✅ |
| Safari | すべて | ✅ |
| Edge | すべて | ✅ |
| Internet Explorer | 5.5 以上 | ✅ |
6. 使用シナリオ
-
多言語ウェブサイト: 複数の言語のコンテンツを含むウェブサイトの場合、
directionプロパティを使用すると、各言語のテキストが正しい方向に確実に表示されます。 -
RTL 言語のサポート: アラビア語、ヘブライ語など、右から左に記述する言語をウェブサイトでサポートする必要がある場合は、
directionプロパティを使用してテキストを正しく表示する必要があります。 - テキスト方向の制御: 特定のテキストの段落の表示方向を変更する必要がある場合があります。たとえば、コードサンプル内や、特定のデザイン効果を実現する場合などです。
7. まとめ
direction プロパティは、テキストの表示方向を制御するための重要な CSS プロパティであり、多言語のサポートとユーザーエクスペリエンスの向上に不可欠です。
よくある質問
-
Q:
directionプロパティとwriting-modeプロパティの違いは何ですか？
A:directionプロパティはテキストの並び方向を制御し、writing-modeプロパティはテキストの行の方向を制御します。directionプロパティは水平方向のテキストにのみ影響しますが、writing-modeプロパティは垂直方向のテキストにも影響します。
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode -
Q:
directionプロパティを要素に設定しても、テキストの方向が変わっていないのはなぜですか？
A: 考えられる原因はいくつかあります。- 要素にテキストが含まれていない。
- 要素のスタイルが、より具体的なセレクタによって上書きされている。
unicode-bidiプロパティが、directionプロパティの効果を無効にしている。
-
Q: 特定のテキストのセグメントの方向を変更するにはどうすればよいですか？
A:<bdi>要素または<span>要素を使用して、テキストのセグメントを囲み、その要素にdirectionプロパティを設定します。