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
適用対象非置換インライン要素
継承あり
メディア視覚
計算値指定されたキーワード、'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 値の追加

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 48
完全対応 48
部分対応 一部
補足 代替名
補足 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.
代替名 非標準の名前 -webkit-text-combine を使用しています。
Edge 完全対応 15Firefox 完全対応 48
補足
完全対応 48
補足
補足 Before version 48, Firefox did not implement layout support for tate-chū-yoko.
完全対応 41
無効
無効 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.
未対応 31 — ?
無効
無効 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.
未対応 26 — 31
代替名 無効
代替名 非標準の名前 text-combine-horizontal を使用しています。
無効 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.
IE 完全対応 11
代替名
完全対応 11
代替名
代替名 非標準の名前 -ms-text-combine-horizontal を使用しています。
Opera 完全対応 あり
完全対応 あり
部分対応 一部
補足 代替名
補足 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.
代替名 非標準の名前 -webkit-text-combine を使用しています。
Safari 部分対応 一部
補足 代替名
部分対応 一部
補足 代替名
補足 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.
代替名 非標準の名前 -webkit-text-combine を使用しています。
WebView Android 完全対応 48Chrome Android 完全対応 48Edge Mobile 完全対応 ありFirefox Android 完全対応 48
補足
完全対応 48
補足
補足 Before version 48, Firefox did not implement layout support for tate-chū-yoko.
完全対応 41
無効
無効 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.
未対応 31 — ?
無効
無効 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.
未対応 26 — 31
代替名 無効
代替名 非標準の名前 text-combine-horizontal を使用しています。
無効 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.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
digitsChrome 未対応 なしEdge ? Firefox 完全対応 48
補足 無効
完全対応 48
補足 無効
補足 Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635).
無効 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.
IE 完全対応 ありOpera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 48
補足 無効
完全対応 48
補足 無効
補足 Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635).
無効 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.
Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報

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

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