HTML dir Global Attribute
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
<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>
Browser Support
The following table will show you the current browser support for the HTML dir
Global Attribute.
Desktop | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 14th October 2023