Web/CSS/text-combine-upright

The text-combine-upright CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.

This is used to produce an effect that is known as tate-chū-yoko (縦中横) in Japanese, or as 直書橫向 in Chinese.

/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;

/* Digits values */
text-combine-upright: digits;     /* fits 2 consecutive digits horizontally inside vertical text */
text-combine-upright: digits 4;   /* fits up to 4 consecutive digits horizontally inside vertical text */

/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: unset;

Syntax

Values

none: There is no special processing.
all: Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.
digits <integer>?: Attempts to display a sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid.

Formal definition

Initial value	`none`
Applies to	non-replaced inline elements
Inherited	yes
Computed value	specified keyword, plus integer if 'digits'
Animation type	discrete

Formal syntax

none | all | [ digits <integer>? ]

Examples

Digits

The digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by browsers.

HTML

<p lang="ja" class="exampleText">平成20年4月16日に</p>

CSS

.exampleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

Results

Screenshot	Live sample
[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2015/12/14/12127/ba14e0081d73fef81bef079747b5f891/tate-chu-yoko.png\|class=internal]]

All

The all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.

HTML

<p lang="zh-Hant">民國<span class="num">105</span
>年<span class="num">4</span
>月<span class="num">29</span>日</p>

CSS

html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }

Results

Screenshot	Live sample
[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2016/04/29/13096/5c05849fba8b035a785ee894078f23e4/text-combine-upright-all.png\|class=internal]]

Specifications

Specification	Status	Comment
CSS Writing Modes Level 4The definition of 'text-combine-upright' in that specification.	Candidate Recommendation	Add `digits` value
CSS Writing Modes Module Level 3The definition of 'text-combine-upright' in that specification.	Proposed Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`text-combine-upright`	Chrome Full support 48 Full support 48 Partial support 9 Notes' Alternate Name' Notes' 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`. Alternate Name' Uses the non-standard name: `-webkit-text-combine`	Edge Full support 12 Alternate Name' Full support 12 Alternate Name' Alternate Name' Uses the non-standard name: `-ms-text-combine-horizontal`	Firefox Full support 81 Notes' Full support 81 Notes' Notes' Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81. Full support 48 Notes' Notes' Before version 48, Firefox did not implement layout support for tate-chū-yoko. Full support 41 Disabled' Disabled' 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. No support 31 — 41 Disabled' Disabled' From version 31 until version 41 (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. No support 26 — 31 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: `text-combine-horizontal` Disabled' 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 Full support 11 Alternate Name' Full support 11 Alternate Name' Alternate Name' Uses the non-standard name: `-ms-text-combine-horizontal`	Opera Full support 35 Full support 35 Partial support 15 Notes' Alternate Name' Notes' 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`. Alternate Name' Uses the non-standard name: `-webkit-text-combine`	Safari Partial support 5.1 Notes' Alternate Name' Partial support 5.1 Notes' Alternate Name' Notes' 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`. Alternate Name' Uses the non-standard name: `-webkit-text-combine`	WebView Android Full support 48 Full support 48 Partial support ≤37 Notes' Alternate Name' Notes' 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`. Alternate Name' Uses the non-standard name: `-webkit-text-combine`	Chrome Android Full support 48 Full support 48 Partial support 18 Notes' Alternate Name' Notes' 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`. Alternate Name' Uses the non-standard name: `-webkit-text-combine`	Firefox Android Full support 81 Notes' Full support 81 Notes' Notes' Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81. Full support 48 Notes' Notes' Before version 48, Firefox did not implement layout support for tate-chū-yoko. Full support 41 Disabled' Disabled' 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. No support 31 — 41 Disabled' Disabled' From version 31 until version 41 (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. No support 26 — 31 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: `text-combine-horizontal` Disabled' 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 Full support 35 Full support 35 Partial support 14 Notes' Alternate Name' Notes' 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`. Alternate Name' Uses the non-standard name: `-webkit-text-combine`	Safari iOS Partial support 5 Notes' Alternate Name' Partial support 5 Notes' Alternate Name' Notes' 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`. Alternate Name' Uses the non-standard name: `-webkit-text-combine`	Samsung Internet Android Full support 5.0 Full support 5.0 Partial support 1.0 Notes' Alternate Name' Notes' 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`. Alternate Name' Uses the non-standard name: `-webkit-text-combine`
`digits`	Chrome No support No	Edge No support 12 — 79	Firefox Full support 48 Notes' Disabled' Full support 48 Notes' Disabled' Notes' Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635). Disabled' 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 Full support 11	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 48 Notes' Disabled' Full support 48 Notes' Disabled' Notes' Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635). Disabled' 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 No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
Partial support: Partial support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Uses a non-standard name.': Uses a non-standard name.

Web/CSS/text-combine-upright

Contents

Syntax

Values

Formal definition

Formal syntax

Examples

Digits

HTML

CSS

Results

All

HTML

CSS

Results

Specifications

Browser compatibility

Legend

See also