CSS text-combine-upright Property

The text-combine-upright property specifies the combination of characters into the space of a single character.

If the combined text is wider than 1em, the user agent should fit the contents within 1em.

INFO

The text-combine-upright property only has an effect in vertical writing modes.

Initial Value	none
Applies to	Non-replaced inline elements.
Inherited	Yes.
Animatable	No.
Version	CSS Writing Modes Module Level 3
DOM Syntax	object.style.textCombineUpright = "all";

Syntax

CSS text-combine-upright syntax

css

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

Example of the text-combine-upright property:

CSS text-combine-upright code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        writing-mode: vertical-lr;
        text-combine-upright: digits 2;
        font: 32px "Roboto", Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Text-combine-upright property example</h2>
    <p lang="ja" class="example">
      平成18年6月22日に
    </p>
  </body>
</html>

Try it Yourself »

Result

CSS text-combine-upright property

Values

Value	Description
none	No special processing.
all	Arranges horizontally all consecutive typographic character units within the box such that they take up the space of a single typographic character unit within the vertical line box.
digits `<integer>`?	Displays 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.

Practice

What does the CSS 'text-combine-upright' property do?

It allows text to be combined in a space that is otherwise too narrow.It shifts the text from left to right.It is used to control characters that are upright.It increases the font size of the text.

CSS text-combine-upright Property ​

Syntax ​

Example of the text-combine-upright property: ​

Result ​