Skip to content

Latest commit

 

History

History
29 lines (20 loc) · 1.29 KB

horizontal-in-vertical.md

File metadata and controls

29 lines (20 loc) · 1.29 KB

縦中横

縦中横(たてちゅうよこ、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;
}

参考資料