Widely available Supported across all major browsers. Safe to use in production.

text-combine-upright

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.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-combine-upright
48
79
48
15.4
48
15.4
all
48
79
48
15.4
48
15.4
none
48
79
48
15.4
48
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: -webkit-text-combine (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`.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Previously available under a different name: -ms-text-combine-horizontal (12)
Notes 1 item(s)
Implementation note
  • Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: -webkit-text-combine (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`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: -webkit-text-combine (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`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: -webkit-text-combine (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`.

Syntax

CSS 
.vertical-text {
  writing-mode: vertical-rl;
}
.tcy {
  text-combine-upright: all;
}

Live demo

verticalmiddlehorizontal(era)

CSS verticalmiddlehorizontal(era) demo.

PreviewFullscreen

verticalmiddlehorizontal(number)

CSS verticalmiddlehorizontal(number) demo.

PreviewFullscreen

verticalmiddlehorizontal none

CSS verticalmiddlehorizontal none demo.

PreviewFullscreen

Use cases

  • Using text-combine-upright

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

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links