This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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 |
Unknown 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] 48.0 |
(Yes) | 48.0 (48.0)[2] | 11.0-ms[3] | (Yes)-webkit[1] (Yes) |
(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).