【CSS】文字を縦書きにする
この記事の目的
最近、日本のWebサイトで、文字を 縦書き にしたレイアウトを見ることが多いです。
例えば、以下のサイトたちです。
このようなサイトの他に、メニューバーの文字を縦書きで表示するサイトもよく見ます。
この記事では、「文字の縦書きを使えるようにする」ことを目的に、以下のプロパティについて解説します。
- 文字を縦書きにする「writing-mode」プロパティ
- 縦書きテキストの向きを設定する「text-orientation」プロパティ
- 数字が横向きになるのを防ぐ「text-combine-upright」プロパティ
文字を縦書きにする「writing-mode」プロパティ
writing-mode は、厳密には、ブロックのフロー方向を設定するプロパティです。
ブロックのフロー方向は、左書き言語( ltr：英語など) 又は、右書き言語( rtl：ヘブライ語など) によって変わります。
右書き言語について、詳しく知りたい方向け：
続いて、値の紹介です。
※「rtl」の説明は省いております。
horizontal-tb
既定値です。文字を「左から右」に流す設定がされています。
他のプロパティは、全て縦書きになります。
vertical-rl
「ltr」では、文字は「上から下」に流れ、行は「右から左」に流れます。
イメージとしては、原稿用紙の書く方向です。
vertical-lr
「ltr」では、文字は「上から下」に流れ、行は「左から右」に流れます。
以下の値は、firefox ブラウザーでしか使えないので注意が必要です。
sideways-rl
「ltr」では、文字は「下から上」に流れ、右に90度回ります。
sideways-lr
「ltr」では、文字は「上から下」に流れ、左に90度回ります。
ブラウザーとの互換性
縦書きテキストの向きを設定する「text-orientation」プロパティ
text-orientation は、文字の向きを設定するプロパティです。
縦書きテキスト(writing-mode が horizontal-tb 以外の値)の時だけ、使用できます。
続いて、値の紹介です。
mixed
既定値です。縦書き用の文字は自然に配置します。横書き用の文字は右に 90° 回転させます
upright
横書き用の文字を、正立(縦書き)で配置します。また、すべての文字を左書きと見なします。 direction の使用値は ltr に強制されます。
sideways
すべてのテキストを 90° 回転したように配置します。
/* vertical-rl を基準 */
writing-mode: vertical-rl;
/* mixed */
text-orientation: mixed;
/* upright */
text-orientation: upright;
/* sideways */
text-orientation: sideways;
以下は使われていない値です
sideways-right
sideways の別名。使われていない。
use-glyph-orientation
SVG 要素上で、プロパティ glyph-orientation-vertical と glyph-orientation-horizontal の値を使用する。現在は、使用されていない。
ブラウザーとの互換性
数字が横向きになるのを防ぐ「text-combine-upright」プロパティ
text-combine-upright は、１文字分の空間にどれくらいの文字を入れるかを設定するプロパティです。
簡単に言うと、word などで見かける「縦中横」の設定を行います。
縦中横について知りたい方向け：
続いて、値の紹介です。
none
特別な処理をしません。
all
文字を１文字分の空間に収めます。「縦中横」の設定です。
設定したい部分を<span> タグなどで囲みます。
/* vertical-rl を基準 */
writing-mode: vertical-rl;
/* 「2024」の部分を <span> で囲む */
span {
text-combine-upright: all;
}
digits <integer>?
※ 対応しているブラウザがないので、使いません。
指定した桁数の数字を１文字分の空間に収めます。
桁数の範囲は、２～４です。範囲外になると無視されます。
既定値は、２です。
ブラウザーとの互換性
Can I use text-combine-upright
他の参考資料
Discussion