【CSS Modules】text-orientationプロパティの使い方

text-orientationプロパティは、主に縦書きの文章における文字の向きを制御するために使用されるプロパティです。このプロパティは、writing-modeプロパティでテキストの書き込み方向が縦書き（vertical-lrやvertical-rlなど）に設定されている場合に効果を発揮し、個々の文字（特にアルファベット、数字、記号などの非CJK文字）がどのように配置されるかを調整します。日本語や中国語などの縦書き文化圏でのテキストレイアウト表現において重要な役割を果たします。

設定できる主な値とその挙動は以下の通りです。 mixedはデフォルト値であり、非CJK文字は通常通り横書きと同じ向き（横向き）で配置されます。一方で、日本語のひらがなや漢字などのCJK文字は、縦書きの方向に沿って正しく表示されます。 uprightを指定すると、全ての文字を縦書きの方向に対して正立させて配置します。これにより、非CJK文字であっても縦書きの流れに沿って向きが調整され、縦書き文書内での視認性が向上します。 sidewaysを指定すると、全ての文字を縦書きの方向に対して90度回転させて配置します。非CJK文字も90度回転して表示されるため、特定のデザイン要件に合わせてテキストの向きを調整できます。

このプロパティは、ウェブページで縦書きのテキストコンテンツをデザインする際に、半角英数字や記号の表示方法を細かく制御し、デザインの一貫性や視認性を保つために利用されます。例えば、縦書きの詩、小説、あるいは縦方向のメニューなどで、テキストの美しいレイアウトを実現するために活用されます。

Copy
1text-orientation: upright;

引数なし

引数はありません

戻り値なし

戻り値はありません