CSS writing-mode Control Text Flow Direction

Discover how to use CSS writing-mode to control text flow direction.

Available options include horizontal-tb, vertical-rl, vertical-lr, sideways-rl, and sideways-lr.

Formal Syntax

The formal syntax for the writing-mode property is defined as follows:

writing-mode =
    horizontal-tb |
    vertical-rl  |
    vertical-lr  |
    sideways-rl  |
    sideways-lr

Each value specifies a different direction for the layout of text and block-level elements. The syntax indicates that only one of these values must be specified for the writing-mode property.

Examples

Basic Horizontal Text Flow

In this example, we’ll use the horizontal-tb value to demonstrate the default horizontal text flow from left to right.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>writing-mode Property</title>
    <style>
        p.horizontal-tb {
            width: 300px;
            height: 100px;
            border: 1px solid black;
            writing-mode: horizontal-tb;
            color: white;
            background: green;
        }
    </style>
</head>
<body style="text-align: center;">
    <h1 style="color:green;">Example: Horizontal Text Flow</h1>
    <p class="horizontal-tb">
        This is an example of horizontal text flow from left to right.
    </p>
</body>
</html>

Vertical Text Flow from Right to Left

In this example, we’ll use the vertical-rl value to demonstrate vertical text flow from top to bottom, with the next line positioned to the left of the previous line.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>writing-mode Property</title>
    <style>
        p.vertical-rl {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            writing-mode: vertical-rl;
            color: white;
            background: green;
        }
    </style>
</head>
<body style="text-align: center;">
    <h1 style="color:green;">Example: Vertical Text Flow (Right to Left)</h1>
    <p class="vertical-rl">
        This is an example of vertical text flow from top to bottom, with the next line positioned to the left of the previous line.
    </p>
</body>
</html>

Vertical Text Flow from Left to Right

In this example, we’ll use the vertical-lr value to demonstrate vertical text flow from top to bottom, with the next line positioned to the right of the previous line.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>writing-mode Property</title>
    <style>
        p.vertical-lr {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            writing-mode: vertical-lr;
            color: white;
            background: green;
        }
    </style>
</head>
<body style="text-align: center;">
    <h1 style="color:green;">Example: Vertical Text Flow (Left to Right)</h1>
    <p class="vertical-lr">
        This is an example of vertical text flow from top to bottom, with the next line positioned to the right of the previous line.
    </p>
</body>
</html>

Sideways Text Flow from Right to Left

In this example, we’ll use the sideways-rl value to demonstrate sideways text flow from top to bottom, with the glyphs set sideways toward the right.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>writing-mode Property</title>
    <style>
        p.sideways-rl {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            writing-mode: sideways-rl;
            color: white;
            background: green;
        }
    </style>
</head>
<body style="text-align: center;">
    <h1 style="color:green;">Example: Sideways Text Flow (Right to Left)</h1>
    <p class="sideways-rl">
        This is an example of sideways text flow from top to bottom, with the glyphs set sideways toward the right.
    </p>
</body>
</html>

Sideways Text Flow from Left to Right

In this example, we’ll use the sideways-lr value to demonstrate sideways text flow from bottom to top, with the glyphs set sideways toward the left.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>writing-mode Property</title>
    <style>
        p.sideways-lr {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            writing-mode: sideways-lr;
            color: white;
            background: green;
        }
    </style>
</head>
<body style="text-align: center;">
    <h1 style="color:green;">Example: Sideways Text Flow (Left to Right)</h1>
    <p class="sideways-lr">
        This is an example of sideways text flow from bottom to top, with the glyphs set sideways toward the left.
    </p>
</body>
</html>

Browser Compatibility

The writing-mode property is widely supported across modern browsers. Below is a table outlining the compatibility of the writing-mode property across various browsers:

Browser	Version	Initial Support Date
Google Chrome	48.0	January 2016
Firefox	41.0	September 2015
Internet Explorer	12.0	July 2015
Edge	12.0	July 2015
Opera	35.0	February 2016
Safari	10.1	September 2017

Summary

The writing-mode property is a powerful CSS tool for controlling the direction of text flow, making it especially useful for multilingual websites and creative page layouts. While most modern browsers support the writing-mode property, it’s important to check compatibility and use appropriate fallbacks for older browsers that may not fully support all values.

For the most up-to-date information on browser compatibility, refer to the MDN Web Docs Browser Compatibility Data.

[direction]WebsiteUrl
- The direction property specifies the text direction/writing direction within a block-level element. This property is often used in conjunction with writing-mode to control text flow in different languages.
[unicode-bidi]WebsiteUrl
- The unicode-bidi property is used to control the text direction for the Unicode Bidirectional Algorithm. It is particularly useful for handling mixed-direction text, such as combining left-to-right and right-to-left scripts.
[text-orientation]WebsiteUrl
- The text-orientation property specifies the orientation of text within a line box. It is often used to fine-tune the appearance of vertical text.
[text-combine-upright]WebsiteUrl
- The text-combine-upright property allows multiple characters to be combined into the space of a single character in vertical text layouts, particularly useful for East Asian typography.
[CSS Logical Properties]WebsiteUrl
- CSS logical properties provide a way to write CSS that adapts to the writing mode. They include properties like block-size, inline-size, and margin-inline-start, which adjust based on the writing mode and direction of the text.

Additional Resources

[Styling vertical text (Chinese, Japanese, Korean and Mongolian)]WebsiteUrl
- This article on W3.org provides a comprehensive guide to styling vertical text for languages that traditionally use vertical writing systems, such as Chinese, Japanese, Korean, and Mongolian.
[CSS writing modes]WebsiteUrl
- The CSS writing modes module defines the CSS writing modes, which control the direction of text flow and block layout. This module includes detailed specifications and examples for using the writing-mode property.
[Creating vertical form controls]WebsiteUrl
- This guide explains how to create vertical form controls using CSS writing modes, ensuring that form elements align correctly with vertical text.
MDN Web Docs
- The MDN Web Docs provide extensive documentation on CSS properties, including the writing-mode property, with examples, browser compatibility information, and detailed explanations.

Tutorials and Guides

[CSS Tricks: Understanding CSS Writing Modes]WebsiteUrl
- This tutorial on CSS Tricks offers an in-depth look at CSS writing modes, with practical examples and tips for implementation.
[W3Schools CSS writing-mode Property]WebsiteUrl
- W3Schools provides a concise reference and examples for the writing-mode property, suitable for beginners and intermediate users.

By exploring these related properties and resources, you can gain a deeper understanding of how to effectively use the writing-mode property to create well-designed and accessible web pages.