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.

Ponadto właściwość writing-mode ma wpływ na:

  • położenie początkowej oraz końcowej krawędzi blokowej elementu HTML
  • położenie lewej oraz prawej krawędzi liniowej elementu HTML
  • położenie górnej oraz dolnej krawędzi blokowej elementu HTML
  • szerokość oraz wysokość logiczną elementu HTML
Informacje dodatkowe

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

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

pozycja

dowolna

dziedziczenie

tak

wartość initial

horizontal-tb

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości writing-mode

Firefox

tak

Google Chrome

tak

Safari

tak

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 (a co za tym idzie również elementy HTML tworzące blok treści) układają się w pozycji poziomej od górnej do dolnej krawędzi obszaru zawartości (wzdłuż rozmiaru wysokości)

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 {
        width:350px;
        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 (a co za tym idzie również elementy HTML tworzące blok treści) układają się w pozycji pionowej od lewej do prawej krawędzi obszaru zawartości (wzdłuż rozmiaru szerokości)
  • niektóre cechy elementu HTML posiadają odwrócone zasady działania, przykładowo:
    • zasady dotyczące ustalania przez przeglądarkę internetową automatycznego rozmiaru szerokości obszaru zawartości elementu HTML od tej pory dotyczą ustalania przez przeglądarkę internetową automatycznego rozmiaru wysokości obszaru zawartości elementu HTML
    • zasady dotyczące ustalania przez przeglądarkę internetową automatycznego rozmiaru wysokości obszaru zawartości elementu HTML od tej pory dotyczą ustalania przez przeglądarkę internetową automatycznego rozmiaru szerokości obszaru zawartości elementu HTML
    • sytuacje gdy wartości procentowe rozmiaru wysokości obszaru zawartości elementu HTML nie mogą zostać obliczone przez przeglądarkę internetową od tej pory dotyczą rozmiaru szerokości obszaru zawartości elementu HTML, a nie rozmiaru wysokości obszaru zawartości elementu HTML
    • zasady dotyczące ustalania przez przeglądarkę internetową automatycznego rozmiaru lewego bądź prawego zewnętrznego marginesu elementu HTML od tej pory dotyczą ustalania przez przeglądarkę internetową automatycznego rozmiaru górnego bądź dolnego zewnętrznego marginesu elementu HTML
    • zasady dotyczące ustalania przez przeglądarkę internetową automatycznego rozmiaru górnego bądź dolnego zewnętrznego marginesu elementu HTML od tej pory dotyczą ustalania przez przeglądarkę internetową automatycznego rozmiaru lewego bądź prawego zewnętrznego marginesu elementu HTML
    • zasady dotyczące przylegania górnego bądź dolnego zewnętrznego marginesu elementu HTML od tej pory dotyczą również przylegania lewego bądź prawego zewnętrznego marginesu elementu HTML

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;
        width:350px;
        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 (a co za tym idzie również elementy HTML tworzące blok treści) układają się w pozycji pionowej od prawej do lewej krawędzi obszaru zawartości (wzdłuż rozmiaru szerokości)
  • niektóre cechy elementu HTML posiadają odwrócone zasady działania, przykładowo:
    • zasady dotyczące ustalania przez przeglądarkę internetową automatycznego rozmiaru szerokości obszaru zawartości elementu HTML od tej pory dotyczą ustalania przez przeglądarkę internetową automatycznego rozmiaru wysokości obszaru zawartości elementu HTML
    • zasady dotyczące ustalania przez przeglądarkę internetową automatycznego rozmiaru wysokości obszaru zawartości elementu HTML od tej pory dotyczą ustalania przez przeglądarkę internetową automatycznego rozmiaru szerokości obszaru zawartości elementu HTML
    • sytuacje gdy wartości procentowe rozmiaru wysokości obszaru zawartości elementu HTML nie mogą zostać obliczone przez przeglądarkę internetową od tej pory dotyczą rozmiaru szerokości obszaru zawartości elementu HTML, a nie rozmiaru wysokości obszaru zawartości elementu HTML
    • zasady dotyczące ustalania przez przeglądarkę internetową automatycznego rozmiaru lewego bądź prawego zewnętrznego marginesu elementu HTML od tej pory dotyczą ustalania przez przeglądarkę internetową automatycznego rozmiaru górnego bądź dolnego zewnętrznego marginesu elementu HTML
    • zasady dotyczące ustalania przez przeglądarkę internetową automatycznego rozmiaru górnego bądź dolnego zewnętrznego marginesu elementu HTML od tej pory dotyczą ustalania przez przeglądarkę internetową automatycznego rozmiaru lewego bądź prawego zewnętrznego marginesu elementu HTML
    • zasady dotyczące przylegania górnego bądź dolnego zewnętrznego marginesu elementu HTML od tej pory dotyczą również przylegania lewego bądź prawego zewnętrznego marginesu elementu HTML

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;
        width:350px;
        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>