HTML dir Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The dir HTML global attribute specifies the text direction of the element's content. It can be used on any HTML element, but it is especially useful for elements that contain text in multiple languages or mixed text directions.

The dir attribute can have three values:

ltr: Left-to-right text direction. This is the default value.
rtl: Right-to-left text direction.
auto: The user agent decides the text direction, based on the content.

For example, the following code would specify that the content of the <p> element is in a right-to-left text direction:

<p dir="rtl">This is some right-to-left text.</p>

The dir attribute can be overridden by the CSS properties direction and unicode-bidi.

Here is an example of how to use the dir attribute to create a two-column layout with one column in left-to-right text direction and the other column in right-to-left text direction:

<div style="display: flex; flex-direction: row;">
  <div dir="ltr">This is some left-to-right text.</div>
  <div dir="rtl">This is some right-to-left text.</div>
</div>

The dir attribute is an important tool for creating web pages that are accessible to users who speak languages that use different text directions.

Syntax

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

Values

ltrDetermines the direction of text from left to right. This is the default value.
rtlDetermines the direction of the text from right to left.
autoThe direction of the test is determined automatically by the browser based on the content (recommended only if the direction of the text is unknown).

Example

HTML

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

<p dir="rtl">This text will be displayed from right to left. </p> 

<p dir="auto">The direction of the test is determined automatically by the browser.</p>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML dir global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.