text-combine-upright

Overview

The text-combine-upright property allows for the horizontal arrangement of characters in vertical writing modes. It's a useful tool in East Asian typography for creating an effect known as tate-chū-yoko (縦中横) in Japanese.

The property achieves this by enabling multiple characters to be treated as a single glyph, which can be particularly effective when rendering dates or other grouped information. Note that the property only applies in vertical writing modes.

When the combined text exceeds 1em in width, it is compressed to fit within 1em, preserving the vertical rhythm. The combined text is then treated as a single upright glyph in terms of layout and decoration.

Examples and Usage

Let's illustrate the text-combine-upright property by observing a practical example.

HTML Structure

<p lang="ja">
  <span class="number">2023</span>年
  <span class="number">5</span>月
  <span class="number">15</span>日
</p>

The snippet represents a date format (年 is year, 月 is month, and 日 is day) typically used in Japanese.

CSS Styling

/* Set the writing mode to vertical right-to-left and increase the font size for better visibility */
p {
  writing-mode: vertical-rl;
  font-size: 2em;
}

/* Apply the text-combine-upright property to the .number class */
.number {
  text-combine-upright: all;
}

In the CSS snippet, we first set the writing mode of the paragraph to vertical right-to-left and increase the font size for the sake of clarity. Then, we apply the text-combine-upright property with a value of all to the .number class, which contains the years, months, and days. As a result, all the consecutive typographic characters within the box are set to be horizontally combined in the vertical line of text, taking up the space of a single character.

In addition, text-combine-upright can also have a digits value, which controls the number of consecutive ASCII digits displayed horizontally. However, it's not as widely supported across browsers.

Values

The text-combine-upright property accepts the following values:

Associated Properties

• text-orientation
• writing-mode
• direction
• unicode-bidi
• vertical-align

Tips and Tricks

• The text-combine-upright property finds usage in typesetting for East Asian languages where vertical writing modes are often used.

• While using the all value, the glyphs of the combined text are processed similarly to the contents of an inline-block box with a horizontal writing mode and a line height of 1em.

• The baseline of the combined text is chosen such that the square is centered between the text-over and text-under baselines of its parent inline box. This happens before any baseline alignment shift (vertical-align).

• Bear in mind that the layout result may vary depending on the font in use, as not all fonts provide standardized glyphs for combined characters.

• text-combine-upright may affect the rendering of other text-related properties, so careful examination of specific behaviors is advised.

Browser Compatibility

Specific browser versions of Chrome (9-47), Safari (5.1-15.3), and Opera (15-34), use the non-standard name -webkit-text-combine, whereas Edge (12-14) and IE (11) use -ms-text-combine-horizontal which supports slightly different values. For more details, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: text-combine-upright

W3C's Editor's Draft of CSS Writing Modes Level 4: text-combine-upright