Avatar of Geoff Graham
Geoff Graham on

AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.

The text-combine-upright CSS property combines characters into the space of one character. The spec calls this “horizontal-in-vertical” composition which is a nice way of describing the use case: situations where you may need some characters in a vertical writing mode to display horizontally on the same line.

span {
  text-combine-upright: all;

The technique of horizontal text within vertical text is a Japanese one called tate-chū-yoko. Here’s how that looks:

When working with a vertical left-to-right writing mode (writing-mode: vertical-rl;), like the left side of this illustration, the text-combine-upright property can take multiple characters and display them horizontally, essentially splitting the character space into equal parts according to how many characters are selected. In this example, the right side shows two characters sharing the same character space inside of a vertical writing mode.


text-combine-upright: none | all | [ digits <integer>? ]
  • Initial value: none
  • Applies to: non-replaced inline elements
  • Inherited: yes
  • Percentages: n/a
  • Computed value: specified keyword, plus integer if digits
  • Animation type: not animatable


text-combine-upright accepts the following values:

  • none: This is the initial value. No characters are displayed horizontally in a vertical writing mode.
  • all: All consecutive typographic characters in the vertical containing box are displayed horizontally on the same line, taking up the space of a single character in the vertical box.
  • digits <integer>?: All consecutive ASCII digits in the vertical containing box are displayed horizontally on the same line, taking up the space of a single character in the vertical box, up to the specified integer. If no integer is specific, then the default is 2 digits. Anything below 2 and above 4 are invalid.
/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;

/* Digits values */
text-combine-upright: digits; /* 2 digits */
text-combine-upright: digits 4; /* 4 digits */

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


Say we take the example that’s straight from the spec, which is a <date> element with a vertical writing mode.

date {
  writing-mode: vertical-lr;

OK, we want numbers in the date to display horizontally. It’s logical to assume that adding text-combine-upright directly on the element will do the trick:

date {
  text-combine-upright: digits 2; /* 👎 */
  writing-mode: vertical-lr;

Buuuuut, no so much. At the time of writing, we need to apply the property on the digits themselves for this to work. A span will do.

date {
  writing-mode: vertical-lr;

span {
  text-combine-upright: digits 2;

There we go!

Browser support

As we just saw in the example, browser support is a little scattered at the moment. While many browsers offer at least partial support for text-combine-upright, there is a lot less support for the digits value than there is for the all value.

Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
Source: caniuse
  1. Uses the non-standard name: -ms-text-combine-horizontal
  2. Recognizes the digits value behind the layout.css.text-combine-upright-digits.enabled experimental flag, but does not yet implement layout support for tate-chū-yoko
  3. Uses the non-standard name: -webkit-text-combine