CSS Direction Controlling Text Flow for LTR and RTL Languages

Introduction

The CSS direction property is a handy tool for web developers and designers. It lets you set the direction of text, table columns, and horizontal overflow. This is especially useful for languages written from right to left (RTL), like Arabic and Hebrew, and those written from left to right (LTR), like English.

While you can use the direction property, it’s generally better to use the HTML dir attribute for setting text direction. This attribute is more integrated with the document structure and usually more reliable.

By understanding and using the direction property correctly, you can make sure your web pages are accessible and correctly formatted for a global audience. This guide covers everything you need to know about the direction property, including its syntax, values, examples, and browser compatibility.

Specification

The direction property in CSS is defined in the CSS Writing Modes Level 4 specification. This specification outlines how the direction property works, ensuring consistency across different browsers and platforms.

The main purpose of the direction property is to control the text direction within block-level elements. It affects not only the flow of text but also the alignment and direction of embeddings created by the unicode-bidi property.

Understanding the specifications is important for web developers and designers to ensure their websites are compliant and accessible. The direction property is essential for supporting right-to-left (RTL) languages, making it a key aspect of internationalization in web development.

For more detailed information, you can refer to the official CSS Writing Modes Level 4 specification.

Description

The direction property in CSS is used to control the text direction within an element. It’s crucial for web developers and designers who need to accommodate languages written from right to left (RTL), such as Arabic and Hebrew, as well as those written from left to right (LTR), like English.

By setting the direction property, you can ensure that text, table columns, and horizontal overflow align correctly according to the language’s reading direction. This property is particularly useful for creating multilingual websites that need to support different text directions.

Key Points:

• RTL (Right to Left): Use rtl for languages like Arabic and Hebrew.
• LTR (Left to Right): Use ltr for languages like English and most others.

The direction property affects the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. It also sets the default alignment of text and block-level elements, as well as the direction that cells flow within a table row.

However, it’s important to note that the direction property is not inherited by table cells from table columns. This is because CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

Using the direction property correctly can significantly enhance the readability and usability of your web pages, making them more accessible to a global audience.

Syntax

The direction property in CSS is straightforward to use. It can be applied to any element to control the text direction. Here is the basic syntax for the direction property:

/* Keyword values */
direction: ltr;
direction: rtl;

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

Explanation:

• ltr: This value specifies that the text direction should be from left to right. This is the default value and is typically used for languages like English.
• rtl: This value specifies that the text direction should be from right to left. This is used for languages like Arabic and Hebrew.
• inherit: This value inherits the direction property from the parent element.
• initial: This value sets the direction property to its default value, which is ltr.
• revert: This value reverts the direction property to the value as set by the user agent’s default stylesheet.
• revert-layer: This value reverts the direction property to the value as set by the previous cascade layer.
• unset: This value resets the direction property to its natural value, which means it behaves like inherit if the property is inherited, or like initial if the property is not inherited.

Understanding the syntax and applying the correct values can help you effectively manage text direction in your web projects. This ensures that your content is displayed correctly for users of different languages.

Values

The direction property in CSS accepts several values that define the text direction within an element. These values are crucial for ensuring that your content is displayed correctly, especially for languages that are written from right to left (RTL) or left to right (LTR). Below are the main values you can use with the direction property:

ltr

• Description: This value sets the text direction from left to right.
• Usage: This is the default value and is typically used for languages like English and most other languages.

rtl

• Description: This value sets the text direction from right to left.
• Usage: This is used for languages like Arabic and Hebrew.

inherit

• Description: This value inherits the direction property from the parent element.
• Usage: Use this value when you want the child element to follow the text direction of its parent element.

initial

• Description: This value sets the direction property to its default value, which is ltr.
• Usage: Use this value to reset the direction property to its initial state.

revert

• Description: This value reverts the direction property to the value as set by the user agent’s default stylesheet.
• Usage: Use this value to undo custom styles and revert to the browser’s default styling.

revert-layer

• Description: This value reverts the direction property to the value as set by the previous cascade layer.
• Usage: Use this value to revert to the styles defined in a previous layer of the cascade.

unset

• Description: This value resets the direction property to its natural value.
• Usage: This means it behaves like inherit if the property is inherited, or like initial if the property is not inherited.

Example Usage:

/* Set text direction to left to right */
.ltr-text {
  direction: ltr;
}

/* Set text direction to right to left */
.rtl-text {
  direction: rtl;
}

/* Inherit text direction from parent element */
.inherit-text {
  direction: inherit;
}

/* Reset text direction to default value */
.initial-text {
  direction: initial;
}

/* Revert text direction to browser's default */
.revert-text {
  direction: revert;
}

/* Revert text direction to previous cascade layer */
.revert-layer-text {
  direction: revert-layer;
}

/* Reset text direction to natural value */
.unset-text {
  direction: unset;
}

Understanding and using these values correctly will help you manage text direction effectively, ensuring that your web content is accessible and correctly formatted for readers of different languages.

Formal Definition

The direction property in CSS is formally defined as follows:

• Initial Value: ltr
• Applies To: All elements
• Inherited: Yes
• Computed Value: As specified
• Animation Type: Not animatable

Formal Syntax

direction = ltr | rtl

Explanation

• Initial Value: The default value is ltr, which means text flows from left to right.
• Applies To: The direction property can be applied to all HTML elements.
• Inherited: The direction property is inherited by child elements from their parent elements.
• Computed Value: The computed value is the same as the specified value.
• Animation Type: The direction property is not animatable.

Additional Notes

• The direction property is one of the few CSS properties that is not affected by the all shorthand property.
• Unlike the HTML dir attribute, the CSS direction property does not propagate from table columns to table cells, as CSS inheritance follows the document tree.

Understanding the formal definition of the direction property is essential for web developers and designers to ensure they use it effectively and correctly. This knowledge helps in creating accessible and well-formatted web content for a global audience.

Examples

The direction property in CSS is a powerful tool for controlling the text direction within an element. Here are some practical examples to illustrate how to use the direction property effectively.

Setting Right-to-Left Direction

In this example, we have two strings of text, one in English and one in Arabic. Both are displayed using direction: rtl. While the Arabic text is displayed correctly with this setting, the English text now has a full stop in an unusual location.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Direction Example</title>
    <style>
        blockquote {
            direction: rtl;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <blockquote>
        <p>This paragraph is in English but incorrectly goes right to left.</p>
    </blockquote>

    <blockquote>
        <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
    </blockquote>
</body>
</html>

Setting Left-to-Right Direction

In this example, we have a paragraph of text in English. We use the direction: ltr property to ensure the text flows from left to right, which is the default behavior.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Direction Example</title>
    <style>
        .ltr-text {
            direction: ltr;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="ltr-text">
        <p>This paragraph is in English and correctly goes left to right.</p>
    </div>
</body>
</html>

Using Inherit Value

In this example, we have a parent element with direction: rtl. The child element inherits this direction using the direction: inherit property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Direction Example</title>
    <style>
        .parent {
            direction: rtl;
            width: 300px;
            margin: 20px 0;
        }
        .child {
            direction: inherit;
        }
    </style>
</head>
<body>
    <div class="parent">
        <p>This is the parent element with right-to-left direction.</p>
        <div class="child">
            <p>This is the child element inheriting the parent's direction.</p>
        </div>
    </div>
</body>
</html>

Using Initial Value

In this example, we have a paragraph of text that uses the direction: initial property to reset the text direction to its default value, which is ltr.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Direction Example</title>
    <style>
        .initial-text {
            direction: initial;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="initial-text">
        <p>This paragraph uses the initial direction value, which resets to left to right.</p>
    </div>
</body>
</html>

Using Revert Value

In this example, we have a paragraph of text that uses the direction: revert property to revert the text direction to the value as set by the user agent’s default stylesheet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Direction Example</title>
    <style>
        .revert-text {
            direction: revert;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="revert-text">
        <p>This paragraph uses the revert direction value, which reverts to the browser's default.</p>
    </div>
</body>
</html>

Using Revert-Layer Value

In this example, we have a paragraph of text that uses the direction: revert-layer property to revert the text direction to the value as set by the previous cascade layer.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Direction Example</title>
    <style>
        .revert-layer-text {
            direction: revert-layer;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="revert-layer-text">
        <p>This paragraph uses the revert-layer direction value, which reverts to the previous cascade layer.</p>
    </div>
</body>
</html>

Using Unset Value

In this example, we have a paragraph of text that uses the direction: unset property to reset the text direction to its natural value.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Direction Example</title>
    <style>
        .unset-text {
            direction: unset;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="unset-text">
        <p>This paragraph uses the unset direction value, which resets to the natural value.</p>
    </div>
</body>
</html>

Setting Right-to-Left Direction

Setting text direction to right-to-left (RTL) is crucial for languages like Arabic, Hebrew, and Persian. The direction property in CSS makes this easy. Let’s see how to set RTL direction with some practical examples.

Basic Usage

To set the text direction to right-to-left, use the direction: rtl property in your CSS. This can be applied to any element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RTL Direction Example</title>
    <style>
        .rtl-text {
            direction: rtl;
        }
    </style>
</head>
<body>
    <div class="rtl-text">
        <p>This text will go from right to left.</p>
    </div>
</body>
</html>

Practical Example with Arabic Text

Here’s an example with Arabic text, showing how the direction: rtl property ensures the text is correctly displayed.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arabic RTL Example</title>
    <style>
        .rtl-text {
            direction: rtl;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="rtl-text">
        <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
    </div>
</body>
</html>

Setting RTL Direction for Tables

The direction property is also useful for setting the direction of table columns and cells.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RTL Table Example</title>
    <style>
        .rtl-table {
            direction: rtl;
        }
    </style>
</head>
<body>
    <table class="rtl-table">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>

Combining with Other Properties

You can combine the direction property with other CSS properties like text-align for better control.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Combining Direction and Text Align</title>
    <style>
        .rtl-text {
            direction: rtl;
            text-align: right;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="rtl-text">
        <p>This text will be aligned to the right and go from right to left.</p>
    </div>
</body>
</html>

Browser Compatibility

The direction property in CSS is widely supported across all major web browsers. This ensures that you can use it to control text direction without worrying about compatibility issues.

Example

This example shows how to use the direction property in a simple HTML document, which works across all major browsers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browser Compatibility Example</title>
    <style>
        .rtl-text {
            direction: rtl;
            width: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="rtl-text">
        <p>This text will go from right to left.</p>
    </div>
</body>
</html>

Conclusion

The direction property in CSS is a powerful tool for controlling text direction and is fully supported across all major web browsers. By using this property, you can ensure that your web content is accessible and correctly formatted for readers of different languages, including those written from right to left.

See Also

If you found this article on the CSS direction property useful, you might also be interested in the following related topics and resources:

Related CSS Properties

• unicode-bidi: This property is used with the direction property to handle text direction within elements.
• writing-mode: This property defines text layout direction, either horizontal or vertical.

HTML Attributes

• HTML dir Global Attribute: This attribute sets the text direction for an entire document or specific elements. It is generally recommended over the CSS direction property for document-wide settings.

Web Development Guides

• Creating Vertical Form Controls: Learn how to create vertical form controls using CSS, useful for languages requiring vertical text layouts.
• CSS Writing Modes: This guide provides an in-depth look at CSS writing modes, including horizontal and vertical text layouts.

Further Reading

• CSS Text-Align Property Reference: Explore the text-align property for aligning text within an element.
• CSS Text Tutorial: This tutorial covers various CSS properties and techniques for styling and manipulating text.
• HTML Reference Guide: A comprehensive guide to HTML elements, attributes, and best practices for web development.

Related Articles

• CSS line-height Property: Learn how to control the height of a line box using the line-height property.
• CSS word-spacing Property: Understand how to set the spacing between words in text using the word-spacing property.