`<bdi> și <bdo>` în HTML

Controlează direcția textului: bdi izolează un text cu direcție necunoscută (de exemplu un nume arab), iar bdo forțează o direcție.

Sintaxă tag

<bdi>نور</bdi>
<bdo dir="rtl">text</bdo>

Ce face `<bdi> și <bdo>`

Unele limbi, ca araba sau ebraica, se scriu de la dreapta la stânga (RTL). Când amesteci un astfel de text cu text românesc, browserul poate muta greșit cifrele și semnele de punctuație din jur.

<bdi> (bidirectional isolate) izolează un fragment a cărui direcție nu o știi dinainte, de obicei un nume introdus de utilizatori. Browserul îi calculează direcția separat, fără să strice textul din jur.

<bdo> (bidirectional override) forțează o direcție, indiferent de caractere. Atributul dir este obligatoriu: dir="rtl" sau dir="ltr". Se folosește rar, de exemplu pentru a arăta textul inversat.

Atribute

Atribut	Descriere
`dir`	Obligatoriu pe `<bdo>`: `rtl` (dreapta-stânga) sau `ltr` (stânga-dreapta). Pe `<bdi>`, implicit este `auto`.

Exemple

Exemplul 1: Clasament cu nume în arabă, izolate cu <bdi>

Fără <bdi>, punctajul de după numele arab ar fi afișat în partea greșită.

<ul>
  <li>Utilizator <bdi>Ana Popescu</bdi>: 120 puncte</li>
  <li>Utilizator <bdi>إيمان</bdi>: 95 puncte</li>
</ul>

Ce afișează browserul

• Utilizator Ana Popescu: 120 puncte
• Utilizator إيمان: 95 puncte
(numele arab apare de la dreapta la stânga, iar „: 95 puncte” rămâne după el)

Exemplul 2: Text inversat cu <bdo dir=”rtl”>

Literele românești sunt afișate în ordine inversă, pentru că direcția este forțată.

<p>Normal: Iași</p>
<p>Forțat RTL: <bdo dir="rtl">Iași</bdo></p>