Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 16 Jul, 2021

The task is to display a text from the right to left direction by 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

element_selector {
   direction: rtl;
} 

Example 1:

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 the 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>

Output:

Right to left 




My Personal Notes arrow_drop_up
Recommended Articles
Page :