Understanding CSS Writing Modes
The CSS writing modes module defines support for various international writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations. A writing mode in CSS is determined primarily by the writing-mode property, which controls whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress.
Understanding writing modes goes beyond simply rotating text. The concept fundamentally affects how the browser calculates layout, determines text flow direction, and positions inline and block elements. For developers building multilingual web applications, mastering these properties is essential for serving global audiences authentically.
Key modes for international web development
horizontal-tb
Standard horizontal text with lines flowing top to bottom. Default for Western languages.
vertical-rl
Vertical text flowing right to left. Traditional for Japanese, Chinese, and Korean.
vertical-lr
Vertical text flowing left to right. Alternative vertical orientation for specific layouts.
sideways-rl/lr
Rotated text for decorative vertical headings while maintaining character orientation.
Block and Inline Flow Directions
Every writing mode defines two critical dimensions: the block flow direction (how block-level elements stack) and the inline flow direction (how text and inline elements run). In a horizontal writing mode like the default horizontal-tb, blocks flow vertically from top to bottom, and inline content runs horizontally.
Switch to a vertical writing mode, and these axes rotate--blocks might flow horizontally while inline content runs vertically. This reorientation affects not just text but every aspect of your layout, from navigation bars to form inputs to complex grid arrangements. Understanding these flow directions is crucial for building responsive layouts that adapt across different writing systems.
Implementation Examples
Horizontal Left-to-Right (Default)
/* Standard horizontal left-to-right (default for English, etc.) */
html {
writing-mode: horizontal-tb;
direction: ltr;
}
Horizontal Right-to-Left (Arabic, Hebrew)
/* Horizontal right-to-left */
html[lang="ar"],
html[lang="he"] {
writing-mode: horizontal-tb;
direction: rtl;
}
Vertical Right-to-Left (Traditional East Asian)
/* Traditional Japanese/Chinese vertical writing */
.vertical-text {
writing-mode: vertical-rl;
direction: ltr;
}
Sideways Text Rotation
/* Sideways rotation - text flows vertically, characters on their side */
.rotated-heading {
writing-mode: sideways-rl;
}
Writing Modes in Next.js Applications
Implementing writing modes in Next.js requires locale-based styling. Create a CSS file that defines writing mode rules for each supported locale, then apply these styles conditionally based on routing or user preferences.
/* globals.css - locale-based writing modes */
:global(html[lang="en"]),
:global(html[lang="fr"]),
:global(html[lang="de"]) {
writing-mode: horizontal-tb;
direction: ltr;
}
:global(html[lang="ar"]),
:global(html[lang="he"]) {
writing-mode: horizontal-tb;
direction: rtl;
}
:global(html[lang="ja"]),
:global(html[lang="zh"]),
:global(html[lang="ko"]) {
writing-mode: horizontal-tb;
}
Integration with CSS Layout Systems
CSS writing modes fundamentally change how layout systems interpret their axes. In flexbox with the default horizontal-tb mode, flex-direction: row creates horizontal layouts. Switch to vertical-rl, and flex-direction: row now means vertical in visual terms. Grid layouts similarly adapt--the grid-template-columns and grid-template-rows properties define tracks in the inline and block dimensions, which change meaning based on writing-mode.
Performance Considerations
The writing-mode property is not animatable, meaning browsers cannot interpolate between different values. For static pages or single-page applications where writing mode is set on page load, there is no performance concern. Modern browsers have optimized layout calculations for writing mode changes. When building performant web applications, setting writing-mode at the document level ensures the most efficient rendering. For applications requiring advanced internationalization features, consider how AI-powered automation can streamline locale-specific styling workflows.