Atributul dir în HTML

<p dir="rtl" lang="ar">مرحبا</p>
<input dir="auto">

Ce face Atributul dir

Atributul dir spune browserului în ce direcție se scrie textul. Româna, engleza și majoritatea limbilor folosesc ltr (stânga spre dreapta), iar araba și ebraica folosesc rtl (dreapta spre stânga).

Valoarea auto (adăugată în HTML5) lasă browserul să decidă după primul caracter cu direcție puternică din conținut. Este utilă pentru texte introduse de utilizatori, de exemplu comentarii sau nume, despre care nu știi dinainte în ce limbă sunt.

Direcția schimbă alinierea textului, ordinea coloanelor în tabele și poziția barei de derulare. Pentru a izola doar o bucată scurtă de text cu direcție necunoscută în interiorul unui rând, folosește <bdi>.

Atribute

Atribut	Descriere
ltr	De la stânga la dreapta (implicit pentru majoritatea paginilor).
rtl	De la dreapta la stânga.
auto	Browserul alege direcția după conținut.

Exemple

Exemplul 1: Un paragraf în arabă într-o pagină românească

Paragraful arab are dir="rtl", deci se aliniază la dreapta și semnele de punctuație ajung la locul corect.

<p>Mesajul primit de la colegul din Dubai:</p>
<p dir="rtl" lang="ar">شكرا على المساعدة!</p>

Ce afișează browserul

Mesajul primit de la colegul din Dubai:
                                  !شكرا على المساعدة
(al doilea rând este aliniat la dreapta, iar semnul ! apare la capătul din stânga)

Exemplul 2: Câmp de comentariu cu direcție automată

Cu dir="auto", câmpul se aliniază singur la dreapta dacă utilizatorul începe să scrie în ebraică sau arabă.

<label for="comentariu">Comentariu</label>
<textarea id="comentariu" dir="auto" rows="2"></textarea>

Ce afișează browserul

Comentariu
[Foarte util, mulțumesc!        ] (scris în română: aliniat la stânga)
[        שלום, תודה רבה] (scris în ebraică: aliniat la dreapta)

Greșeli frecvente

• Folosirea dir="rtl" doar pentru a alinia un text la dreapta. Pentru aliniere folosește CSS (text-align: right); dir schimbă și ordinea caracterelor neutre.
• Folosirea proprietății CSS direction în locul atributului. Direcția ține de conținut, nu de aspect: pune-o în HTML cu dir, ca să se păstreze și fără CSS.

Comenzi înrudite

• Atributul lang: Declară limba conținutului unui element, pentru pronunția corectă în cititoarele de ecran, despărțirea în silabe, traducere și SEO.
• <textarea>: Zonă de introducere a textului pe mai multe rânduri (multiline text box), cu redimensionare automată în browser.
• <p>: Definește un paragraf de text; element de tip bloc, separat automat de restul conținutului prin spațiu vertical.