o7planning

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>
ValueDescription
ltrUsed for the languages written in left to right direction, for example, English
rltUsed for the languages written in right to left direction, for example, Arabic.
autoA 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: