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

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

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

Result

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: 29th September 2023

Support Us