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 valuenone
Applies tonon-replaced inline elements
Inheritedyes
Computed valuespecified keyword, plus integer if 'digits'
Animation typediscrete

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

ScreenshotLive sample

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

ScreenshotLive sample

Specifications

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

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-combine-uprightChrome 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 48
Notes
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 48
Notes
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
digitsChrome No support NoEdge No support 12 — 79Firefox 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 11Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox 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 NoSafari iOS No support NoSamsung 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.

See also