o7planning

HTML Dir Attribute Tutorial with Examples

  1. HTML Direction

1. HTML Direction

The HTML language is created to ensure that it can createthe websites suitable for all cultures. Arabic isone 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>.

Newest Articles

Show More