text-combine-upright

The text-combine-upright CSS property specifies the combination of multiple 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;

Initial valuenone
Applies tonon-replaced inline elements
Inheritedyes
Mediavisual
Computed valuespecified keyword, plus integer if 'digits'
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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 syntax

none | all | [ digits <integer>? ]

Example (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.

<p lang="ja" class="exampleText">平成20年4月16日に</p>
.exampleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

ScreenshotLive sample

Example (all)

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

<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

Specification

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

Browser compatibility

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 48
Full support 48
Partial support Partial
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 15Firefox 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 — ?
Disabled
Disabled 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.
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 Yes
Full support Yes
Partial support Partial
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 Partial
Notes Alternate Name
Partial support Partial
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 48Chrome Android Full support 48Edge Mobile Full support YesFirefox 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 — ?
Disabled
Disabled 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.
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 No support NoSafari iOS No support NoSamsung Internet Android Full support 5.0
digitsChrome No support NoEdge ? 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 YesOpera No support NoSafari ? WebView Android ? Chrome Android ? Edge Mobile ? 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 ? Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
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

Document Tags and Contributors

Last updated by: fscholz,