縦書き・文字の向き

text-combine-upright

text-combine-upright は、縦書きの中で数字などを横に並べて 1 文字分に収めます。日付の「10」や時刻の「30」を読みやすく立てる、縦中横（たてちゅうよこ）と呼ばれる組み方です。

構文

none | all | [ digits <integer [2,4]>? ]

今日は10月17日。午後3時30分に駅の2番出口で会いましょう。

プリセット

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

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

text-combine-uprightall

noneall

今日は10月17日。午後3時30分に駅の2番出口で会いましょう。

縦書きにすると、英数字はふつう横に寝た向きで並びます。2 桁ほどの数字なら、横に並べて 1 文字分の幅に収めたほうが読みやすくなります。

このプロパティは、数字だけを囲んだ <span> などに書きます。文章全体に書くと、まとまった文字をすべて 1 文字分に詰め込もうとしてしまいます。このページのプレビューでは、見本の数字の部分にだけ効くようにしています。

仕様には、2〜4 桁までの数字だけを自動で横に並べる digits もありますが、どのブラウザも対応していないのでこのページでは選べません。