Vertical Text Layout Generator

CSS writing-mode controls the direction in which text flows within a block. It's essential for vertical typesetting—especially for East Asian languages like Chinese, Japanese, and Korean (CJK)—where text traditionally flows top-to-bottom in columns. Beyond CJK, it enables creative layouts, narrow sidebar labels, and unique design patterns. The three primary values are horizontal-tb (default, top-to-bottom), vertical-rl (columns flow right-to-left), and vertical-lr (columns flow left-to-right). Modern browsers including Chrome, Firefox, Safari, and Edge all support it with excellent compatibility.

vertical-rl (Right-to-Left): New columns appear to the left of existing ones. This matches traditional Chinese and Japanese book layout—readers start at the rightmost column and move leftward. vertical-lr (Left-to-Right): New columns appear to the right of existing ones. This is used for Mongolian script and some modern designs. For Chinese/Japanese/Korean vertical text, vertical-rl is the culturally authentic choice.

text-orientation only applies when writing-mode is vertical. It controls how individual characters are displayed:
• mixed (default): CJK characters stay upright; Latin letters and numbers rotate 90° sideways. This is the standard for mixed-script vertical text.
• upright: All characters remain upright, including Latin letters. Each letter stands individually, which works for acronyms and short English words in vertical layout.
• sideways: All characters rotate 90°, including CJK. Entire text appears "lying down." Rarely used for body text but useful for specific design effects.

In vertical writing modes, width and height effectively swap their roles for text flow. Height now limits the inline (column) length—text fills a column from top to bottom, and when it hits the height limit, it wraps into a new column. Width determines how much horizontal space is available for all columns combined. This is the opposite of horizontal mode where width controls line length and height controls total content height. Understanding this swap is key to creating predictable vertical layouts.

writing-mode is supported in all modern browsers (Chrome 48+, Firefox 41+, Safari 10.1+, Edge 79+). For older IE, use the legacy -ms-writing-mode prefix with values tb-rl or bt-lr. A robust fallback: serve horizontal text as default and enhance to vertical for capable browsers using @supports (writing-mode: vertical-rl). For critical content, ensure readability in horizontal fallback—don't rely solely on vertical layout for meaning.

Yes, but with considerations. English text in vertical mode with text-orientation: mixed will have each word rotated 90°—readable but unusual for Western audiences. With text-orientation: upright, each Latin letter stands vertically, which works for short labels, navigation elements, or artistic headings. For body-length English text, vertical layout is generally not recommended for readability. Vertical text shines for CJK content and creative accent elements in Western design.

Set a height on your container to limit each column's length. When text exceeds that height, it automatically flows into a new column (to the left in vertical-rl, to the right in vertical-lr). This is the natural behavior of vertical writing modes—no extra CSS columns property needed. The container's width then determines how many columns fit horizontally. For finer control, you can also combine with column-width or column-count, though native vertical flow usually suffices.

direction: rtl can flip the inline text direction within each line/column. With vertical-rl, adding direction: rtl can affect how inline elements and punctuation are positioned. However, for most vertical CJK layouts, the default direction: ltr works correctly with vertical-rl. The writing-mode property handles the major flow change; direction fine-tunes inline positioning. Test thoroughly when combining them.

Vertical text can present challenges for screen readers. Most screen readers handle writing-mode correctly in modern browsers, reading CJK characters in the proper column order. However, ensure: (1) The DOM order matches logical reading order, (2) Provide horizontal fallback for users who may struggle with vertical layout, (3) Avoid using vertical text for critical navigation or instructions unless culturally appropriate, (4) Test with actual assistive technology. For decorative vertical text, use aria-hidden="true" to avoid confusion.

In vertical writing modes, margin-top/bottom and padding-top/bottom apply to the vertical direction (along the column), while margin-left/right and padding-left/right apply to the horizontal direction (across columns). However, CSS logical properties like margin-block-start, padding-inline-end etc. automatically adapt to the writing mode—these are recommended for writing-mode-agnostic layouts. For most practical use, standard padding works intuitively: it creates space between the text and the container edges regardless of writing direction.