MDN wants to learn about developers like you:


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
Computed valuespecified keyword, plus integer if 'digits'
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar



There is no special processing.
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 Status Comment
CSS Writing Modes Module Level 3
The definition of 'text-combine-upright' in that specification.
Candidate Recommendation Initial definition
The definition of 'text-combine-upright' in that specification.
Unknown Add digits value

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit[1]
(Yes) 48.0 (48.0)[2] 11.0-ms[3] (Yes)-webkit[1]
digits No support ? No support[4] 11.0-ms[3] No support ?
Feature Android Android Webview Edge Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support 48.0 (Yes) 48.0 48.0 (48.0)[2] No support No support No support
digits ? ? ? No support[4] ? ? ? ?

[1] In WebKit and Blink the property was initially named -webkit-text-combine according to an old version(2011) of the CSS3 Writing Modes specification, supporting the values none and horizontal (without number).

[2] According to an old version(2013) of the CSS3 Writing Modes specification Gecko 26.0 (Firefox 26.0 / Thunderbird 26.0 / SeaMonkey 2.23) initially implemented this property as text-combine-horizontal,behind the preference layout.css.vertical-text.enabled, defaulting to false (see bug 875250). In Gecko 31.0 (Firefox 31.0 / Thunderbird 31.0 / SeaMonkey 2.28) it was renamed to text-combine-upright (see bug 997006. In Gecko 41.0 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38) a new preference layout.css.text-combine-upright.enabled was added, defaulting to false, though Gecko didn't implement layout support (tate-chu-yoko) for it until Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) (see bug 1097499), which also enables the property by default.

[3] In Internet Explorer the property is named -ms-text-combine-horizontal.

[4] Gecko supports this value since Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) behind the preference layout.css.text-combine-upright-digits.enabled and in previous versions via the preference layout.css.text-combine-upright.enabled, defaulting to false , though it doesn't implement layout support (tate-chu-yoko) for it yet (see bug 1258635).

See also

Document Tags and Contributors

 Last updated by: wbamberg,