ほんっとにはじめての HTML5 と CSS3

text-combine-uprightプロパティは、「縦中横（たてちゅうよこ）」を指定できます。

「縦中横」とは「縦書きの中の横組み」という意味の印刷・編集用語です。
例えば縦書きの文章で「20km」を1文字ずつ縦に並べるんじゃなく「20」と「km」で横に組んでから縦に並べると読みやすいですね。
こんなふうに「縦組み」の中で、2〜4文字くらいまでを1文字分のスペースで横組みにすることを「縦中横」といいます。

「combine（コンバイン）」は「結合」、「upright（アップライト）」は「直立」という意味で、text-combine-upright は「テキストを結合させて直立させる」ってことですかね。

「縦書き」では、関連プロパティと一緒に使うことが多いです。関連プロパティを数回に渡ってアップしています↓

【45-1】日本語の縦書きもできちゃう writing-modeプロパティ

【45-2】縦書きでの文字の向きを決める text-orientation

【45-3】縦書きで「縦中横」ができる text-combine-uprightプロパティ　←今日はココ

参考：
・CSS Writing Modes Level 3 | W3C Candidate Recommendation
・CSS Writing Modes Level 4 | Editor’s Draft
・text-combine-upright - CSS | MDN

text-combine-uprightプロパティの値

text-combine-uprightプロパティの値は以下のものがあります。

text-combine-uprightプロパティの値
キーワード	noneがデフォルト値。all
digits 整数	指定した桁数 (整数2〜4) までの連続した「半角数字（ASCII数字）」をセットで縦中横にします（例　text-combine-upright: digits 3） ＊この値は Writing Modes Level 4 で草案に入っており、実装しているブラウザは少ないようです（2018年12月記）
グローバル値	text-combine-upright: inherit; 親の値を継承（コレ書かなくても継承するけど） text-combine-upright: initial; 継承した親の値を解消しデフォルト値に戻す text-combine-upright: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	インライン要素。 置換インライン要素（<img>とか）は除く。

それぞれのキーワードは、以下の意味があります。

none

縦中横は無し。デフォルト値です。

all

すべての文字を縦中横（水平に並べて1文字分のスペースに収める）にします。
<span>要素などで 縦中横にしたい範囲を囲んでから指定する必要があります。

digits 整数

指定した桁数 (整数2〜4) までの連続した「半角数字（ASCII数字）」をセットで縦中横にします（例　text-combine-upright: digits 3）
・半角数字のみが対象
・整数値を省略したら値は「2」になります。
・2〜4以外の整数値は使えません。
＊この値は Writing Modes Level 3 で見送られ、Level 4 の草案に入っています。実装しているブラウザは少ないようです（2018年12月記）

text-combine-uprightの変遷とブラウザ対応状況

2018年12月の状況です。

text-combine-uprightプロパティは、2011年の「CSS3 Writing Modes」仕様があって、当初は「text-combine」というプロパティ名で、値は「none」と「horizontal」だったんだそうで、古めの Chrome, Opera は「-webkit-text-combine」で値は「none」と「horizontal」で実装しています。ややこしいですね。
Safari は、この古い仕様（-webkit-text-combine）のみで対応しているそうです。

IE 11 は「-ms-text-combine-horizontal」というプロパティ名で、値は「none」「all」そして「digits 整数」も使えるようです。

W3C の現在の仕様を実装しているのは、Chrome（48以降）、Edge（15以降）、Firefox（48以降）、Android標準ブラウザ、Android Chrome、Edge Mobile。（いずれも「digits 整数」は使えないようです）
iOS Safari は未対応だそうです（古い仕様も今の仕様も）

text-combine-uprightプロパティの指定サンプル

text-combine-uprightプロパティの値のうち、まずは「all」を使ってみます。

下は、Firefox（Mac）でのプレビューです。
1文字の回転（mとか数字1文字とか）は全体に「text-orientation: upright」を指定しています。

text-combine-upright: all は、ほんっとに「all」でした。
数字5桁も、漢字もカナも、何でも縦中横にしています（読みやすいかどうかは別として）

サンプルのソースコードはこちら。

<div class="mihon">
<b>writing-mode: vertical-rl のみ<br>
（text-combine-upright: none 状態）</b>
50mを8秒で走る人の時速は、1時間は3600秒なので、3600÷8×50＝22500m。<br>
キロに直すと時速22.5km になります。<br>
数字以外の縦中横、W3Cとか、Wiki、ウィキとかもできるかな？</div>

<div class="mihon t-ori-up">
<b>writing-mode: vertical-rl;<br>
text-orientation: upright;<br>
text-combine-upright: all</b>
<span class="tcu-all">50</span>mを8秒で走る人の時速は、1時間は<span class="tcu-all">3600</span>
秒なので、<span class="tcu-all">3600</span>÷8×<span class="tcu-all">50</span>＝
<span class="tcu-all">22500</span>m。<br>
キロに直すと時速<span class="tcu-all">22.5</span><span class="tcu-all">km</span> になります。<br>
数字以外の<span class="tcu-all">縦中横</span>、<span class="tcu-all">W3C</span>とか、
<span class="tcu-all">Wiki</span>、<span class="tcu-all">ウィキ</span>とかも
<span class="tcu-all">できる</span>かな？</div>

<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height:20rem;
	width:100%;
	-ms-writing-mode: tb-rl; /* for IE */
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	text-combine-upright: none
	}
.mihon b {
	display:block;
	color:#579961;
	text-orientation:mixed}
.t-ori-up {
	-webkit-text-orientation: upright;
	text-orientation: upright}
.tcu-all {
	-webkit-text-combine: horizontal; /*for Safari*/
	-ms-text-combine-horizontal: all; /*for IE*/
	text-combine-upright: all}
</style>

「digits 整数」も試してみます。これは「数字のみ」の縦中横。
整数を省略すると「2」、整数は「4」までということなので、両方やってみます。
実装しているブラウザは少ないですが、皆さんの環境ではどう見えるでしょうか。

サンプルのソースコードはこちら。

<div class="mihon">
<b>writing-mode: vertical-rl のみ<br>（縦中横なし）</b>
50mを8秒で走る人の時速は、1時間は3600秒なので、3600÷8×50＝22500m。<br>
キロに直すと時速22.5km になります。</div>

<div class="mihon tcu-digi">
<b>writing-mode: vertical-rl;<br>text-combine-upright: digits</b>（テキスト省略）</div>

<div class="mihon tcu-digi4">
<b>writing-mode: vertical-rl;<br>text-combine-upright: digits 4</b>（テキスト省略）</div>

<style>
/*追加したCSSだけ*/
.tcu-digi {
	-ms-text-combine-horizontal: digits; /*for IE, Edge*/
	text-combine-upright: digits}
.tcu-digi4 {
	-ms-text-combine-horizontal: digits 4; /*for IE, Edge*/
	text-combine-upright: digits 4}
</style>

次回予告

text-combine-uprightプロパティの「all」はPCブラウザなら使えそうですが、iOS Safari で実装されていないので、モバイルではまだ無理かな。

さて、次回で「ライティングモード」に関する記事は最後です。
次回は、縦書きモードで、「字下げ、下線、リスト、ルビ、上付き文字・下付き文字、表組み（table）」が、どんな表示になるか試してみます。

関連記事

• 【48-1】ライン装飾をしない対象を決める text-decoration-skip
• 【47-4】text-decorationショートハンドプロパティでまとめて指定
• 【47-3】テキストのライン装飾を波線にもできる text-decoration-style
• 【47-2】テキストのライン装飾の色を決める text-decoration-color
• 【47-1】テキストのライン装飾の種類を決める text-decoration-line
• 【46】テキストの方向性を操作する unicode-bidi と direction
• （ちょっとメモ）縦書きでの字下げ・下線・リストなどを試してみた
• 【45-3】縦書きで「縦中横」ができる text-combine-upright
• 【45-2】縦書きでの文字の向きを決める text-orientation
• 【45-1】日本語の縦書きもできちゃう writing-modeプロパティ
• 【44】タブ文字の幅を決める tab-sizeプロパティ
• 【43】テキストを大文字・小文字に変換する text-transform
• 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
• 【41】句読点などが行頭に来るかどうか決める line-break
• 【40】文字間の間隔を指定する letter-spacingプロパティ