The HTML dir attribute is used to specify the text direction of an element's content.
Definition and Usage
➔ The dir attribute takes one of these possible values.
- ltr: (left to right) This is the default value for most languages.
- rtl: (right-to-left) used for languages like Arabic, Hebrew, and Urdu.
- auto: Allows the browser to determine text direction based on the content.
➔ It is recommended to use the lang attribute with dir to correctly declare the language of the content.
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| dir | Global Attributes |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML dir attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
</style>
</head>
<body>
<h3>HTML dir attribute example</h3>
<p>The dir attribute is used to specify the text direction of an element's content.</p>
<div id="sample" class="mydiv">
<h1>HTML dir attribute example</h1>
<p dir="ltr">The paragraph in English goes left to right.</p>
<p dir="ltr">français, le paragraphe se lit de droite à gauche.</p>
<p dir="ltr">párrafo en español va de derecha a izquierda.</p>
<p dir="ltr">हिंदी में पैराग्राफ दाएं से बाएं जाता है।</p>
<p dir="rtl">الفقرة باللغة العربية تُكتب من اليمين إلى اليسار.</p>
<p dir="rtl">הפסקה בעברית עוברת מימין לשמאל.</p>
<p dir="auto">This is mixed text. هذا نص مختلط.</p>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.