How to display text Right-to-Left Using CSS ?

Last Updated : 08 May, 2023

In this article, we will learn how to display text Right-to-Left using CSS. This is done with the help of the CSS Direction property. By default, the text alignment is set to left to right direction in HTML Document. To display the text from right to left, we simply set the direction property to the value of “rtl”.

Syntax:

element_selector {
   direction: rtl;
}

Example 1: Here is the basic implementation of the CSS direction property.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1,
        h2 {
            color: green;
            text-align: center;
        }
 
        .rtl {
            direction: rtl;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
 
    <h2>
        How to display text 
        Right-to-Left Using CSS?
    </h2>
 
    <p class="rtl">
        This text goes from right to left.
    </p>
</body>
</html>

Output:

Right to left

Example 2: In the above code, if we add some more text content in the “p” element, we get the following output. Notice the effect in both results.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1,
        h2 {
            color: green;
            text-align: center;
        }
 
        .rtl {
            direction: rtl;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
 
    <h2>
        How to display text Right-to-Left Using CSS?
    </h2>
 
    <p class="rtl">
        This text goes from right to left.
        Another line is added.
    </p>
</body>
</html>