CSS text-combine-upright Property

Description

The CSS text-combine-upright property specifies the combination of multiple characters into the space of a single character. It is used to produce an effect that is known as tate-chū-yoko 縦中横 in Japanese, or as 橫向文字 in Chinese, which is a technique of displaying horizontal text within vertical text. The text-combine-upright property only has an effect in vertical writing modes, which can be set using the writing-mode property.

Initial value

none

Applies to

Non-replaced inline elements

Inherited

Yes

Computed value

Specified keyword

Animatable

No

JavaScript syntax

object.style.textCombineUpright

Interactive Demo

text-combine-upright: none;
writing-mode:vertical-rl;

text-combine-upright: all;
writing-mode:vertical-rl;

Syntax

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

Values

• noneThere is no special processing.
• allAttempts 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.

Example

<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;
}

Browser Support

The following table will show you the current browser support for the CSS text-combine-upright property.

Desktop
79	48	48	35	15.4

Tablets / Mobile
48	48	35	15.4	5	48

Last updated by CSSPortal on: 2nd January 2024