MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

text-combine-upright

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

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;
}

ScreenshotLive 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 }

ScreenshotLive 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 であり、nonehorizontal (数字を除く) をサポートしていました。

[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 参照)。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Marsf
 最終更新者: Marsf,