Tag <bdo> (skrót od Bi‑Directional Override) to mało znany, ale kluczowy element HTML, który pozwala wymusić konkretny kierunek wyświetlania tekstu, nadpisując domyślny algorytm Unicode. Jest szczególnie przydatny w aplikacjach wielojęzycznych, gdzie mieszają się teksty o kierunkach LTR (od lewej do prawej, jak w polskim) i RTL (od prawej do lewej, jak w arabskim czy hebrajskim).
Czym dokładnie jest tag <bdo> i po co go używać?
Standardowy algorytm Unicode (Bidi – Bi‑Directional) automatycznie dostosowuje kierunek tekstu na podstawie skryptu znaków. Na przykład w zdaniu mieszającym polski i hebrajski litery hebrajskie naturalnie układają się od prawej do lewej, co potrafi zaburzyć czytelność. Tag <bdo> przejmuje kontrolę nad tym procesem, wymuszając stały kierunek dla zawartej treści – niezależnie od otaczającego kontekstu.
Dlaczego to ważne w programowaniu webowym?
Oto kluczowe powody, dla których warto sięgnąć po <bdo>:
- responsywność międzynarodowa – tworzysz stronę dla globalnej publiczności?
<bdo>zapobiega „odwróceniu” fragmentów tekstu w komentarzach użytkowników, nazwach produktów czy cytatach; - dostępność – czytelnicy korzystający z czytników ekranu otrzymują treść w przewidywalnym, logicznym porządku;
- SEO i semantyka – poprawny kierunek ułatwia wyszukiwarkom przetwarzanie treści w językach RTL.
Element jest liniowy (inline), wymaga tagu otwierającego i zamykającego oraz obsługuje globalne atrybuty HTML, takie jak class, id, style czy zdarzenia (np. onclick).
Podstawowa składnia i wymagany atrybut dir
Tag <bdo> wymaga atrybutu dir o jednej z dwóch wartości: ltr (z lewej do prawej, typowe dla języków europejskich) lub rtl (z prawej do lewej, m.in. dla arabskiego, hebrajskiego, perskiego).
Prosty przykład
Oto minimalne użycie z wymuszeniem kierunku RTL:
<p>Normalny tekst LTR: To jest po lewej.</p>
<bdo dir="rtl">Odwrócony tekst RTL: To jest po prawej.</bdo>
Efekt – fraza „Odwrócony tekst RTL: To jest po prawej” zostanie wyświetlona od prawej do lewej.
Praktyczne przykłady użycia <bdo>
1. Mieszane języki w jednym akapicie
W treściach UGC (np. recenzje) łatwo o nieczytelne mieszanie LTR i RTL. Tak to uporządkujesz:
<p>Recenzja: <bdo dir="rtl">هذا منتج رائع</bdo> – super produkt!</p>
Efekt – „هذا منتج رائع” pozostanie w pełni RTL, nie mieszając się z polskim.
2. Lista z nazwami w różnych kierunkach
Gdy w jednym komponencie pojawiają się nazwy miast w różnych alfabetach, zastosuj <bdo> lokalnie przy fragmencie RTL:
<ul>
<li>Polska: Warszawa</li>
<li><bdo dir="rtl">إسرائيل: القدس</bdo> (Jerozolima)</li>
<li>Anglia: London</li>
</ul>
Lista zachowa czytelność – arabska nazwa nie „wywróci” układu.
3. Z dodatkowymi stylami CSS
Możesz stylować <bdo> tak jak inne elementy inline. Przykład:
<bdo dir="rtl" style="color: red; font-weight: bold; background: yellow;">Ważny komunikat RTL!</bdo>
Podgląd efektu – tekst jest odwrócony kierunkowo, czerwony, pogrubiony i na żółtym tle.
4. Zaawansowany przykład – cytat wielojęzyczny
W dłuższych cytatach wymuszaj kierunek tylko tam, gdzie to konieczne:
<blockquote>
<span><bdo dir="rtl">القرآن الكريم</bdo>:</span>
<span><bdo dir="rtl">اقْرَأْ بِاسْمِ رَبِّكَ الَّذِي خَلَقَ</bdo></span>
<p>(Tłumaczenie: Czytaj w imię Pana swego, który stworzył.)</p>
</blockquote>
Takie podejście jest idealne dla blogów edukacyjnych czy religijnych.
Gdzie można umieścić <bdo>? Reguły zagnieżdżania
<bdo> to element inline, więc możesz go umieszczać w typowych elementach blokowych i tekstowych, takich jak p, div, h1–h6, li, blockquote czy wewnątrz span.
Wewnątrz <bdo> możesz umieszczać inne elementy inline, np. strong, em, a, img, span, code, sub, sup – byle treść pozostawała spójna semantycznie.
Ważne – nie ma potrzeby owijać <bdo> w span tylko dlatego, że jest inline. Unikaj zagnieżdżania <bdo> w <bdo>, ponieważ może to prowadzić do konfliktów kierunku.
Powiązane tagi: <bdo> vs. <bdi>
Te dwa elementy często są mylone. Oto ich różnice ujęte w syntetycznej tabeli:
| Tag | Zastosowanie | Różnica |
|---|---|---|
<bdo> |
wymuszenie kierunku (override) | stały, narzucony kierunek dla całej zawartości. |
<bdi> |
izolacja kierunku (isolate) | automatyczne dopasowanie kierunku bez mieszania z otoczeniem (np. dla nicków użytkowników). |
Przykład różnicy
Porównanie praktyczne prezentuje się następująco:
<p>Użytkownik <bdi>عمر</bdi> napisał: Super!</p>
<!-- Automatycznie RTL bez wpływu na resztę -->
<bdo dir="rtl">عمر napisał: Super!</bdo>
<!-- Wymuszony RTL -->
Kompatybilność przeglądarek i dobre praktyki
<bdo> jest wspierany we wszystkich nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge), a pod spodem działa dzięki regule CSS unicode-bidi: bidi-override oraz kierunkowi nadanemu przez dir.
Najlepsze praktyki
Stosuj <bdo> zgodnie z poniższymi wskazówkami:
- zawsze ustawiaj atrybut
dir="ltr"lubdir="rtl"– bez tego element nie zadziała poprawnie, - łącz z atrybutem
langdla lepszej semantyki, np.<bdo dir="rtl" lang="ar">tekst</bdo>, - manipuluj kierunkiem dynamicznie w JavaScript, np.
element.dir = 'rtl';, - testuj na urządzeniach mobilnych, bo zmiana kierunku wpływa na układ i nawigację,
- unikaj nadużywania – stosuj, gdy domyślny algorytm Unicode Bidi zawodzi.
Alternatywa w CSS
Możesz też skorzystać z CSS (np. w komponentach): direction: rtl;, jednak <bdo> działa głębiej – na poziomie algorytmu Unicode, lokalnie nadpisując kierunek dla konkretnego fragmentu.
Zastosowania w projektach JavaScript i frameworkach
W React, Vue i Angular
Przykładowy komponent React, który dobiera kierunek na podstawie języka wejściowego:
// Przykład w React
function Quote({ text, lang }) {
const dir = lang === 'ar' ? 'rtl' : 'ltr';
return <bdo dir={dir}>{text}</bdo>;
}
<Quote text="مرحبا" lang="ar" />