text-orientationプロパティは、縦書きレイアウトでのテキストの方向を指定するためのプロパティです。これにより、文字が回転するか、そのまま表示されるかを制御することができます。主に縦書きのレイアウトに関連するプロパティです。
text-orientationの値とその効果の一覧
- mixed: 英字や数字は横向き、他の文字は縦向きに表示されます。
- upright: すべての文字が縦向きに表示されます。
- sideways: すべての文字が横向きに回転して表示されます。
注意点と関連情報
text-orientationプロパティは、writing-modeプロパティと一緒に使用されることが多いです。特に、縦書きレイアウトでのテキストの表示方法を制御するために重要な役割を果たします。日本語などの縦書き文化に対応する場合、適切に使い分けることが推奨されます。
text-orientationが効かない時の原因と対策
writing-modeが設定されていない
text-orientationは、テキストの表示方向を制御するプロパティで、通常は縦書きレイアウトで使用されます。しかし、writing-modeが横書き（horizontal-tb）になっていると、text-orientationは機能しません。
対策: writing-modeを縦書きに設定します。例えば、writing-mode: vertical-rl;やwriting-mode: vertical-lr;を指定して、縦書きレイアウトにすることで、text-orientationが効果を発揮します。例: writing-mode: vertical-rl; text-orientation: upright;。
インライン要素に適用されていない
text-orientationはインライン要素やインライン要素を含むブロックレベル要素に対して適用されます。ブロック要素には効果がありません。
対策: インライン要素（<span>, <a>, <em>など）や、インライン要素を含むブロックレベル要素にtext-orientationを適用します。例えば、<span style="text-orientation: upright;">のように設定します。
text-combine-uprightの影響
text-combine-uprightプロパティが設定されている場合、text-orientationの効果が影響を受けることがあります。特に、数字や短い文字列を1つの文字幅内にまとめて表示する場合、text-orientationが期待通りに機能しないことがあります。
対策: text-combine-uprightとtext-orientationの組み合わせを確認します。両方のプロパティが影響を及ぼしていないか確認し、必要に応じて設定を調整します。例えば、text-combine-upright: none; text-orientation: upright;のように指定します。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
}
.css-sample-text {
writing-mode: vertical-rl;
border: 1px solid #999;
padding: 10px;
font-size: 16px;
text-align: justify;
}text-orientation: mixed
英字や数字は横向き、他の文字は縦向きに表示されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-mixed">
これはtext-orientation: mixed; の表示例です。Text orientation mixed では、英字や数字は横向きに表示され、他の文字は縦向きに表示されます。
</div>
</div>CSSコード
.css-sample-text-mixed {
text-orientation: mixed;
}表示結果
text-orientation: upright
すべての文字が縦向きに表示されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-upright">
これはtext-orientation: upright; の表示例です。すべての文字が縦向きに表示されます。
</div>
</div>CSSコード
.css-sample-text-upright {
text-orientation: upright;
}表示結果
text-orientation: sideways
すべての文字が横向きに回転して表示されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-sideways">
これはtext-orientation: sideways; の表示例です。すべての文字が横向きに表示されます。
</div>
</div>CSSコード
.css-sample-text-sideways {
text-orientation: sideways;
}表示結果
まとめ
- text-orientationは、縦書きレイアウトでテキストの表示方向を制御するプロパティです。
- 主要な値には「mixed」、「upright」、「sideways」があり、それぞれ文字の向きを決定します。
- このプロパティは、縦書きの文脈で使用されるため、writing-modeと一緒に使うことが一般的です。
- ブラウザ互換性を確認しながら使うことが推奨されます。