Vertical Text

Vertical writing systems arrange text in vertical columns, traditionally read first from top to bottom and then from right-to-left (occasionally left-to-right) across the page. 

Vertical text is not common on the web, but there are special cases where it remains relevant for accurately representing certain languages and traditional styles. It is mostly used in contexts where cultural or aesthetic fidelity is critical, but there are some languages, like Mongolian, in which vertically-oriented text is the preferred way to display the written language.

Vertical text is primarily used in East Asian languages where traditional writing systems support vertical orientation. Some of these languages include:

Japanese — Although mostly written LTR on the web, traditional Japanese (縦書き, tategaki) is often written vertically, especially in formal documents, novels, or newspapers. Vertical text reads top-to-bottom, then moves right-to-left, with certain punctuation marks and symbols adjusted for aesthetic balance.

Chinese (Traditional and Simplified) — Classical Chinese was traditionally written vertically. While horizontal text is more common today, vertical text is still used in calligraphy, poetry, and some formal or ceremonial contexts.

Korean — Historically written vertically, Korean is now predominantly written horizontally. However, vertical text may appear in older texts, artistic works, or specific cultural settings.

Mongolian (Traditional Script) — Written vertically from top-to-bottom and left-to-right. (See this example.) This script is unique among writing systems in its consistent vertical format, and it poses special challenges for web rendering and requires robust font and browser support.

Vertical text is less commonly used on the web, but it still can be found in specific scenarios:

• Cultural or artistic websites: Where traditional writing styles are highlighted.
• Digital newspapers or magazines: Reproducing traditional layouts.
• Calligraphy and poetry: Preserving traditional aesthetics.
• Signage simulations: Mimicking vertical text used in real-world signs.

Implementing Vertical Text in HTML and CSS

CSS supports vertical text using properties like writing-mode and text-orientation.

The writing mode property controls the direction of text flow. Values for it include:

horizontal-tb:

Default horizontal writing mode, with text flowing from left to right and top to bottom.

vertical-rl:

Vertical writing mode, with text flowing from top to bottom and right to left.

vertical-lr:

Vertical writing mode, with text flowing from top to bottom and left to right.

The text-orientation property specifies how individual characters are displayed in vertical writing:

mixed:

Default for most East Asian scripts, where upright and rotated characters coexist.

upright:

All characters remain upright, often used in artistic or decorative layouts.

sideways:

All characters are rotated sideways.

Examples:

writing-mode: vertical-rl; /* Top-to-bottom, right-to-left */
text-orientation: upright; /* Keeps characters upright in vertical writing */

<div style="writing-mode: vertical-rl; text-orientation: upright;">
  これは縦書きの例です。
</div>

Layout and Design Considerations

Responsive Layouts: Vertical writing systems often coexist with horizontal layouts in modern web design, especially for bilingual or multilingual sites.

Container Sizing: Vertical text containers need careful sizing to prevent unwanted clipping or overflow.

Directionality: Mixed RTL (right-to-left) and vertical text may require additional adjustments to ensure proper alignment and flow.

Accessibility Considerations

Screen Readers: Vertical text must remain semantically meaningful, ensuring assistive technologies can interpret it correctly.

Fallbacks: For browsers or devices lacking robust vertical text support, fallback mechanisms should provide horizontal alternatives.

Tools and Libraries for Vertical Text

Modern Browsers: Most modern browsers support writing-mode and text-orientation, but testing across devices is crucial.

Custom Fonts: Ensure fonts used support the appropriate glyphs and orientations for vertical writing.

Libraries like D3.js can help create custom layouts combining vertical and horizontal writing.

Challenges

1. Compatibility: Not all browsers handle vertical text equally well. Modern browsers like Chrome, Firefox, and Safari have good support, but older browsers may not.
2. Layout Complexity: Combining vertical and horizontal text can complicate layout management, especially with responsive designs.
3. User Expectations: Horizontal text is the norm for most users, so vertical text may feel unconventional outside of specific cultural contexts.