Table Of Content

HTML Dir Attribute Tutorial

View more Tutorials:

1- HTML Direction

The HTML language is created to ensure that it can create  the websites suitable for all cultures. Arabic is  one of the four most popular languages in the world. The contents in Arabic books and websites are written in the Right To Left (RTL) direction, which can be quite strange to the remaining countries. 
For example, the following is an website of IRAQ government .
To display the content of an element  from right to left (RTL), we use the  dir='rlt' attribute :
dir-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>HTML Dir Attribute</title>
      <meta charset="UTF-8"/>
      <style>
          div {
            border: 1px solid green;
            padding: 5px;
            margin: 10px 0;
          }
      </style>
   </head>
   <body>
       <h1>HTML Dir Attribute</h1>
       <hr/><br/>

       <div>
           <h3>LTR (Left-to-Right) Direction! (Default)</h3>
           I am a Text.
        </div>

       <div dir = "rtl">
          <h3>RTL (Right-to-Left) Direction!</h3>
          I am a Text.
       </div>

   </body>
</html>
Most browsers support the  dir attribute, except for Internet Explorer and  Edge
<element dir = "ltr|rtl|auto">..</element>
Value Description
ltr Used for the languages written in left to right direction, for example, English
rlt Used for the languages written in right to left direction, for example, Arabic.
auto A browser will be based on user agent to decide. It uses a basic algorithm to parse the content inside an element until it finds a character with strong directionality, and then apply that direction to all element.
Note: HTML5 supports the  dir attribute for all elements while HTML4 supports this attribute for all elements except for  <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, <script>.

View more Tutorials: