HTML dir Attribute

HTML dir Attribute

The HTML dir global attribute specifies the direction in which text should be displayed. It can define left-to-right or right-to-left text direction, or allow the browser to determine the direction automatically from the content.

Syntax

The dir attribute is added to an HTML element and assigned a text direction value.

<p dir="rtl">Text displayed from right to left.</p>

The specified direction applies to the element's text and can also affect descendant elements that do not establish their own direction.

Attribute Values

The dir attribute is an enumerated attribute with three values: ltr, rtl, and auto.

Global Attribute

The dir attribute is a global attribute and can be used on HTML elements where text direction needs to be specified.

<html lang="en" dir="ltr">

<div dir="rtl">Right-to-left content</div>

<p dir="auto">Text direction determined automatically.</p>

Setting dir on the <html> element establishes the base direction for the document.

The ltr Value

The ltr value specifies left-to-right text direction.

<p dir="ltr">This text is displayed from left to right.</p>

Left-to-right direction is appropriate for languages such as English, Spanish, and French.

The rtl Value

The rtl value specifies right-to-left text direction.

<p dir="rtl">مرحبا بالعالم</p>

Right-to-left direction is used for languages such as Arabic and Hebrew. The dir attribute identifies the direction of the content independently of the language identified by the lang attribute.

The auto Value

The auto value tells the browser to determine the direction from the element's content. The browser generally bases the direction on the first character with a strong directional value.

<p dir="auto">مرحبا بالعالم</p>

This can be useful for content whose direction is not known in advance, such as text entered by users.

Direction Inheritance

Text direction established with dir can be inherited by descendant elements that do not specify their own direction.

<div dir="rtl">
  <h2>مرحبا</h2>
  <p>This paragraph uses the direction established by its parent.</p>
</div>

A descendant can establish a different direction by specifying its own dir value.

<div dir="rtl">
  <p>Right-to-left content</p>
  <p dir="ltr">Left-to-right content</p>
</div>

dir and CSS

HTML dir expresses the direction of the content as part of the document's semantics. CSS also provides properties that affect text direction and layout, but HTML dir should be used when the direction is an inherent characteristic of the content.

CSS can also select elements according to their direction with the :dir() pseudo-class.

:dir(rtl) {
  text-align: right;
}

Common Mistakes

Do not confuse dir with the lang attribute. The lang attribute identifies the language of content, while dir specifies its text direction.

Do not assume that every language uses left-to-right text. Content written in right-to-left languages should have an appropriate direction established.

Do not use dir="auto" merely as a substitute for identifying a known direction. It is most useful when the direction of the content cannot be known in advance.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The dir global attribute is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the dir Attribute

The example compares left-to-right, right-to-left, and automatically determined text direction.

Summary

The HTML dir global attribute specifies the direction of text. The ltr value establishes left-to-right direction, rtl establishes right-to-left direction, and auto allows the browser to determine the direction from the content. Direction can be inherited by descendant elements and can be overridden when a different direction is required.