【CSS】text-combine-upright - １文字分のテキスト

CSSのtext-combine-uprightプロパティについてご紹介します。

text-combine-upright

text-combine-uprightは１文字分の幅にテキストを並べるかを表すプロパティです。
主にwriting-modeがvertical-rlまたはvertical-lrの場合に使用します。

基本構文

text-combine-upright: 値;

値

代表的な値は次の通りです。

サンプル

次のサンプルは日付の数字を横並びにします。

<style>
p {
    font-size: 1.5em;
    writing-mode: vertical-rl;
}
span {
    text-combine-upright: all;
}
</style>
 
<p><span>2024</span>年<span>1</span>月<span>20</span>日</p>