Poznaj Programowanie

Tagi HTML: bdi

Piotr Grochal 6 min. czytania

W dzisiejszym web developmencie, gdzie strony docierają do globalnej publiczności, obsługa tekstów o różnej kierunkowości jest nieodzowna. Element <bdi> (bi-directional isolate) izoluje fragment tekstu od otoczenia i zapobiega błędom w renderowaniu mieszanych języków LTR/RTL (np. polski + arabski).

Stosując <bdi>, chronisz układ przed „przeciekaniem” kierunków i nieprzewidywalnymi przetasowaniami cyfr, separatorów oraz znaków neutralnych.

Czym dokładnie jest <bdi> i dlaczego jest potrzebny?

Standardowy algorytm dwukierunkowości (Unicode Bidirectional Algorithm) automatycznie wyznacza kierunek tekstu na podstawie pierwszego silnego znaku. Gdy mieszamy języki (np. arabski w polskim akapicie), znaki neutralne dziedziczą kierunek dominującego fragmentu, co może skutkować chaotycznym układem.

<bdi> nakazuje przeglądarce traktować zawartość w pełnej izolacji – jak osobny kontekst tekstowy. Domyślnie działa jak unicode-bidi: isolate, co resetuje kierunkowość wewnątrz elementu.

Kluczowe cechy elementu <bdi>:

Poniżej znajdziesz najważniejsze informacje, które pomogą szybko ocenić, kiedy sięgnąć po <bdi>:

  • kategoria – element treści frazowej (phrasing content);
  • kontekst użycia – może być potomkiem treści przepływowej (flow), np. <p>, <li>, <div>; sam może zawierać elementy frazowe, np. <span>, <strong>;
  • znaczniki – wymagane są otwierający i zamykający: <bdi>...</bdi>;
  • sposób wyświetlania w CSS – domyślnie display: inline oraz izolacja dwukierunkowości (unicode-bidi: isolate w obsługiwanych przeglądarkach);
  • atrybuty globalne – obsługuje class, id, style itp.;
  • atrybut specjalny – dir do sterowania kierunkiem (ltr, rtl, auto);
  • wsparcie przeglądarek – pełne w nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge).

Element nie wymaga żadnych dzieci ani atrybutów – jest prosty, semantyczny i wstecznie bezpieczny.

Atrybut dir – precyzyjne sterowanie kierunkiem

Domyślne dir="auto" pozwala przeglądarce określić kierunek na podstawie pierwszego silnego znaku. Gdy chcesz wymusić konkretne zachowanie, skorzystaj z poniższych opcji:

Wartość Opis Kiedy używać
ltr Kierunek od lewej do prawej (typowy dla alfabetów łacińskich). Nazwy własne LTR w tekście RTL, np. angielskie marki w arabskim opisie.
rtl Kierunek od prawej do lewej. Arabskie/hebrajskie nazwy w kontekście LTR.
auto Automatyczne wykrywanie na podstawie pierwszego silnego znaku. Treści nieznane z góry, np. UGC (komentarze, nicki).

Przykłady użycia <bdi> w praktyce

1. Podstawowy przykład – nazwa produktu z arabskim tekstem

Bez <bdi> mieszany tekst potrafi się rozsypać, np. separatory i cyfry przyjmują kierunek RTL:

<p>Słonecznik Biały / عباد الشمس أبيض: 100g.</p>

Rezultat (błędny) – Słonecznik Biały / 100g :يبأ سملا دادعأ عباد (cyfry i separator „wciągnięte” w RTL).

Zastosuj izolację <bdi>, aby zachować poprawny układ:

<p><bdi>عباد الشمس أبيض</bdi>: 100g.</p>

Rezultat (poprawny) – عباد الشمس أبيض : 100g (RTL-tekst izolowany, cyfry i separator pozostają LTR).

2. Wymuszenie kierunku atrybutem dir

Wymuś kierunek LTR dla całego fragmentu, nawet jeśli zawiera znaki RTL:

<p>Słonecznik Biały / <bdi dir="ltr">Słonecznik Biały / عباد الشمس أبيض</bdi>: 100g.</p>

Rezultat – wszystko wewnątrz <bdi> jest LTR: Słonecznik Biały / عباد الشمس أبيض : 100g.

Analogicznie, wymuś kierunek RTL dla całego fragmentu:

<p><bdi dir="rtl">Słonecznik Biały / عباد الشمس أبيض</bdi>: 100g.</p>

Rezultat – całość RTL; to podejście bywa nienaturalne dla łacińskich nazw, ale ilustruje efekt wymuszenia.

3. Lista rankingowa z UGC (np. forum, tabela wyników)

Bez izolacji imion/nazwisk znaki neutralne (np. dwukropek, cyfry) mogą się przestawiać. Poniżej porównanie – najpierw błędne podejście, potem poprawne:

<ul>
<li>Użytkownik <span>إيان</span>: 90 punktów</li>
<!-- Może zostać wyświetlone jako "90 :إيان użytkownik" -->
</ul>
<ul>
<li>Użytkownik <bdi>hrefs</bdi>: 60 punktów</li>
<li>Użytkownik <bdi>jdoe</bdi>: 80 punktów</li>
<li>Użytkownik <bdi>إيان</bdi>: 90 punktów</li>
</ul>

Rezultat – izolowane nazwy nie zaburzają kolejności: cyfry i dwukropki pozostają w oczekiwanym kierunku.

4. Zaawansowany przykład – zawody sportowe + CSS

Poniżej przykład inspirowany MDN. W razie potrzeby jawnie dodaj izolację w CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body { font-family: sans-serif; padding: 20px; }
ul { list-style: none; margin: 0; padding: 0; }
.name { background: #f0f0f0; padding: 2px 5px; }
bdi { unicode-bidi: isolate; } /* Dla starszych silników */
</style>
</head>
<body>
<h2>World Wrestling Championships</h2>
<ul>
<li><bdi class="name">Henrietta Boffin</bdi>: 1st place</li>
<li><bdi class="name">Jerry Cruncher</bdi>: 2nd place</li>
<li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
<li><span class="name" dir="auto">سما</span>: 5th place</li> <!-- Alternatywa bez bdi -->
</ul>
</body>
</html>

Wynik – każde imię jest izolowane, więc nie dochodzi do „przeciekania” kierunków we frazach z dwukropkami i liczebnikami.

Powiązane elementy i alternatywy

Dla pełnego obrazu warto znać również pokrewne mechanizmy i zamienniki:

  • <bdo> – wymusza kierunek, ale nie izoluje; stosuj do stałego tekstu, np. <bdo dir="rtl">tekst</bdo>;
  • dir="auto" na <span> – częściowe wsparcie, lecz bez pełnej izolacji unicode-bidi;
  • CSS unicode-bidi: isolate lub plaintext – techniczna alternatywa, ale semantyczny <bdi> lepiej współpracuje z technologiami asystującymi.

Najlepsze praktyki i przypadki użycia

W tych scenariuszach <bdi> rozwiązuje typowe problemy z mieszanym tekstem:

  • UGC – komentarze, nicki, recenzje; domyślnie owijaj w <bdi dir="auto">;
  • e‑commerce – nazwy produktów, waluty i SKU w miksturze LTR/RTL;
  • międzynarodowe aplikacje – fora, social media, gry online;
  • stylizacja – element jest inline, styluj jak <span>; unikaj float/block bez zmiany display;
  • testy – w DevTools sprawdzaj Rendered View; w Chrome włącz tryb RTL: chrome://flags/#enable-rtl;
  • dostępność – poprawia odczyt fragmentów RTL dla czytników ekranu;
  • wydajność – minimalny narzut, natywna obsługa we współczesnych przeglądarkach.

W projektach React/Vue/Angular warto opakowywać dynamiczne łańcuchy w <bdi> po stronie serwera lub klienta, aby uniknąć niespodzianek w UI.

Ćwiczenie dla Ciebie – stwórz krótką listę zakupów z mieszanymi językami i przetestuj wersję z/bez <bdi>.

Źródła i inspiracje: WHATWG, MDN, polskie tutoriale. Testuj w najnowszych przeglądarkach.