Skip to content
Related Articles

Related Articles

Improve 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:

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 

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :