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 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.
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
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support |
48
- 48
- Partial
- 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 .
- Uses the non-standard name:
-webkit-text-combine
|
15 |
48
- 48
- Before version 48, Firefox did not implement layout support for tate-chū-yoko.
- 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.
- 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.
- 26 — 31
Disabled
- 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.
|
11
- 11
- Uses the non-standard name:
-ms-text-combine-horizontal
|
Yes
- Yes
- Partial
- 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.
- Uses the non-standard name:
-webkit-text-combine
|
Partial
- Partial
- 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.
- Uses the non-standard name:
-webkit-text-combine
|
digits |
No |
? |
48 Disabled
- 48
Disabled
- 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.
|
Yes |
No |
? |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support |
48 |
48 |
Yes |
48
- 48
- Before version 48, Firefox did not implement layout support for tate-chū-yoko.
- 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.
- 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.
- 26 — 31
Disabled
- 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.
|
No |
No |
5.0 |
digits |
? |
? |
? |
48 Disabled
- 48
Disabled
- 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.
|
? |
? |
No |
See also