Four writing modes
Switch between horizontal-tb, vertical-rl, vertical-lr and sideways-rl on your own sample text.
CSS Writing Mode Previewer
Test horizontal and vertical writing-mode, direction and text-orientation combinations live on your own text, then copy the CSS.
Ready-to-use CSS
See vertical text before you ship it
Writing-mode combinations are hard to picture from documentation alone — preview them live instead.
Direction and orientation
Combine direction and text-orientation to see exactly how glyphs rotate and lines stack together.
Sized for vertical text
The preview frame is tall enough that vertical layouts are clearly visible, not cramped into a thin strip.
How to use the writing mode previewer
- Add your textEdit the sample paragraph or paste your own copy into the text box.
- Pick a writing modeChoose horizontal-tb or one of the vertical modes to see the layout flip.
- Fine-tune and copyAdjust direction, text-orientation and size, then copy the finished CSS.
About CSS writing-mode
The CSS writing-mode property controls the flow direction of block-level content: horizontal-tb, the default, stacks lines top to bottom with each line running left to right (or right to left under direction: rtl), while vertical-rl and vertical-lr rotate the whole flow ninety degrees, stacking new lines vertically — from right to left or left to right respectively — while individual lines of text run top to bottom. This is essential for authoring traditional vertical scripts like Japanese and Mongolian, but it is just as often used purely for design, producing vertical sidebar labels, magazine-style pull quotes and distinctive headings. The text-orientation property only applies inside a vertical writing mode and decides how individual glyphs are rotated within that vertical flow: mixed, the default, keeps horizontal-script characters upright while rotating vertical-script characters naturally; upright forces every character, including Latin letters, to stay upright and stack top to bottom; and sideways rotates every character ninety degrees so a line of Latin text reads like a sentence rotated onto its side. The direction property compounds with writing-mode rather than replacing it — on a vertical mode, direction: rtl changes which edge the vertical lines start stacking from, which matters for right-to-left vertical scripts.
mixed vs upright
Use upright for numerals and short vertical labels where you don't want any character sideways.
Pair with direction
direction changes which side vertical lines stack from — essential for right-to-left vertical scripts.
Give it room
Vertical writing modes need height, not width — size the container accordingly or content will scroll or clip.
Design, not just script
Vertical-rl is popular purely for stylistic sidebar labels and headings, even in left-to-right languages.
CSS writing mode previewer FAQ
What does the CSS writing-mode property do?
writing-mode sets whether text flows horizontally or vertically and which direction lines stack, letting you build vertical scripts, side labels and stylistic vertical typography.
What is the difference between vertical-rl and vertical-lr?
Both stack lines vertically, but vertical-rl stacks new lines from right to left, while vertical-lr stacks them from left to right; the text within each line still flows top to bottom.
What does text-orientation control?
In a vertical writing mode, text-orientation controls how individual characters are rotated: mixed keeps horizontal-script glyphs upright while rotating others, upright keeps every glyph upright, and sideways rotates all glyphs 90 degrees.
When would I use direction: rtl?
Use direction: rtl for right-to-left scripts like Arabic or Hebrew, or combined with a vertical writing-mode to flip which side vertical lines stack from.
Is this writing-mode previewer free to use?
Yes. It's completely free, needs no signup, and everything runs locally in your browser.
Try other CSS design tools
Keep building polished interfaces with these free online CSS generators.