HTML dir Global Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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