CSS writing-mode generator — vertical text for CJK layouts and side labels

How to use the CSS writing mode generator

1. Pick a writing-mode: horizontal-tb, vertical-rl, vertical-lr, sideways-rl or sideways-lr.
2. Choose a text-orientation: mixed, upright or sideways.
3. Tick Combine digits upright (text-combine-upright) if short numbers should sit across the line.
4. Edit the Text to try your own words; the sample mixes Japanese, English and a year.
5. Copy the .vertical rule, plus the .tcy rule if you ticked the option.

What it does and when to use it

writing-mode sets the direction in which lines of text run and stack. It is essential for vertical Japanese, Chinese or Korean layouts such as book pages, menus and posters. It is also handy in ordinary Latin designs: a vertical label along the edge of a card, a rotated column heading in a narrow table, or a magazine-style side caption, without the overlap problems of a CSS rotation.

For tilted text at angles other than 90°, use the CSS transform generator. To style the letters themselves, see the typography styler, and for decorative vertical headings, add an outline with the text stroke generator.

How it works

The rule always sets writing-mode. It adds text-orientation only when you pick something other than mixed, the default. With the combine option, it adds .vertical .tcy { text-combine-upright: all; }, and the preview wraps every run of one or two digits in such a span.

MDN lists writing-mode as Baseline widely available since March 2017, text-orientation since September 2020 and text-combine-upright since March 2022. That status covers the properties in general; individual values, such as the sideways modes or digits, have their own rows in MDN’s compatibility tables.

Worked examples

Classic vertical Japanese. The default, vertical-rl with mixed orientation: writing-mode: vertical-rl;. Kanji stand upright; the English words lie on their side.

Every character upright, with combined digits. vertical-rl, upright, combine ticked:

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

Wrap each number you want combined in <span class="tcy">; all squeezes the whole span into one character cell, so keep it to one or two digits.

A bottom-to-top spine label. sideways-lr gives writing-mode: sideways-lr; and the note “sideways-rl and sideways-lr have limited browser support (Firefox, and Chrome/Safari only in recent versions).”

Limits and tips

• Width and height swap meaning. In vertical modes, the line length follows the height, so set a height or max-height on the element.
• Punctuation and quotes may need a font with vertical forms to look right in CJK text.