Autor publikacji
Virtual Patriot - Administrator

direction

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości direction

Za pomocą właściwości direction możemy określić, od której krawędzi obszaru zawartości interesującego nas elementu HTML powinno rozpocząć się układanie wyrazów tekstu tego elementu HTML.

Informacje dodatkowe

właściwość direction wraz z właściwością writing-mode mają wpływ na położenie początkowej oraz końcowej krawędzi liniowej elementu HTML

właściwość direction dodana do tabeli HTML (elementu table) wpływa na to, od której krawędzi obszaru zawartości tabeli HTML powinno rozpocząć się układanie kolumn tejże tabeli HTML

Informacje techniczne o właściwości direction

przeznaczenie

element HTML każdego typu, lecz nie element HTML typu table-column-group, table-column

pozycja

dowolna

dziedziczenie

tak

wartość initial

ltr

wyjątki initial

jakikolwiek element HTML, którego atrybut dir wskazuje na wartość rtl

animowanie

tak (animacja schodkowa)

Interpretacja właściwości direction

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości direction

ltr

Wyjaśnienie

Wartość ltr jest domyślną wartością właściwości direction.

Domyślnie układanie wyrazów tekstu elementu HTML rozpoczyna się od tej krawędzi obszaru zawartości elementu HTML, która znajduje się przy lewej krawędzi liniowej elementu HTML.

Przykład

  direction:ltr;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Układanie wyrazów tekstu przykładowego elementu "div" rozpoczęło się od lewej krawędzi obszaru zawartości przykładowego elementu "div".

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;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

rtl

Wyjaśnienie

Za pomocą wartości rtl właściwości direction możemy sprawić, że układanie wyrazów tekstu interesującego nas elementu HTML rozpocznie się od tej krawędzi obszaru zawartości interesującego nas elementu HTML, która znajduje się przy prawej krawędzi liniowej elementu HTML.

Przykład

  direction:rtl;
وقد وضعت هذا النص يتم عرضها في متصفح في محتويات هذا شعبة المثالي فقط لأغراض العرض

Układanie wyrazów tekstu przykładowego elementu "div" rozpoczęło się od prawej krawędzi obszaru zawartości przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "direction" wraz z wartością "rtl".

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      وقد وضعت هذا النص يتم عرضها في متصفح في محتويات هذا شعبة المثالي فقط لأغراض العرض
    </div>

  </body>
</html>