πŸ€„ CSS text-combine-upright β€” Complete Tutorial

The CSS text-combine-upright property is used in **vertical writing modes** to combine multiple characters into a **single upright glyph box**. This is especially important for East Asian typography (Japanese, Chinese), where numbers or short words need to stay upright inside vertical text.

>>β€œtext-combine-upright preserves readability by keeping small sequences upright in vertical writing.”

Note

βœ” Works only in vertical writing modes
βœ” Ideal for numbers (like dates, years, abbreviations)
βœ” Supports combinations up to 4 characters

πŸ“¦ Syntax

Syntax

text-combine-upright: none | all | <number>;

/* Examples */
text-combine-upright: none;   /* default */
text-combine-upright: all;    /* combine entire text */
text-combine-upright: 2;      /* combine up to 2 characters */
ValueDescription
noneNo combination (default)
allCombine all characters in the content
1–4Combine up to N characters into one upright box

🎨 1. Basic Usage

Basic

.vertical {
  writing-mode: vertical-rl;
}

.year {
  text-combine-upright: 4;
}

In vertical writing, the digits "2025" appear **upright** as a single combined unit.

🎨 2. Using `all` to Combine Entire Content

all

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

Forces the browser to keep **all characters upright**, regardless of length.

🎨 3. Combining Only 2 Characters

2-character

.jp-date {
  writing-mode: vertical-rl;
  text-combine-upright: 2;
}

Ideal for short units like "年号", "km", "cm", or "5月".

🎨 4. Without Combining (Default)

none

.normal {
  writing-mode: vertical-rl;
  text-combine-upright: none;
}

Characters remain stacked vertically instead of forming a single block.

🎨 5. Example: Japanese Vertical Date Layout

date layout

.vertical {
  writing-mode: vertical-rl;
}

.date {
  text-combine-upright: 2;
}

"12月" or "28ζ—₯" appears neatly upright instead of rotating each character.

πŸ§ͺ Real-World Use Cases

1️⃣ Vertical Japanese Books or Articles

vertical book

.book {
  writing-mode: vertical-rl;
}

.book span {
  text-combine-upright: 4; /* years, page numbers */
}

2️⃣ Vertical UI Labels

ui

.sidebar-label {
  writing-mode: vertical-rl;
  text-combine-upright: all;
}

3️⃣ Vertical Scientific Notation (Units)

units

.unit {
  writing-mode: vertical-rl;
  text-combine-upright: 2;
}

Good for inline measurements like β€œ25kg” or β€œ30cm” in vertical layouts.

⚠️ Important Notes

  • ⚠️ Works only when writing-mode is vertical
  • ⚠️ Combining more than 4 characters may not work depending on browser
  • ⚠️ Not widely used outside East Asian typography
  • ⚠️ Does NOT rotateβ€”keeps content upright

Note

writing-mode: vertical-rl or vertical-lr is required for this property to have any effect.

πŸ”₯ Summary

text-combine-upright is essential for vertical-writing typography. It ensures small sequences like numbers, units, and abbreviations remain upright, improving readability and preserving typographic tradition.

  • none β†’ no combination
  • 1–4 β†’ combine up to N characters
  • all β†’ combine everything upright
  • Requires vertical writing mode
>>β€œVertical typography is an art β€” text-combine-upright makes it precise and elegant.”