Which property is used to set the text direction ?

Last Updated : 24 May, 2023

In this article, we will see the property that is used to set the text direction in CSS, and also will know different attributes to set the directions with the implementation.

The text can be aligned in a different direction by specifying the value of the direction property. The direction property specifies the direction of the text/writing within any block element. It can have two values rtl(right to left) or ltr( left to right).

Syntax:

element_selector {
   direction: rtl|ltr|initial|inherit;
}

Example 1: This example describes the setting of the text-direction to the left by specifying the ltr attribute value.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Setting the Text direction
    </title>
    <style>
        body {
            color: green;
        }
         
        .ltr {
            direction: ltr;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h4>Setting the Text direction</h4>
    <p>
        This text goes from left to right. This is default.
    </p>
    <p class="ltr">
        This text goes from left to right.
    </p>
</body>
</html>

Output:

Example 2: This example describes the setting of the text-direction to the right by specifying the rtl attribute value.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Setting the Text direction
    </title>
    <style>
        body {
            color: green;
        }
         
        .rtl {
            direction: rtl;
        }
         
        .ltr {
            direction: ltr;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h4>Setting the Text direction</h4>
    <p>
        This text goes from left to right. This is default.
    </p>
    <p class="rtl">
        This text goes from right to left.
    </p>
 
</body>
</html>

Output:

Example 3: In this example, we are using the direction auto property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Setting the text direction</title>
</head>
 
<body>
    <h2 style="color:green;">
          GeeksforGeeks
      </h2>
    <p style="direction: auto;">
        GeeksforGeeks : a portal of computer science.
    </p>
</body>
</html>