Tryb pisania {writing-mode}

CSS 3

selektor { writing-mode: tryb }

W wielu językach azjatyckich tekst podczas pisania tradycyjnie układany jest pionowo, gdzie kolejne linijki są położone obok siebie. Na przykład w językach pochodzenia mongolskiego linijki ułożone są pionowo obok siebie od lewej do prawej strony - tzn. pierwsza linijka tekstu znajduje się przy lewej krawędzi kartki, a ostatnia - przy prawym jej brzegu. Pionowe ułożenie tekstu możemy uzyskać właśnie dzięki użyciu stylu "writing-mode: vertical-lr" (języki mongolskie) albo "writing-mode: vertical-rl" (języki Han).

W większości języków wywodzących się z alfabetu łacińskiego tekst piszemy w poziomych linijkach ułożonych jedna pod drugą. Jednak nawet w tym przypadku czasem może się przydać takie nienaturalne ułożenie tekstu w pionie. Na przykład wyobraźmy sobie tabelę z wieloma kolumnami, w których znajdują się krótkie wartości - np. małe liczby całkowite. Jeśli do takiej tabeli dodamy nagłówek, może okazać się, że tabela stanie się bardzo szeroka, przez co trudno będzie ją czytać. W takiej sytuacji czasami lepiej jest wpisać komórki nagłówkowe pionowo, dzięki czemu cała tabela przyjmie bardziej zwarte rozmiary.

Warto pamiętać, że nawet w przypadku pionowego ułożenia tekstu elementy takie jak <img> (obrazki) i <iframe> (ramki lokalne) nadal będą ułożone w standardowej orientacji poziomej. Jest to celowy zabieg, ponieważ jeśli chcemy, aby tekst w takich elementach był ułożony pionowo, możemy po prostu przygotować taki obrazek albo nadać taki tryb dla dokumentu HTML wyświetlanego wewnątrz ramki lokalnej.

Inaczej sprawa się ma w przypadku elementów zastępowanych powiązanych z tekstem, które nie są ładowane z zewnętrznego pliku. W takiej sytuacji ułożenie tekstu w ich obrębie powinno być zgodne z ustalonym trybem pisania. To zachowanie nie jest jednak wymagane, więc nie wszystkie przeglądarki muszą go obsługiwać. Działa to w ten sposób np. w przeglądarce Firefox, ale co ciekawe nawet wtedy po kliknięciu w ułożony pionowo element <select> rozwija się on w tradycyjnym kierunku - tzn. do dołu lub do góry 🙁

Jeśli chcesz, aby znaki tekstu były ułożone pionowo jeden pod drugim, a nie obrócone na bok, zobacz rozdział: Orientacja tekstu.

Przykład {writing-mode}

Tekst ułożony w pionie z kolejnymi linijkami obok siebie od prawej do lewej strony ("writing-mode: vertical-rl"):

To jest pierwsza linijka,
to jest druga linijka,
a to jest kolejna linijka.

Tekst ułożony w pionie z kolejnymi linijkami obok siebie od lewej do prawej strony ("writing-mode: vertical-lr"):

To jest pierwsza linijka,
to jest druga linijka,
a to jest kolejna linijka.

Po wpisaniu następującej reguły w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

th {
	writing-mode: vertical-rl;
}

otrzymamy:

Przypominam, że własności writing-mode nie można przypisać do wierszy tabeli, ale można to zrobić w odniesieniu do komórek tabeli (th, td).

Zwróć uwagę, że mimo pionowego ułożenia tekstu, orientacja obrazka nie zmienia się:

To jest pierwsza linijka...

...a to jest kolejna linijka.

Dla porównania to samo, ale w standardowym ułożeniu tekstu (poziomo):

To jest pierwsza linijka...

...a to jest kolejna linijka.

Ponadto niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy:

Jeśli powyżej widzisz pola formularza ułożone poziomo, to znaczy, że Twoja przeglądarka nie obsługuje pionowego ich ułożenia.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari	Poziom wsparcia min. 2,5 roku
writing-mode: wartość	48 2016-01-20	41 2015-09-22	12 2015-07-29	35 2016-02-02	10.1 2017-03-27	100%
writing-mode: horizontal-tb	48 2016-01-20	43 2015-12-15	12 2015-07-29	35 2016-02-02	9 2015-09-30	100%
writing-mode: vertical-lr	48 2016-01-20	43 2015-12-15	12 2015-07-29	35 2016-02-02	9 2015-09-30	100%
writing-mode: vertical-rl	48 2016-01-20	43 2015-12-15	12 2015-07-29	35 2016-02-02	9 2015-09-30	100%