Ostatnio edytowany:

unicode-bidi

Autor: Virtual Patriot

Opis właściwości unicode-bidi

Za pomocą właściwości unicode-bidi możemy określić w jaki sposób jeden z mechanizmów przeglądarki internetowej powinien rozwiązać problem dwukierunkowości tekstu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości unicode-bidi

przeznaczenie

element HTML każdego typu (wartość embed dla elementu HTML występującego na poziomie tekstu)

dziedziczenie

nie

wartość initial

normal

wyjątki initial

jakikolwiek element HTML posiadający atrybut dir wraz z wartością ltr lub rtl lub auto

animowanie

nie (animacja nieciągła)

Interpretacja właściwości unicode-bidi

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości unicode-bidi

normal

Opis

Wartość normal jest domyślną wartością właściwości unicode-bidi.

Domyślnie jeden z mechanizmów przeglądarki internetowej rozwiązuje problem dwukierunkowości tekstu elementu HTML korzystając z góry ustalonego oraz wbudowanego algorytmu.

Przykład

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

Problem dwukierunkowości tekstu przykładowego elementu "div" został rozwiązany przez jeden z mechanizmów przeglądarki internetowej na podstawie z góry ustalonego oraz wbudowanego algorytmu.

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        direction:rtl;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

embed

Opis

Za pomocą wartości embed właściwości unicode-bidi możemy sprawić, że z góry ustalony oraz wbudowany algorytm służący do rozwiązywania problemu dwukierunkowości tekstu elementu HTML zadziała również dla interesującego nas elementu HTML występującego na poziomie tekstu.

Przykład

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

Problem dwukierunkowości tekstu przykładowego elementu "span" został rozwiązany przez jeden z mechanizmów przeglądarki internetowej na podstawie z góry ustalonego oraz wbudowanego algorytmu, ponieważ do wspomnianego elementu "span" została dodana właściwość "unicode-bidi" wraz z wartością "embed".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        font-size:1.3em;
      }

      div > span {
        unicode-bidi:embed;
        direction:rtl;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

bidi-override

Opis

Za pomocą wartości bidi-override właściwości unicode-bidi możemy sprawić, że z góry ustalony oraz wbudowany algorytm służący do rozwiązywania problemu dwukierunkowości tekstu elementu HTML będzie ignorowany przez interesujący nas element HTML.

Przykład

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

Problem dwukierunkowości tekstu przykładowego elementu "div" nie został rozwiązany przez jeden z mechanizmów przeglądarki internetowej na podstawie z góry ustalonego oraz wbudowanego algorytmu, ponieważ do wspomnianego elementu "div" została dodana właściwość "unicode-bidi" wraz z wartością "bidi-override".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        unicode-bidi:bidi-override;
        direction:rtl;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>