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)
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").
<!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:#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>
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
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".
<!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:#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>
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
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".
<!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:#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>
