text-orientationプロパティの説明
CSSのtext-orientationプロパティは、縦書きモードで配置された文字の向きを指定します。この機能は、writing-modeの値がvertical-rlまたはvertical-lrの適用範囲に含まれるテキストが対象となります。
フォントには横書き用の文字と縦書きに対応した文字が存在しますが、横書き用の文字を縦書きモードで表示した時に読みづらい場合があります。また見出しや装飾を意図した箇所で文字を回転させたい時があるとします。そのような場面で、text-orientationは活用が見込まれるプロパティです。
text-orientationに指定できる値
mixed- 横書き用の文字を右に90°回転させた状態で表示します。縦書き用の文字はそのまま正位置で表示します。これが初期値です。
upright- 横書き用の文字を、縦書き用の文字と同様に正位置で表示します。この値が適用された範囲は全て文字を左書きと見なし、
directionの値をltrに強制します。 sideways- 全ての文字を90°回転させた状態で表示します。
sideways-right- 全ての文字を90°回転させた状態で表示します。
sidewaysと同じ効果ですが、互換性のために維持されている値です。 use-glyph-orientation- SVG要素の中で、
glyph-orientation-verticalとglyph-orientation-horizontalプロパティの値を使用します。
text-orientationの使い方とサンプルコード
text-orientationプロパティの構文は以下の通りです。
/* キーワード値 */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways;
text-orientation: sideways-right;
text-orientation: use-glyph-orientation;
/* グローバル値 */
text-orientation: inherit;
text-orientation: initial;
text-orientation: initial;
text-orientation: unset;
text-orientationの実例
それでは実際にtext-orientationプロパティの書き方を見ていきましょう。以下の例は、縦書きモードの段落に日本語と英語を混在した文章を配置した時の挙動です。横書き用の文字を回転させたり、敢えて縦書き用の文字を横倒しにするなどの表現が可能となります。
特定の範囲に対してのみこの効果を適用したい場合は、インライン要素で囲ってプロパティが影響する範囲を限定しましょう。数字などの半角文字を横並びに配置して一文字分のスペースに収めたい場合は、text-combine-uprightの解説を参照してください。
<div class="vtext_box">
<section class="to_1">
<h1>text-orientation: mixed;</h1>
<p>紀元2045年10月10日<br>
この文章は English と Japanese の混合です。</p>
</section>
<section class="to_2">
<h1>text-orientation: upright;</h1>
<p>紀元2045年10月10日<br>
この文章は English と Japanese の混合です。</p>
</section>
<section class="to_3">
<h1>text-orientation: sideways;</h1>
<p>紀元2045年10月10日<br>
この文章は English と Japanese の混合です。</p>
</section>
<section class="to_4">
<h1>text-orientation: sideways-right;</h1>
<p>紀元2045年10月10日<br>
この文章は English と Japanese の混合です。</p>
</section>
</div>
.vtext_box {
overflow: auto;
width: 100%;
padding: 1rem;
background: #eee;
line-height: 1.5;
writing-mode: vertical-rl;
}
.vtext_box > section {
overflow: auto;
margin: 0 1rem 0 0;
padding: 1rem 0 1rem 1rem;
background: #fff;
font-family: serif;
}
section > h1 {
margin: 0 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: 0 1rem 0 0;
}
.to_1 p {
text-orientation: mixed;
}
.to_2 p {
text-orientation: upright;
}
.to_3 p {
text-orientation: sideways;
}
.to_4 p {
text-orientation: sideways-right;
}