text-combine-uprightプロパティの説明
CSSのtext-combine-uprightプロパティは、一文字分の空間に挿入する文字の組み合わせを指定します。縦書きの文章で「縦中横」と呼ばれる処理をしたい場所に有効です。
例えば、半角の数字を二つ以上並べて年月日を表記する場合に、横書きであれば問題ないのですが縦書きにすると数字が縦に並んで読みづらくなります。それを数字だけ横向きのまま一文字分の範囲に収めることができます。
この機能は縦書きモードの場合のみ有効です。文章を縦書きで表示するには、writing-modeプロパティの値を調整します。既定値では、文字は左から右へ水平方向に並び、改行すると上から下へ重なります。
text-combine-uprightに指定できる値
none- 特に処理を行いません。これが初期値です。
all- 指定された範囲の文字を水平に並べて一文字分のボックスに収めます。文字の幅は自動的に圧縮されます。
digits <integer>（β）- 指定した数の連続した数字（U+0030 – U+0039）を水平に並べて一文字分のボックスに収めます。整数値を省略した場合は二桁になります。数値は
2～4の範囲を受け入れます。
text-combine-uprightの使い方とサンプルコード
text-combine-uprightプロパティの構文は以下の通りです。
/* キーワード値 */
text-combine-upright: none;
text-combine-upright: all;
/* digits値 */
text-combine-upright: digits;
text-combine-upright: digits 4;
/* グローバル値 */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: unset;
text-combine-uprightの実例
それでは実際にtext-combine-uprightプロパティの書き方を見ていきましょう。以下の例は、writing-modeの値にvertical-rlを指定し、右から左へ読む縦書き表記にした場合の表示です。
半角数字が二文字以上並ぶ場合に、横に並べて一文字分の空間に収めます。このような表現は小説や雑誌などの印刷物で一般的ですが、ウェブページでは特別な処理が必要な形式です。
<div class="samp_box">
<section class="tcu_none">
<h2>text-combine-upright: none;</h2>
<p>紀元<span class="num">2025</span>年<span class="num">10</span>月<span class="num">10</span>日</p>
</section>
<section class="tcu_all">
<h2>text-combine-upright: all;</h2>
<p>紀元<span class="num">2025</span>年<span class="num">10</span>月<span class="num">10</span>日</p>
</section>
<section class="tcu_digits">
<h2>text-combine-upright: digits;</h2>
<p>紀元<span class="num">2025</span>年<span class="num">10</span>月<span class="num">10</span>日</p>
</section>
</div>
body {
writing-mode: vertical-rl;
}
.samp_box {
padding: 1rem;
background: #eee;
}
.samp_box > section {
overflow: auto;
margin-block: 1rem 0;
padding: 1rem;
background: #fff;
}
section > h2 {
margin: 0;
font-size: 1rem;
}
section > p {
margin-block: 1rem 0;
font-size: 2rem;
}
.tcu_none .num {
text-combine-upright: none;
}
.tcu_all .num {
text-combine-upright: all;
}
.tcu_digits .num {
text-combine-upright: digits;
}