【45-3】縦書きで「縦中横」ができる text-combine-upright

最終更新日:2018年12月26日  (初回投稿日:2018年12月26日)

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」を使ってみます。

writing-mode: vertical-rl のみ
(text-combine-upright: none 状態)
50mを8秒で走る人の時速は、1時間は3600秒なので、3600÷8×50=22500m。
キロに直すと時速22.5km になります。
数字以外の縦中横、W3Cとか、Wiki、ウィキとかもできるかな?
writing-mode: vertical-rl;
text-orientation: upright;
text-combine-upright: all
50mを8秒で走る人の時速は、1時間は3600 秒なので、3600÷8×5022500m。
キロに直すと時速22.5km になります。
数字以外の縦中横W3Cとか、 Wikiウィキとかも できるかな?

下は、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」までということなので、両方やってみます。
実装しているブラウザは少ないですが、皆さんの環境ではどう見えるでしょうか。

writing-mode: vertical-rl のみ
(縦中横なし)
50mを8秒で走る人の時速は、1時間は3600秒なので、3600÷8×50=22500m。
キロに直すと時速22.5km になります。
writing-mode: vertical-rl;
text-combine-upright: digits
50mを8秒で走る人の時速は、1時間は3600秒なので、3600÷8×50=22500m。
キロに直すと時速22.5km になります。
writing-mode: vertical-rl;
text-combine-upright: digits 4
50mを8秒で走る人の時速は、1時間は3600秒なので、3600÷8×50=22500m。
キロに直すと時速22.5km になります。

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

<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)」が、どんな表示になるか試してみます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2019/03 | 04
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.