これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
text-combine-upright CSS プロパティは、一文字分の空間に挿入する複数文字の組み合わせを指定します。組み合わせたテキストが 1em 幅より広い場合、ユーザエージェントはコンテンツを 1em 幅に収めなければなりません。構成後の表示は、グリフ一文字の高さにレイアウトおよび修飾されます。このプロパティは、縦書きモードでのみ効果があります。
これは、日本語の縦中横 (tate-chū-yoko)、中国語の 直書橫向 として知られる効果をもたらすために使用されます。
| 初期値 | none |
|---|---|
| 適用対象 | 非置換インライン要素 |
| 継承 | 継承する |
| メディア | visual |
| 計算値 | 指定されたキーワード、'digits' の場合は続けて整数 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
/* キーワード値 */ text-combine-upright: none; text-combine-upright: all; /* Digits 値 */ text-combine-upright: digits; /* 2 桁の数字を垂直テキスト内に水平に収めます */ text-combine-upright: digits 4; /* 4 桁までの数字を垂直テキスト内に水平に収めます */ /* グローバル値 */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset;
値
none- 何も特別な処理をしません。
all- タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。
digits <integer>?- 指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ～ 4 までの範囲外の整数値は不正です。
正式の構文
none | all | [ digits <integer>? ]
例 (digits)
digits 値は、数字の桁だけを組み合わせる場合に使用し、all 値よりも必要なマークアップが少なくてすみます。現在、これをサポートしているブラウザはあまりありません。
<p lang="ja" class="exampleText">平成20年4月16日に</p>
.exampleText {
writing-mode: vertical-lr;
text-combine-upright: digits 2;
font: 36px serif;
}
| Screenshot | Live sample |
|---|---|
 |
例 (all)
all 値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザでサポートされています。
<p lang="zh-Hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p>
html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }
| Screenshot | Live sample |
|---|---|
 |
仕様
| 仕様書 | 状況 | コメント |
|---|---|---|
| CSS Writing Modes Module Level 3 text-combine-upright の定義 |
勧告候補 | Initial definition |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | (有)-webkit[1] 48.0 |
48.0 (48.0)[2] | 11.0-ms[3] | (有)-webkit[1] (有) |
(有)-webkit[1] |
digits |
未サポート | 未サポート[4] | 11.0-ms[3] | 未サポート | ? |
| 機能 | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| 基本サポート | 未サポート | 48.0 | 48.0 | 48.0 (48.0)[2] | 未サポート | 未サポート | 未サポート |
digits |
? | ? | 未サポート[4] | ? | ? | ? | ? |
[1] WebKit および Blink では、このプロパティの当初の名前は、CSS3 Writing Modes 仕様の古いバージョン (2011) に従って -webkit-text-combine であり、none と horizontal (数字を除く) をサポートしていました。
[2] Gecko 26.0 (Firefox 26.0 / Thunderbird 26.0 / SeaMonkey 2.23) では、CSS3 Writing Modes 仕様の古いバージョン (2013) に従って、当初、このプロパティは text-combine-horizontal として、layout.css.vertical-text.enabled 設定の既定値が false に設定された上で隠し実装されていました (バグ 875250 参照)。Gecko 41.0 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38) では、新しい設定の layout.css.text-combine-upright.enabled が追加され、その既定値は false でした。そのため Gecko は、このプロパティが既定で有効になる Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) までレイアウトサポート (縦中横) を実装していませんでした (バグ 1097499 参照)。
[3] Internet Explorer では、このプロパティの名前は -ms-text-combine-horizontal です。
[4] Gecko はこの値を Gecko 48.0 (geckoRelease("48.0")}} からサポートし、layout.css.text-combine-upright-digits.enabled 設定により切り替えられます。これより前のバージョンでは、layout.css.text-combine-upright.enabled 設定であり、既定値は false です。そのため、47.0 以前のバージョンでは、レイアウトサポート (縦中横) がまだ実装されていません(バグ 1258635 参照)。