dir
The global dir attribute sets the direction in which text is written: left to right, right to left, or automatically detected from the content.
What you will learn
- What the
dirglobal attribute controls - How to choose
ltr,rtl, orauto - Why language uses
langand visual layout uses CSS
Basic examples
<p dir="ltr">English text</p>
<p dir="rtl" lang="ar">نص عربي</p>
<p dir="auto">Text with an unknown direction</p>ltr means left to right, rtl means right to left, and auto asks the browser to determine a direction from the content. The direction can be inherited by descendants unless a nested element sets its own value.
Do not confuse direction with language
The dir attribute describes writing direction; it does not identify the language. Use lang for language, such as lang="ar" or lang="en". Use CSS for visual alignment that is not part of the text direction.
Use direction-sensitive layout carefully
When a page supports both directions, prefer logical CSS properties such as margin-inline-start and padding-inline-end. Test mixed-direction text such as names, URLs, numbers, and code.