v132 · css

Sideways writing modes

Support of `sideways-rl` and `sideways-lr` keywords for `writing-mode` CSS property is added. They are vertical writing modes, and all letters are sideways.

concepts

  1. Sideways Writing Modes

    writing-mode: sideways-lr / sideways-rl finally ship in Chrome. Vertical text without the historical orientation quirks of vertical-lr.

  2. book spines + chart axis

    The two canonical use cases the spec was written for: bookshelf spines and infographic axis labels.

  3. Vertical Timeline

    Toggle between all five writing modes on the same timeline. Sideways-rl and sideways-lr keep Latin characters upright — vertical-rl doesn’t. The difference is instantly visible.

  4. live typography

    Type any string; five frames render it in all five writing-modes side-by-side with the matching CSS. Great for sanity-checking which mode you want.

  5. Compact comparison table

    A 12-column feature matrix where every column header uses writing-mode: sideways-rl. Vertical headers shrink each column from ~7rem to ~2.8rem — fitting 4× more columns. Toggle between sideways-rl, vertical-rl, and horizontal to see the legibility and space difference.

why it shipped

`sideways-rl` and `sideways-lr` are helpful to write non-CJK text vertically. They don't have behaviors favorable for CJK languages unlike `vertical-rl` and `vertical-lr`.

references