rick@tillitsdone.com

+66824564755

Scroll to discover

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.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-direction.png

CSS Direction Controlling Text Flow for LTR and RTL Languages Learn about the CSS direction property for controlling text flow in LTR (left-to-right) and RTL (right-to-left) languages. Understand available options like ltr, rtl, inherit, initial, revert, revert-layer, and unset.

css_property_cover/css-property-font-kerning.png

CSS Font-Kerning Enhancing Text Readability CSS font-kerning improves text readability and visual appeal by adjusting character spacing. Available options include auto, normal, and none for better typography.

css_property_cover/css-property-font-variant-caps.png

CSS Font-Variant-Caps Enhance Your Typography Learn about CSS font-variant-caps, a property that controls the use of alternate glyphs for small or petite capitals. Explore its use cases and available options to improve typography.

css_property_cover/css-property-font-variant-ligatures.png

CSS Font-Variant-Ligatures Enhancing Typography Discover CSS font-variant-ligatures for enhancing text aesthetics. Control common, discretionary, historical ligatures, and more for professional web design.

css_property_cover/css-property-font-weight.png

CSS Font-Weight Enhancing Text Emphasis Discover how the CSS font-weight property enhances text emphasis. Learn about available options like 'normal', 'bold', and numeric values for precise control. Optimize your web typography with this essential property.

css_property_cover/css-property-hyphens.png

CSS Hyphens Enhance Text Readability with Easy Hyphenation CSS hyphens property boosts text readability by controlling word breaks. Choose from 'none', 'manual', or 'auto' options to manage hyphenation effectively.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS writing-mode Control Text Flow Direction

Formal Syntax

Examples

Basic Horizontal Text Flow

Vertical Text Flow from Right to Left

Vertical Text Flow from Left to Right

Sideways Text Flow from Right to Left

Sideways Text Flow from Left to Right

Browser Compatibility

Summary

See Also

Related CSS Properties

Additional Resources

Tutorials and Guides

Talk with CEO