Writing Mode Systems in CSS

Understanding Block and Inline Dimensions

CSS writing modes fundamentally change how we think about layout by introducing two logical axes: the inline dimension (where text flows along a line) and the block dimension (where blocks stack perpendicular to inline). Unlike physical directions like left, right, top, and bottom, these logical axes adapt automatically based on the writing mode in use. When you understand block and inline dimensions, you can create layouts that work seamlessly across any language or writing system, from English to Arabic to Japanese.

This logical approach to layout is essential for modern web development, particularly when building multilingual websites. Instead of writing separate CSS for each language's direction, you use flow-relative terms that automatically adjust. The MDN Web Docs on writing mode systems provides comprehensive coverage of these foundational concepts that every international web developer should master.

Dimensions and Directions

Different writing systems around the world use block and inline dimensions in unique ways. Understanding these differences is crucial for building truly global websites. For English, Spanish, and other Western languages, the inline dimension flows horizontally from left to right, while the block dimension flows vertically from top to bottom. Arabic, Hebrew, and Persian also use horizontal text flow but in the right-to-left direction, still stacking blocks from top to bottom. Traditional Japanese, Chinese, and Korean take a different approach entirely, with vertical inline flow from right to left and horizontal block stacking from top to bottom. Mongolian uses a unique vertical layout where inline flows top to bottom from left to right.

This diversity in writing systems demonstrates why physical CSS directions (left, right, top, bottom) can cause problems in international projects. A margin-left on an English site would become margin-top in a vertical Japanese layout, breaking your design. Logical properties solve this by using flow-relative terms that make sense regardless of writing mode.

Inline and Block Boxes

The CSS box model behaves differently depending on whether elements display as inline or block, and writing modes add another layer of complexity. Inline boxes wrap each line of text and flow along the inline dimension, meaning they stretch and compress based on the amount of text. Block boxes contain other elements and flow along the block dimension, stacking vertically by default in horizontal writing modes.

When you apply a different writing mode, these behaviors adapt accordingly. In a vertical-rl layout, inline boxes still flow along the inline dimension, but that dimension now runs vertically. Block boxes continue to stack along the block dimension, which now runs horizontally. This is why understanding these logical concepts matters more than memorizing physical directions.

MDN's CSS Writing Modes guide explains that block boxes extend to fill the container's inline space unless explicitly sized, and this behavior remains consistent across writing modes. The key insight is that block and inline are relative concepts that adapt to their context, making them the perfect foundation for international CSS architecture.

The CSS writing-mode Property

The writing-mode property is the foundation of CSS international layout, controlling both how text flows within lines and how block elements stack relative to that flow. According to the MDN writing-mode property reference, this property sets the block flow direction and inline text direction simultaneously. It applies to all elements except table row groups, column groups, rows, and columns, and it's an inherited property, meaning child elements automatically adopt their parent's writing mode.

Understanding writing-mode is essential for any developer working on multilingual projects. Whether you're building a site that serves Arabic-speaking audiences requiring right-to-left layout, creating content with traditional Japanese vertical text, or simply ensuring your design system works globally, writing-mode provides the control you need. The property has been part of the Baseline stable release since March 2017, meaning you can use it confidently in production without worrying about browser compatibility.

Property Values

horizontal-tb (default) This is the default writing mode used by most languages including English, Spanish, French, and most European languages. Text flows horizontally, and block elements stack vertically from top to bottom. Even for RTL languages like Arabic, you typically use horizontal-tb for writing-mode and rely on the direction property or HTML dir attribute for text direction.

vertical-rl Vertical text flows from top to bottom, with lines stacking from right to left. This mode is used for traditional Japanese, Chinese, and Korean vertical text layouts. When you apply vertical-rl, the inline dimension runs vertically (top to bottom), and the block dimension runs horizontally (right to left).

vertical-lr Similar to vertical-rl, but lines stack from left to right instead of right to left. This mode is used primarily for Mongolian script and some specialized CJK contexts. The vertical text still flows top to bottom, but the line progression moves in the opposite direction.

sideways-rl All content rotates 90 degrees clockwise, with text flowing from bottom to top and glyphs oriented sideways toward the right. This mode is useful for specialized typography where you want sideways text orientation with right-to-left flow.

sideways-lr All content rotates 90 degrees counterclockwise, with text flowing from top to bottom and glyphs oriented sideways toward the left. This provides left-to-right flow in a sideways orientation.

Syntax

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

Text Orientation with text-orientation

The text-orientation property works alongside writing-mode to control how individual characters are oriented within vertical writing modes. When you have mixed-language content, such as English text within a Japanese vertical layout, text-orientation determines whether each character stands upright or rotates sideways. This property is essential for maintaining readability when combining scripts with different conventions.

According to MDN's CSS Writing Modes documentation, text-orientation affects the orientation of glyphs in vertical writing modes without changing the text's flow direction. Different scripts have different expectations for vertical text: CJK characters traditionally stand upright even in vertical layouts, while Western characters often rotate to match the line orientation.

text-orientation Values

upright Characters stand upright in vertical writing modes. This is the default for CJK characters and ensures that Japanese, Chinese, and Korean glyphs maintain their proper orientation even when text flows vertically. Use this value when you want characters to appear as they would in traditional vertical printing.

sideways Characters rotate 90 degrees sideways, lying on their side as they would if you rotated a phone horizontally while reading. This is appropriate for Western text appearing in a vertical context, where sideways orientation matches the flow of the vertical text.

mixed This is the default value in most cases. Upright characters (like CJK) remain upright, while sideways characters (like Latin letters) rotate. This mixed approach provides natural-looking text for multilingual content without requiring manual adjustments.

Practical Example

/* Japanese vertical text with upright characters */
.vertical-japanese {
 writing-mode: vertical-rl;
 text-orientation: upright;
 height: 300px;
}

/* Sideways rotation for Western text in vertical context */
.vertical-with-latin {
 writing-mode: vertical-rl;
 text-orientation: sideways;
}

/* Mixed orientation for multilingual content */
.multilingual-vertical {
 writing-mode: vertical-rl;
 text-orientation: mixed; /* Default, but explicit */
}

When building international websites with Next.js, consider how text-orientation affects your typography. For best results, test your vertical text layouts with actual CJK fonts and mixed-language content, as font rendering can vary across browsers and operating systems.

Practical Applications

Now that you understand the theory behind writing modes and logical properties, let's explore real-world applications for modern web development. These examples demonstrate how to implement international layouts in production code, including Next.js integration patterns that work at scale.

Multilingual Website Navigation

Navigation components often need special handling for RTL languages because they may contain icons, dropdowns, and interactive elements that depend on direction. Using logical properties and the dir attribute ensures your navigation works correctly across all supported languages.

/* Adapt navigation for RTL languages using attribute selector */
[dir="rtl"] .nav-menu {
 writing-mode: horizontal-tb;
}

[dir="rtl"] .nav-item {
 /* Logical margin works in both directions automatically */
 margin-inline-end: 1rem;
}

[dir="ltr"] .nav-item {
 /* Same logical property, different visual result */
 margin-inline-end: 1rem;
}

Vertical Text for Decorative Headings

Vertical text isn't just for traditional Asian scripts--it can also create visually striking decorative headings that add cultural flair or simply break up visual monotony. When using vertical text for decorative purposes, ensure you set explicit heights and use text-orientation appropriately.

/* Japanese-style decorative heading */
.vertical-heading {
 writing-mode: vertical-rl;
 text-orientation: upright;
 height: 300px;
 inline-size: auto;
 block-size: 100%;
 font-family: "Noto Serif JP", serif;
 font-size: 2rem;
}

/* Ensure proper overflow handling */
.vertical-heading {
 overflow-x: hidden;
 overflow-y: auto;
}

Responsive International Layouts

Modern responsive layouts should use logical properties and flexbox to create components that adapt to any writing mode. This approach reduces the number of media queries and special cases in your stylesheets while ensuring consistent behavior across languages.

/* Container that adapts to writing mode */
.adaptive-container {
 display: flex;
 gap: 1rem;
 margin-block: 2rem;
}

/* Component using logical properties */
.card {
 padding-inline: 1.5rem;
 padding-block: 1rem;
 border-inline-start: 4px solid blue;
 border-block-end: 2px solid gray;
 background: white;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Flex direction also respects writing mode */
.adaptive-container {
 flex-direction: row; /* Horizontal in horizontal-tb, vertical in vertical modes */
}

Next.js Integration Example

When building multilingual Next.js applications, you can determine writing mode dynamically based on the current locale. This pattern integrates seamlessly with Next.js internationalization and ensures consistent behavior across your entire application.

// utility function for writing mode
function getWritingMode(locale) {
 const rtlLocales = ['ar', 'he', 'fa', 'ur'];
 // All RTL languages still use horizontal text flow
 return 'horizontal-tb';
}

function getDirection(locale) {
 const rtlLocales = ['ar', 'he', 'fa', 'ur'];
 return rtlLocales.includes(locale) ? 'rtl' : 'ltr';
}

// Layout component using writing modes
function InternationalLayout({ children, locale }) {
 return (
 <div 
 dir={getDirection(locale)}
 lang={locale}
 style={{ 
 writingMode: getWritingMode(locale),
 }}
 >
 {children}
 </div>
 );
}

// Usage in a Next.js page
export default function Page({ params }) {
 const { locale } = params;
 
 return (
 <InternationalLayout locale={locale}>
 <main>
 <h1>Welcome to our international website</h1>
 {/* Content automatically adapts to locale direction */}
 </main>
 </InternationalLayout>
 );
}

These patterns form the foundation of professional web development services that serve global audiences effectively.

Best Practices for Modern Web Development

Building truly international websites requires consistent application of writing mode principles across your entire codebase. These best practices will help you create maintainable, accessible layouts that work for users worldwide.

Do

Use HTML dir attribute for RTL content: The dir attribute on HTML elements provides semantic meaning that assistive technologies understand. Always use dir="rtl" or dir="ltr" on container elements for RTL languages rather than relying solely on CSS.

Prefer logical properties over physical ones: Start using margin-block, padding-inline, and logical border properties in your stylesheets. These properties automatically adapt to writing mode changes, reducing the need for language-specific overrides.

Test layouts in multiple writing modes: Before launching multilingual websites, test every component in horizontal-tb (LTR), horizontal-tb with RTL direction, and vertical modes if supporting CJK languages. Pay special attention to navigation, forms, and card components.

Use text-orientation for mixed-language content: When combining CJK and Western text in vertical layouts, set text-orientation appropriately to ensure all characters remain readable.

Consider mobile viewport orientations: Test vertical text modes on actual mobile devices in both portrait and landscape orientations, as some browsers handle vertical modes differently in split-screen or landscape modes.

Don't

Use physical directions (left/right/top/bottom) for international content: Margins, paddings, and borders using physical directions will break when writing mode changes. Replace margin-left with margin-inline-start throughout your codebase.

Assume horizontal-tb for all content: While horizontal-tb is the default, some users and use cases require vertical modes. Build your component library with logical properties from the start.

Forget to test Arabic/Hebrew layouts: RTL testing often gets overlooked. Ensure your designs work correctly with dir="rtl" on actual content, not just empty containers.

Mix physical and logical properties inconsistently: Choose one approach and apply it consistently. Mixing approaches creates confusion and maintenance nightmares.

Ignore text-orientation for CJK content: CJK characters should typically use text-orientation: upright in vertical modes, while Western text may need sideways orientation.

Quick Reference Card

Following these practices ensures your web development projects deliver excellent experiences to users worldwide, regardless of their language or writing system.

Conclusion

CSS writing-mode systems are fundamental for building internationally-aware websites. By understanding block and inline dimensions, using the writing-mode property correctly, and embracing logical properties, developers can create layouts that adapt seamlessly to any language or writing system. The combination of writing-mode, direction, text-orientation, and logical properties provides a complete toolkit for international web development.

Modern browser support means these features can be used confidently in production without polyfills or fallbacks. Start adopting logical properties in your CSS today, and your layouts will automatically support new languages and writing modes as your website grows globally. Whether you're building a site for English speakers or need to support Arabic, Hebrew, Japanese, and dozens of other languages, the CSS writing-mode system provides the foundation you need.

The key takeaways are simple: use HTML dir attributes for direction, prefer logical properties over physical ones, test your layouts in multiple writing modes, and embrace the flow-relative approach that CSS provides. By following these principles, you'll create maintainable, accessible websites that serve users worldwide effectively.

Start using these CSS features in your Next.js projects to ensure your websites work beautifully for users worldwide, from English to Arabic to Japanese. The investment in understanding writing modes pays dividends in maintainability, accessibility, and global reach.

Sources

1. MDN Web Docs - Introduction to Writing Mode Systems - Comprehensive overview of block/inline dimensions, writing system modes, and mixing writing modes
2. MDN Web Docs - CSS Writing Modes - Module-level documentation covering writing-mode, direction, and text-orientation properties
3. MDN Web Docs - writing-mode Property - Complete reference with all values, syntax, formal definition, and browser compatibility
4. LogRocket - Guide to CSS Logical Properties - Practical guide explaining logical properties for internationalized layouts