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

text-combine-upright

The text-combine-upright CSS property displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism.

Typography

Overview

The text-combine-upright CSS property displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism.

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 displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features