We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

text-combine-upright

text-combine-upright CSS プロパティは、一文字分の空間に挿入する複数文字の組み合わせを指定します。組み合わせたテキストが 1em 幅より広い場合、ユーザエージェントはコンテンツを 1em 幅に収めなければなりません。構成後の表示は、グリフ一文字の高さにレイアウトおよび修飾されます。このプロパティは、縦書きモードでのみ効果があります。

これは、日本語の縦中横 (tate-chū-yoko)、中国語の 直書橫向 として知られる効果をもたらすために使用されます。

/* キーワード値 */
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
適用対象非置換インライン要素
継承継承する
メディアvisual
計算値指定されたキーワード、'digits' の場合は続けて整数
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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 の定義
勧告候補 最初の定義
CSS Writing Modes Level 4
text-combine-upright の定義
草案 digits 値の追加

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

48

あり1 2

15

483

414

31 —?5

26 — 316 7

118

あり

あり2 9

あり2 9
digits なし ?4810 11 あり なし ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4848 あり

483

414

31 —?5

26 — 316 7

なし なし5.0
digits ? ? ?4810 11 ? ? なし

1. This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.

2. Supported as -webkit-text-combine.

3. Before version 48, Firefox did not implement layout support for tate-chū-yoko.

4. From version 41: this feature is behind the layout.css.text-combine-upright.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

5. From version 31: this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

6. From version 26 until version 31 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. Supported as text-combine-horizontal.

8. Supported as -ms-text-combine-horizontal.

9. This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.

10. Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635).

11. From version 48: this feature is behind the layout.css.text-combine-upright-digits.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

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

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