Ostatnio edytowany:

bdi

Autor: Virtual Patriot

Przeznaczenie elementu bdi

Element bdi reprezentuje zawartość, którą powinna być treść, którą chcemy odizolować od treści reprezentowanej przez zawartość, która opływa dany element bdi, ponieważ istnieje duże prawdopodobieństwo, że jeden z mechanizmów przeglądarki internetowej odpowiedzialny za automatyczne wykrywanie kierunku tekstu wykona błędnie wspomnianą czynność.

Dodatkowe techniczne informacje o elemencie bdi

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst frazowany

    Przykładowy Kod HTML

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

    Kontekstem zewnętrznym przykładowego elementu "bdi" jest element "p". Wspomniany element "p" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "p", jest prawidłowym kontekstem zewnętrznym dla elementu "bdi".

kontekst wewnętrzny
  • zawartość frazowana

    Przykładowy Kod HTML

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

    Kontekstem wewnętrznym przykładowego elementu "bdi" jest wyłącznie tekst. Wspomniany tekst jest jednym z elementów, które należą do kategorii zawartość frazowana, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "عباد الشمس أبيض", jest prawidłowym kontekstem wewnętrznym dla elementu "bdi".

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <bdi> ... </bdi>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline

Dodatkowe domyślne reguły CSS elementu bdi

/* brak */

Interpretacja elementu bdi

Firefox

tak

Google Chrome

tak

Safari

nie

Opera

tak

Internet Explorer

nie

Edge

nie

Opis atrybutów elementu bdi

dir

Przeznaczenie atrybutu dir

Atrybut dir wykorzystany wraz z elementem bdi określa kierunek dla tekstu, który znajduje się w zawartości danego elementu bdi.

Wartość domyślna

auto (w każdej sytuacji)

Wartości atrybutu dir

ltr

Wartość ltr oznacza tekst napisany od lewej do prawej.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

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

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

  </body>
</html>

Rezultat

(Słonecznik Biały) عباد الشمس أبيض: 100g.

(Słonecznik Biały) عباد الشمس أبيض: 100g.

Tekst znajdujący się w zawartości przykładowego elementu "bdi" został wyświetlony w kierunku od lewej do prawej, ponieważ do wspomnianego elementu "bdi" został dodany atrybut "dir" wraz z wartością "ltr".

rtl

Wartość rtl oznacza tekst napisany od prawej do lewej.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

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

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

  </body>
</html>

Rezultat

(Słonecznik Biały) عباد الشمس أبيض: 100g.

(Słonecznik Biały) عباد الشمس أبيض: 100g.

Tekst znajdujący się w zawartości przykładowego elementu "bdi" został wyświetlony w kierunku od prawej do lewej, ponieważ do wspomnianego elementu "bdi" został dodany atrybut "dir" wraz z wartością "rtl".

auto

Wartość auto oznacza, że przeglądarka internetowa sama określi kierunek tekstu na podstawie pierwszego napotkanego znaku należącego do jakiegokolwiek istniejącego alfabetu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

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

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

  </body>
</html>

Rezultat

(Słonecznik Biały) عباد الشمس أبيض: 100g.

(Słonecznik Biały) عباد الشمس أبيض: 100g.

Przeglądarka internetowa sama określiła kierunek tekstu na podstawie pierwszego napotkanego znaku należącego do jakiegokolwiek istniejącego alfabetu oraz tworzącego tekst znajdujący się w zawartości przykładowego elementu "bdi", ponieważ do wspomnianego elementu "bdi" został dodany atrybut "dir" wraz z wartością "auto".