`text-combine-upright` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since March 2022.

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.

Try it

text-combine-upright: none;

text-combine-upright: all;

<section class="default-example" id="default-example">
  <div>
    <p>
      <span class="transition-all" id="example-element"
        >2022<span>年</span>12<span>月</span>8</span
      >日から楽しい
    </p>
  </div>
</section>

p {
  writing-mode: vertical-rl;
}

Syntax

/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;

/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;

Values

This property is specified as one of the following keyword 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.

Note: The CSS writing modes module defines a digits <integer> value for the text-combine-upright property to display two to four consecutive ASCII digits (U+0030–U+0039) such that it takes up the space of a single character within the vertical line box, however, this is not supported in any browsers.

Formal definition

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

Formal syntax

text-combine-upright = 
  none |
  all |
  [ digits <integer>? ]

<integer> = 
  <number-token>

Examples

Using 'all' with horizontal text

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

Specifications

Specification
CSS Writing Modes Level 4 # text-combine-upright

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`text-combine-upright`	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`.	79 12–79	48 Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81.	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`.	15.4 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`.	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`.	48 Before version 81, Firefox for Android implemented the property as animatable. This was corrected to spec in 81.	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`.	15.4 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`.	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`.	48 4.4 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`.	15.4 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`.
`all`	48	79	48	35	15.4	48	48	35	15.4	5.0	48	15.4
`none`	48	79	48	35	15.4	48	48	35	15.4	5.0	48	15.4