# Semantyka tekstu - element "bdi"

W przeglądarce internetowej występuje wiele różnych mechanizmów. Jednym z mechanizmów przeglądarki internetowej jest mechanizm odpowiadający za automatyczne wykrywanie kierunku, jaki powinien posiadać tekst znajdujący się w zawartości poszczególnych elementów HTML.

Tekst składający się wyłącznie ze znaków należących do alfabetu łacińskiego posiada kierunek od lewej do prawej (`ltr`).

Przykład:

```html
<p>
  Słonecznik Biały
</p>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FFiQbgz56prZxPvbIfPI3%2FZrzut%20ekranu%202025-09-24%20o%2015.43.05.png?alt=media&#x26;token=7706cecc-9b0e-47e7-b8d4-dfb635d90cc1" alt=""><figcaption></figcaption></figure>

Tekst składający się wyłącznie ze znaków należących do alfabetu arabskiego posiada kierunek od prawej do lewej (`rtl`).

Przykład:

```html
<p>
  عباد الشمس أبيض
</p>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FkKzjRrsAF1TxZ5mBbWnG%2FZrzut%20ekranu%202025-09-24%20o%2015.43.37.png?alt=media&#x26;token=19459a73-756a-4c5f-bdac-7788df83b96f" alt=""><figcaption></figcaption></figure>

Gdy tekst składa się ze znaków należących do różnych alfabetów, z cyfr oraz ze znaków nienależących do żadnego alfabetu, wtedy w niektórych sytuacjach mechanizm przeglądarki internetowej odpowiadający za automatyczne wykrywanie kierunku, jaki powinien posiadać tekst znajdujący się w zawartości poszczególnych elementów HTML, może nie spełniać naszych oczekiwań.

Przykład:

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FU59h653bRfujC6lXzmkO%2FZrzut%20ekranu%202025-09-24%20o%2015.44.11.png?alt=media&#x26;token=02c537dc-b58a-4955-a667-ed7d8e34bc77" alt=""><figcaption></figcaption></figure>

W takiej sytuacji treść sprawiającą problemy należy odizolować od pozostałej treści znajdującej się w zawartości danego elementu HTML za pomocą elementu bdi.

Przykład:

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FwtvWGcDDwdGmkmVEB34C%2FZrzut%20ekranu%202025-09-24%20o%2015.44.34.png?alt=media&#x26;token=2c76f91a-11b2-4cdc-b348-9afb5200022a" alt=""><figcaption></figcaption></figure>
