縦中横(たてちゅうよこ、horizontal-in-vertical composition)は、縦組みの日本語テキストの中で横組みの欧文を水平に配置することをいいます。おもに3桁程度までの数字や単位を表す欧文などで使われます。
CSSで縦中横を実現するには、該当箇所にtext-combine-upright: all;
を指定します。このとき横組みのテキストは1em分の幅に収まるよう縮小されます。なおwriting-mode
プロパティの値がhorizontal-tb
のとき(つまり横組みのとき)には無効です。
<p>これは<span class="num">50</span>年代末に大流行した(<span class="num">108</span>ページ参照)。</p>
p {
writing-mode: vertical-rl;
}
p .num {
text-combine-upright: all;
}