テキスト

text-orientation

text-orientation は、縦書きの中で文字を立てるか横に倒すかを指定します。英字を立てて縦に並べたいときに使います。

構文

mixed | upright | sideways

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

text-orientationupright

mixeduprightsideways

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

writing-mode が vertical-rl か vertical-lr のときだけ効きます。このページのプレビューも、writing-mode: vertical-rl を先に書いてあります。

「10 月」の「10」のような短い数字は、upright で 1 文字ずつ立てるより、text-combine-upright: all（縦中横）で 1 文字分に横並びで収めるほうが読みやすくなります。