HTML Dir Attribute Tutorial with Examples

HTML Direction

1. HTML Direction

No ADS

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 .

https://gds.gov.iq/ar/category/cu/

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>.

No ADS

HTML Dir Attribute Tutorial with Examples

1. HTML Direction

HTML Tutorials

HTML Tutorials

Newest Articles