What is CSS Text Orientation?
The text-orientation CSS property sets the orientation of text characters within a line. This property is essential for creating multilingual websites that support languages with vertical scripts (like Chinese, Japanese, and Korean) and for implementing creative design elements using vertical text.
Key point: Text-orientation only affects text when writing-mode is set to a vertical mode (not horizontal-tb). In standard horizontal text layouts, character orientation is always left-to-right and upright. When working with responsive web design and international audiences, understanding this property becomes crucial for proper text rendering across different writing systems.
To fully understand text-orientation, you must understand the CSS Writing Modes specification and how it relates to the writing-mode property. These two properties work together to control text layout: writing-mode establishes the block flow direction (how lines stack), while text-orientation controls the orientation of characters within those vertical lines. Together, they enable support for all international writing modes, from left-to-right horizontal scripts (like English) to right-to-left vertical scripts (like traditional Japanese).
For teams implementing multilingual web projects, our localization services provide comprehensive support for international writing systems and text orientation across all supported languages. Additionally, proper SEO optimization ensures that multilingual content ranks effectively in search engines across different regions.
Text-Orientation Values
mixed (Default)
Rotates characters from horizontal scripts 90 degrees clockwise while laying out vertical script characters naturally. This is the default value and provides the most natural reading experience for multilingual content. When applied, this value rotates characters from horizontal scripts (like Latin, Cyrillic, and Greek) 90 degrees clockwise, while laying out characters from vertical scripts (like Chinese, Japanese, and Korean) in their natural upright orientation. This mixed approach ensures that text remains readable in multilingual contexts where both horizontal and vertical scripts might appear together.
upright
Causes all characters to be laid out upright, regardless of their script. The direction property is automatically set to ltr. This value is particularly useful when you want to display text in a vertical layout but need the characters to remain upright for readability or design purposes. Ideal for multilingual website implementations where character legibility is paramount.
sideways
Lays out all characters as they would in horizontal orientation, then rotates the entire line 90 degrees clockwise. Creates text that reads from bottom to top. Unlike mixed and upright, sideways treats all characters the same, rotating the entire line as a unit. This value is useful for creating decorative vertical text effects or for displaying content in a rotated orientation.
sideways-right
Deprecated alias for sideways. Use sideways instead in modern CSS. While it still works in browsers for compatibility reasons, modern CSS should use sideways instead.
use-glyph-orientation
SVG-specific value using deprecated properties. Not recommended for modern web development. For SVG text, use the standard CSS text-orientation values instead.
1.vertical-text {2 writing-mode: vertical-rl;3 text-orientation: mixed;4}1.vertical-upright {2 writing-mode: vertical-rl;3 text-orientation: upright;4}1.sideways-text {2 writing-mode: vertical-rl;3 text-orientation: sideways;4}Practical Applications
Responsive Web Design
Vertical text maximizes space efficiency on narrow screens, mobile devices, and compact interfaces where horizontal text would require excessive width. By using vertical text, you can fit headings, navigation elements, and labels into narrow spaces that would otherwise be insufficient for horizontal text. Sidebars, mobile interfaces, and data-dense dashboards often benefit from vertical text labels that maximize the use of available width while maintaining readability. This approach is particularly valuable when building responsive websites that must accommodate diverse device sizes.
Multilingual Support
Essential for websites supporting Chinese, Japanese, and Korean languages that traditionally use vertical writing. The CSS Writing Modes specification enables proper rendering of all international writing systems. Dr. Jun Murai, a W3C steering committee member, noted that "Thanks to incredible internationalization work and the help of many Asian countries working together, we have reached the momentous point where CSS enables international writing modes on the web." When implementing international SEO strategies, proper text orientation support is crucial for serving global audiences effectively.
Creative Design
Vertical text creates unique typographic effects for headings, decorative elements, and brand-focused visual designs. Many modern websites use vertical text in creative ways to establish brand identity and create memorable visual experiences. However, it's important to balance creative use with accessibility considerations and ensure the design supports rather than hinders user experience.
Table Headers
Rotate table headers 90 degrees to create compact data tables, common in spreadsheets and dashboards where vertical space is less constrained than horizontal. This approach is common in data visualization and business intelligence applications where horizontal text would require excessive column width.
The CSS Writing Modes specification handles four primary writing systems
Latin-based Systems
Left-to-right horizontal text including English, German, Spanish, Greek, and Cyrillic languages. These scripts are the foundation of many websites serving Western audiences.
Arabic-based Systems
Right-to-left horizontal text including Arabic, Hebrew, and Persian languages. Proper text orientation is crucial for RTL website implementations.
Mongolian-based Systems
Vertical text with top-to-bottom inline base direction, primarily for the Mongolian language. This writing system requires specific vertical text handling.
Han-based Systems
Chinese, Japanese, and Korean - can be written horizontally or traditionally vertical. These CJK languages often benefit from vertical text layouts.
Best Practices
Accessibility
When using vertical text, consider users who may have difficulty reading rotated or vertically-oriented text:
- Avoid vertical text for long passages of body copy
- Ensure sufficient font size for readability
- Provide alternative orientations when possible
- Consider users with cognitive disabilities
Font Selection
Choose fonts that:
- Have proper glyph designs for all characters
- Support required scripts and languages
- Render legibly at smaller sizes
Property Combinations
Text-orientation works with:
writing-mode: Controls line flow directiondirection: Sets text direction (ltr/rtl)unicode-bidi: Handles bidirectional textline-height: Affects vertical spacingtext-combine-upright: Controls combining characters
Common Pitfalls
The most common issue is that text-orientation appears to have no effect. This typically occurs because the writing-mode property is still set to its default value (horizontal-tb). Remember that text-orientation only affects text in vertical writing modes--you must first set a vertical writing mode for text-orientation to have any visible effect. When working with multilingual content, characters from different scripts may display inconsistently if you don't understand how the mixed value works. Test your vertical text layouts with actual content from your target languages to ensure proper rendering.