text-orientation:縦書きモードの文字の向きを指定する
初期値 | mixed |
適用対象 | 全ての要素、ただし表のグループ、行、列を除く |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
text-orientationプロパティの説明
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
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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
の解説を参照して下さい。
表示確認
CSS
.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;
}
HTML
<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>
text-orientationに関連するCSSプロパティ
テキスト関連 | |
---|---|
text-align | ボックスに含まれる内容の横位置の揃え方を指定する |
text-align-last | ボックスに含まれる内容の最後の行を揃える位置を指定する |
text-combine-upright | 一文字分の空間に挿入する文字の組み合わせを指定する |
text-decoration | 文字の装飾線に関する値を一括で指定する |
text-decoration-color | 文字に加えられた装飾線の色を指定する |
text-decoration-line | 文字に加えられた装飾線の種類を指定する |
text-decoration-skip-ink | 装飾線が文字を通過する祭の処理を指定する |
text-decoration-style | 文字に加えられた装飾線の形状を指定する |
text-decoration-thickness | 文字に加えられた装飾線の太さを指定する |
text-emphasis | テキストに付加する圏点、傍点、脇点に関する値を一括で指定する |
text-emphasis-color | テキストに付加する圏点、傍点、脇点の色を指定する |
text-emphasis-position | テキストに付加する圏点、傍点、脇点の位置を指定する |
text-emphasis-style | テキストに付加する圏点、傍点、脇点の記号を指定する |
text-indent | テキストの一行目に挿入するインデントの幅を指定する |
text-justify | テキストの行端揃えに対して均等割り付けの方法を指定する |
text-orientation | 縦書きモードの文字の向きを指定する |
text-overflow | 行からテキストが溢れている状態の表現方法を指定する |
text-shadow | 文字に影(ドロップシャドウ)を付ける |
text-transform | テキストの大文字・小文字の表記を指定する |
text-underline-position | 文字の下に引かれる装飾線の位置を指定する |