Skip to content
Related Articles

Related Articles

How to override the current text direction using HTML ?
  • Last Updated : 08 Jun, 2020

In this article, we will override the current text direction by using the dir attribute in the particular element. It is used to specify the text direction of the element content.
It contains three values:

  • ltr: It is the default value. This value represent the text in Left-to-right text direction.
  • rtl: This value represent the text in right-to-left text direction.
  • auto: Let the browser figure out the text direction, based on the content.

Syntax:

<element dir = "ltr | rtl | auto">

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Override the current 
        text direction
    </title>
  
    <style>
        h1 {
            color: green;
        }
  
        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>
        HTML5: How to override 
        the current text direction?
    </h2>
  
    <p dir="rtl">
        GeeksforGeeks: A computer 
        science portal for geeks
    </p>
</body>
  
</html>

chevron_right


Output:

Example 2:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Override the current 
        text direction
    </title>
  
    <style>
        h1 {
            color: green;
        }
  
        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>
        HTML5: How to override 
        the current text direction?
    </h2>
  
    <p dir="ltr">
        GeeksforGeeks: A computer 
        science portal for geeks
    </p>
</body>
  
</html>

chevron_right


Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :