HTML - dir Attribute

HTML dir attribute is used to control the text direction in multilingual websites for ensuring proper alignment of content.

Web designers can design web pages that are more user-friendly and accessible for a user’s by establishing dir correctly, for accommodating various writing systems and cultural preferences. It can be applied to numerous HTML elements to designate whether the text should be shown from left to right (ltr) or right to left (rtl).

Syntax

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

This attribute accept any one mentioned attributes in the syntax.

Applies On

Most HTML elements support the dir attribute. However, The dir attribute is indeed not supported by a few HTML elements, particularly those that don't involve textual content or don't have a visual representation affected by text directionality. For Example <html>, <head>, <title>, <meta>, <hr>

Examples of HTML dir Attribute

Bellow examples will illustrate the HTML dir attribute, where and how we should use this attribute!

Default direction using dir Attribute

In the following example we will create two p elements, and sed dir="ltr" on one p element which will render as normal.

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p>
      This is a sample Text direction is not set
   </p>
   <p dir="ltr">
      This is a sample Text direction is left to right  set
   </p>
</body>

</html>

Right to Left & Left to Right Direction Content

In the following example, let’s see the usage of the dir attribute and how it will render the content when we use the dir attribute with different value

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p dir="rtl">
      This paragraph is in English but 
      incorrectly goes right to left.
   </p>
   <p dir="ltr">
      This paragraph is in English and 
      correctly goes left to right.
   </p>
   <hr>
   <p>
      هذه الفقرة باللغة العربية 
      ولكن بشكل خاطئ من اليسار إلى اليمين.
   </p>
   <p dir="auto">
      هذه الفقرة باللغة العربية ، لذا
      يجب الانتقال من اليمين إلى اليسار.
   </p>
</body>

</html>

Auto direction using dir Attribute

Consider the following example, where we are going to place dir as auto. This will automatically find best direction to render text.

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p dir="auto">
      Tutorialspoint is best for Free Tutorials
   </p>
   
   <p dir="auto">
      لوريم إيبسوم هو ببساطة نص 
      وهمي من صناعة الطباعة
      والتنضيد. لقد كان لوريم إيبسوم
      هو النص الوهمي القياسي في هذه
      الصناعة منذ القرن السادس عشر
   </p>
</body>

</html>

Supported Browsers

Attribute
dir	4.0	5.5	2.0	3.1	9.6

html_attributes_reference.htm