<bdi>
Izoluje fragment tekstu o nieznanym kierunku pisma, np. nazwę użytkownika zapisaną po arabsku.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p>Ranking tygodnia:</p>
<ol>
<li><bdi>Karolina</bdi>: 120 pkt</li>
<li><bdi>سلمى</bdi>: 95 pkt</li>
<li><bdi>נועה</bdi>: 80 pkt</li>
</ol>
<p>Bez izolacji: سلمى: 95 pkt</p>W ostatnim akapicie liczba punktów przeskoczyła przed imię, bo przeglądarka uznała ją za część arabskiego tekstu.
Definicja i zastosowanie
#Element <bdi> (od angielskiego bidirectional isolate) izoluje fragment tekstu, którego kierunek pisma nie jest znany z góry. Typowy przykład to nazwy użytkowników, tytuły produktów czy komentarze, które mogą być napisane zarówno po polsku, jak i po arabsku albo hebrajsku, czyli od prawej do lewej.
Bez izolacji przeglądarka traktuje taki fragment jako część otaczającego zdania, a algorytm ustalania kierunku potrafi poprzestawiać sąsiednie znaki. W przykładowym rankingu liczba punktów przeskakuje wtedy przed arabskie imię. <bdi> zamyka tekst w osobnym „pudełku”, więc nie wpływa on na otoczenie.
Kierunek tekstu wewnątrz <bdi> przeglądarka ustala sama, na podstawie pierwszego znaku o określonym kierunku, tak jakby element miał atrybut dir="auto". Jeśli chcesz wymusić konkretny kierunek, użyj <bdo>.
Składnia
#<bdi>tekst o nieznanym kierunku</bdi>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
bdi {
unicode-bidi: isolate;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Opakowuj w
<bdi>wszystkie dane od użytkowników, które wstawiasz w środek zdania: nazwy, tytuły, komentarze. <bdi>sam wykrywa kierunek tekstu, a<bdo>narzuca go na siłę. Przy treściach od użytkowników prawie zawsze potrzebujesz tego pierwszego.- W polach formularzy podobny efekt daje globalny atrybut
dir="auto".
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.