// visualize writing-mode · direction · text-orientation live
Preview CSS writing-mode, direction, and text-orientation live. Visualize how vertical, horizontal, and RTL text layouts render across different CSS modes instantly.
Text flows left-to-right, blocks stack top-to-bottom.
Click any writing-mode value to instantly see how your text orientation changes in the live preview.
Toggle between ltr/rtl and mixed/upright/sideways to fine-tune rendering, especially for CJK or Arabic text.
Click "Copy" to grab the ready-to-use CSS snippet for your project.
The CSS writing-mode property controls whether text flows horizontally or vertically, and the direction of block progression. Combined with direction and text-orientation, it enables full internationalization support for vertical CJK scripts and right-to-left languages.
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress. Values include horizontal-tb (default), vertical-rl, vertical-lr, sideways-rl, and sideways-lr.
vertical-rl flows text from right to left (blocks stack right-to-left), while vertical-lr flows blocks from left to right. Both write characters vertically, top-to-bottom. Japanese vertical text traditionally uses vertical-rl.
With text-orientation: mixed (default), CJK characters are displayed upright while Latin characters are rotated 90°. With upright, all characters including Latin are displayed upright. With sideways, all characters are rotated, as in horizontal writing.
The direction CSS property sets the base text direction to left-to-right (ltr) or right-to-left (rtl). It affects how inline content flows within a line and the order of columns in a table. It pairs with writing-mode for full i18n control.
sideways-rl lays out content vertically, with all characters—including Latin—rotated 90° clockwise. sideways-lr rotates content counterclockwise. These are useful for decorative rotated text or sidebar labels where you want consistent character rotation.
Yes! When you change writing-mode, logical properties like margin-inline-start, padding-block, and border-inline-end automatically adapt to the new writing direction—making them essential for internationalized layouts.
CSS writing-mode is one of the most powerful yet underutilized properties in the CSS specification. It controls the fundamental flow of text and block elements on a page — whether content runs horizontally from left to right (as in English), vertically from top to bottom (as in traditional Japanese or Chinese), or in any other direction supported by international writing systems.
Understanding writing-mode is essential for developers building multilingual websites, internationalized applications, or creative typographic layouts. This CSS Writing Mode Previewer lets you see the effect of every value instantly, without writing a single line of code yourself.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and design assets — worth checking out for your next internationalized project.
The writing-mode property accepts five values, each producing a distinct text layout:
vertical-rl, but columns stack from left to right. This is less common but used in some Mongolian writing systems and certain design contexts where vertical text flows left-to-right across the page.vertical-rl, Latin characters are not rotated individually — the whole line rotates together. Useful for decorative rotated headings.The direction CSS property complements writing-mode by controlling inline text direction within a line. ltr (left-to-right) is the default for Western scripts, while rtl (right-to-left) is essential for Arabic, Hebrew, Persian, and Urdu text.
When combined with writing-mode: horizontal-tb, direction: rtl makes the entire page layout mirror-image — the first line of a paragraph starts on the right, navigation items align to the right, and flex containers reverse their default order. This is the foundation of proper RTL web design.
When using a vertical writing mode, the text-orientation property controls how individual characters are displayed:
A key concept for understanding writing modes is the difference between the inline axis and the block axis. In horizontal-tb (default), the inline axis runs horizontally (left-right) and the block axis runs vertically (top-bottom). When you switch to vertical-rl, these axes swap: the inline axis now runs vertically and the block axis runs horizontally.
This is why CSS logical properties exist. Instead of margin-left and margin-right, you can write margin-inline-start and margin-inline-end. These automatically adapt to whichever writing mode is active, making your CSS truly direction-agnostic.
Writing modes aren't just for international typography — they enable many creative and practical design patterns:
writing-mode: vertical-rl on text blocks to create authentic CJK vertical text columns.writing-mode: vertical-rl to Y-axis labels in data visualizations for compact vertical text alongside charts.writing-mode: sideways-lr to create bottom-to-top vertical text, matching the convention of English book spines.direction: rtl at the root element for Arabic and Hebrew storefronts, automatically mirroring all layout, navigation, and form elements.A common mistake is using transform: rotate(90deg) to create vertical text instead of writing-mode. While both visually rotate text, they are fundamentally different. transform: rotate() is purely visual — the element still occupies its original space in the document flow, causing layout overlap. writing-mode, on the other hand, changes the actual document flow. The element's dimensions, margins, padding, and alignment all adapt to the new writing direction, producing correct, accessible layout behavior.
CSS writing-mode enjoys excellent modern browser support, with all major browsers supporting it. The core values (horizontal-tb, vertical-rl, vertical-lr) are well-supported even in older browsers. The newer sideways-rl and sideways-lr values have slightly less legacy support but work in all modern browsers from around 2017 onward. For production use, include feature queries (@supports) when targeting very old browsers.