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 value | none |
---|---|
Applies to | non-replaced inline elements |
Inherited | yes |
Media | visual |
Computed value | specified keyword, plus integer if 'digits' |
Animation type | discrete |
Canonical order | the 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; }
Screenshot | Live 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 }
Screenshot | Live 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. |
Editor's Draft | Add digits value |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 48 | Yes | 483 414 31 —?5 | 118 | Yes | Yes2 9 |
digits | No | ? | 4810 11 | Yes | No | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 48 | 48 | Yes | 483 414 31 —?5 | No | No | No |
digits | ? | ? | ? | 4810 11 | ? | ? | ? |
1. 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
.
2. Supported as -webkit-text-combine
.
3. Before version 48, Firefox did not implement layout support for tate-chū-yoko.
4. 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.
5. 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.
6. 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.
7. Supported as text-combine-horizontal
.
8. Supported as -ms-text-combine-horizontal
.
9. 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.
10. Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635).
11. 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.