Ostatnio edytowany:

direction

Autor: Virtual Patriot

Opis 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.

Ponadto 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.

Dodatkowo 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.

Dodatkowe techniczne informacje 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

nie (animacja nieciągła)

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

Opis

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:#CBFFFF;
      }
    </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

Opis

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

  <body>

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

  </body>
</html>