Tekst - CSS
Tryb pisania {writing-mode}
Co zrobić, aby tekst na stronie był ułożony pionowo - z góry na dół?
(CSS 3 - interpretuje Firefox 41, Opera 35, Chrome 48)
selektor { writing-mode: tryb }thead, tbody, tfoot), grup kolumn tabeli (colgroup), wierszy tabeli (tr) i kolumn tabeli (col) [zobacz: Wstawianie stylów].Natomiast jako "tryb" należy podać:
- horizontal-tb - linijki tekstu ułożone poziomo jedna pod drugą (domyślnie)
- vertical-rl - linijki tekstu ułożone pionowo obok siebie od prawej do lewej strony (ang. right-to-left)
- vertical-lr - linijki tekstu ułożone pionowo obok siebie od lewej do prawej strony (ang. left-to-right)
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:
th {
writing-mode: vertical-rl;
}otrzymamy:
| Kolumna 1 | Kolumna 2 | Kolumna 3 | |
|---|---|---|---|
| Wiersz 1 | 1 | 2 | 3 |
| Wiersz 2 | 4 | 5 | 6 |
| Wiersz 3 | 7 | 8 | 9 |
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.