Ostatnio edytowany:

writing-mode

Autor: Virtual Patriot

Opis właściwości writing-mode

Za pomocą właściwości writing-mode możemy określić tryb zapisu treści interesującego nas elementu HTML.

Wpływ właściwości writing-mode na tryb zapisu treści elementu HTML
writing-mode tryb
horizontal-tb poziomy
vertical-lr pionowy
vertical-rl pionowy
Wpływ właściwości writing-mode na szerokość logiczną elementu HTML
writing-mode szerokość logiczna
horizontal-tb szerokością logiczną jest szerokość
vertical-lr szerokością logiczną jest wysokość
vertical-rl szerokością logiczną jest wysokość
Wpływ właściwości writing-mode na wysokość logiczną elementu HTML
writing-mode wysokość logiczna
horizontal-tb wysokością logiczną jest wysokość
vertical-lr wysokością logiczną jest szerokość
vertical-rl wysokością logiczną jest szerokość
Wpływ właściwości writing-mode na kierunek pisania tekstu elementu HTML
writing-mode kierunek
horizontal-tb od lewej do prawej krawędzi obszaru zawartości
vertical-lr od górnej do dolnej krawędzi obszaru zawartości
vertical-rl od górnej do dolnej krawędzi obszaru zawartości
Wpływ właściwości writing-mode na kierunek układania się kolejnych wierszy treści elementu HTML
writing-mode kierunek
horizontal-tb wzdłuż rozmiaru wysokości (poziomo, od górnej do dolnej krawędzi obszaru zawartości)
vertical-lr wzdłuż rozmiaru szerokości (pionowo, od lewej do prawej krawędzi obszaru zawartości)
vertical-rl wzdłuż rozmiaru szerokości (pionowo, od prawej do lewej krawędzi obszaru zawartości)
Wpływ właściwości writing-mode oraz właściwości direction na to, od której krawędzi obszaru zawartości elementu HTML rozpoczyna się pisanie tekstu elementu HTML
writing-mode direction krawędź
horizontal-tb ltr lewa
horizontal-tb rtl prawa
vertical-lr ltr górna
vertical-lr rtl dolna
vertical-rl ltr górna
vertical-rl rtl dolna

Dodatkowe techniczne informacje o właściwości writing-mode

przeznaczenie

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

dziedziczenie

tak

wartość initial

horizontal-tb

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości writing-mode

Firefox

tak

Google Chrome

tak

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości writing-mode

horizontal-tb

Opis

Wartość horizontal-tb jest domyślną wartością właściwości writing-mode.

Domyślnie element HTML posiada poziomy tryb zapisu treści od górnej do dolnej krawędzi obszaru zawartości.

Cechy wartości horizontal-tb właściwości writing-mode

  • tekst elementu HTML posiada kierunek pisania od lewej do prawej krawędzi obszaru zawartości (wzdłuż rozmiaru szerokości)
  • wiersze przeznaczone na treść elementu HTML układają się w pozycji poziomej od górnej do dolnej krawędzi obszaru zawartości (wzdłuż rozmiaru wysokości)
writing-mode:horizontal-tb; direction:ltr;

graficzne wyjaśnienie działania wartości horizontal-tb właściwości writing-mode

Przykład

  writing-mode:horizontal-tb;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div" posiada poziomy tryb zapisu treści (od górnej do dolnej 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>

vertical-lr

Opis

Za pomocą wartości vertical-lr właściwości writing-mode możemy sprawić, że interesujący nas element HTML będzie posiadał pionowy tryb zapisu treści od lewej do prawej krawędzi obszaru zawartości.

Cechy wartości vertical-lr właściwości writing-mode

  • tekst elementu HTML posiada kierunek pisania od górnej do dolnej krawędzi obszaru zawartości (wzdłuż rozmiaru wysokości)
  • wiersze przeznaczone na treść elementu HTML układają się w pozycji pionowej od lewej do prawej krawędzi obszaru zawartości (wzdłuż rozmiaru szerokości)
writing-mode:vertical-lr; direction:ltr;

graficzne wyjaśnienie działania wartości vertical-lr właściwości writing-mode

Przykład

  writing-mode:vertical-lr;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div" posiada pionowy tryb zapisu treści (od lewej do prawej krawędzi obszaru zawartości przykładowego elementu "div"), ponieważ do wspomnianego elementu "div" została dodana właściwość "writing-mode" wraz z wartością "vertical-lr".

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 {
        writing-mode:vertical-lr;
        -webkit-writing-mode:vertical-lr;
        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>

vertical-rl

Opis

Za pomocą wartości vertical-rl właściwości writing-mode możemy sprawić, że interesujący nas element HTML będzie posiadał pionowy tryb zapisu treści od prawej do lewej krawędzi obszaru zawartości.

Cechy wartości vertical-rl właściwości writing-mode

  • tekst elementu HTML posiada kierunek pisania od górnej do dolnej krawędzi obszaru zawartości (wzdłuż rozmiaru wysokości)
  • wiersze przeznaczone na treść elementu HTML układają się w pozycji pionowej od prawej do lewej krawędzi obszaru zawartości (wzdłuż rozmiaru szerokości)
writing-mode:vertical-rl; direction:ltr;

graficzne wyjaśnienie działania wartości vertical-rl właściwości writing-mode

Przykład

  writing-mode:vertical-rl;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div" posiada pionowy tryb zapisu treści (od prawej do lewej krawędzi obszaru zawartości przykładowego elementu "div"), ponieważ do wspomnianego elementu "div" została dodana właściwość "writing-mode" wraz z wartością "vertical-rl".

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 {
        writing-mode:vertical-rl;
        -webkit-writing-mode:vertical-rl;
        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>