CSS Vertical Text

Features

• `writing-mode` for vertical text, with columns right to left or left to right
• `text-orientation` decides whether digits and Latin letters lie down or stand up
• Font size, column gap and container height are all adjustable, with the preview following along
• The height decides where columns wrap — the item most often forgotten
• The column gap is a choice of six fixed ratios, so you do not have to guess whether 1.8 or 2 looks better
• The output is one CSS rule with the selector `.vertical-text`
• The preview updates live; copy when it looks right
• Everything runs locally in your browser; your text is not uploaded

How to use

1. Type a few characters into the input above
2. Choose the column direction and how digits should sit
3. Adjust the font size and height to see where columns wrap and how many fit
4. Copy the CSS when you are happy with it

FAQ

Why does my text run downwards and never wrap?

Because no height has been set. In vertical text the column breaks when the container height runs out — with `height: auto`, or a parent that has no height of its own, the column never runs out and the text grows downwards forever. The Container height control exists for exactly this, and setting it makes the text fold into several columns. The same is true in a real project: a vertical container needs a definite height, otherwise the rule you paste will still produce one endless line.

My digits lie sideways. Can they stand up instead?

Yes — switch Digits and Latin letters to upright (`text-orientation: upright`). Each has its place: lying down (`mixed`) reads more smoothly, because digits and English words are laid out horizontally to begin with and `2026-09-27` is instantly recognisable on its side; upright is tidier, every character filling its cell, which suits numbering and plaque-style setting. The usual choice for vertical Chinese is lying down.

Why is the output a piece of CSS rather than HTML?

Because vertical setting is a styling problem, not a structural one. You can fake it by breaking every character with a `<br>`, but that shatters the text: copying it out gives one character per line, and search and screen readers break with it. `writing-mode` lets the browser handle direction at render time, so the text stays whole — copyable, searchable and readable by assistive technology.