W3cubDocs

/CSS

text-combine-upright

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

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 definition

Initial value none
Applies to non-replaced inline elements
Inherited yes
Computed value specified keyword, plus integer if 'digits'
Animation type discrete

Formal syntax

none | all | [ digits <integer>? ]

Examples

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.

HTML

<p lang="ja" class="exampleText">平成20年4月16日に</p>

CSS

.exampleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

Results

Screenshot Live sample

All

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

HTML

<p lang="zh-Hant">民國<span class="num">105</span
>年<span class="num">4</span
>月<span class="num">29</span>日</p>

CSS

html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }

Results

Screenshot Live sample

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
text-combine-upright 48
48
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.
Uses the non-standard name: -webkit-text-combine
12
12
Uses the non-standard name: -ms-text-combine-horizontal
81
81
Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81.
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 — 41
Disabled
Disabled From version 31 until version 41 (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.
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
35
35
15
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
5.1
5.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.
Uses the non-standard name: -webkit-text-combine
digits No 12 — 79 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.
11 No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
text-combine-upright 48
48
≤37
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
48
48
18
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
81
81
Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81.
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 — 41
Disabled
Disabled From version 31 until version 41 (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.
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.
35
35
14
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
5
5
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
5.0
5.0
1.0
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 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.
No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright