text-combine-upright：一文字分の空間に挿入する文字の組み合わせを指定する

text-combine-uprightプロパティの説明

text-combine-uprightは、一文字分の空間に挿入する文字の組み合わせを指定します。この機能は縦書きモードの場合のみ有効です。

例えば、半角の数字を二つ並べて一文字分の空間に収める、縦書きの小説などが想定されます。「12時45分」のような内容の場合に、数字が縦に一文字ずつ並んでいては読みづらいためです。その祭、文字の角度も重要になります。横書きの英文や数字を縦書きにすると90度回転して読みづらくなる可能性があります。

text-combine-uprightに指定できる値

none

特に処理を行いません。これが初期値です。

all

タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。

digits <integer>?（β）

指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。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を指定し、右から左へ読む縦書き表記にした場合の表示です。

半角数字が二文字以上並ぶ場合に、横に並べて一文字分の空間に収めます。このような表現は小説や雑誌などの印刷物で一般的ですが、ウェブページでは特別な処理が必要な形式です。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 1rem 0 1rem 1rem;
	background: #fff;
	writing-mode: vertical-rl;
}
section > h2 {
	margin: 0 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: 0 1rem 0 0;
	font-size: 2rem;
}
.tcu_n .num {
	text-combine-upright: none;
}
.tcu_a .num {
	text-combine-upright: all;
}
.tcu_d .num {
	text-combine-upright: digits;
}

<div class="samp_box">
	<section class="tcu_n">
		<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_a">
		<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_d">
		<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>