(CSS 3 - interpretuje Firefox 41, Opera 35, Chrome 48)

selektor { text-orientation: orientacja }

Tryb pisania w języku CSS pozwala ułożyć w pionie każdy tekst, nawet jeśli nie jest to naturalne ustawienie pisma w wybranym języku. W takim przypadku litery alfabetów wywodzących się z języka łacińskiego będą położone na boku czyli obrócone o kąt 90°. Taki tekst może być jednak trudniejszy do odczytania. Żeby to zrobić, użytkownicy mogą odruchowo przekrzywiać głowę w prawo albo próbować obrócić ekran 😉 Dlatego czasami lepszym wyborem będzie zastosowanie stylu "text-orientation: upright". Dzięki temu kolejne znaki tekstu zostaną ułożone w pionie jeden pod drugim i nie będą obrócone. Może to przynieść lepsze efekty zwłaszcza w przypadku krótkich tekstów, np. jeden lub dwa wyrazy raczej bez żadnych znaków interpunkcyjnych.

Teoretycznie taki sam efekt moglibyśmy uzyskać, jeśli po każdym znaku tekstu po prostu wstawilibyśmy znacznik końca linii. Jednak takie rozwiązanie nie byłoby dobrym pomysłem, ponieważ tak ułożone znaki logicznie nie łączyłyby się w wyrazy. Mogłoby to stanowić problem dla syntezatorów mowy używanych przez osoby niewidome, które zapewne przeliterowałyby taki tekst, zamiast go płynnie odczytać. Negatywne skutki takiego rozwiązania moglibyśmy również odczuć w wyszukiwarkach sieciowych - strona mogłaby w ogóle nie być odnajdywana po wpisaniu ułożonych w taki sposób w pionie słów kluczowych.

W przypadku języków azjatyckich, w których tekst tradycyjnie pisze się z góry na dół, można użyć czcionki, która ma wbudowaną pionową orientację tekstu. Wtedy zarówno w przypadku użycia wartości mixed jak i upright znaki będą ułożone jeden pod drugim i nie zostaną obrócone. Aby wymusić obrócenie, bez względu jakiej czcionki używamy i w jakim języku jest napisany tekst, należy posłużyć się wartością sideways.

Zwracam uwagę, że aby ustawienie orientacji tekstu w ogóle było możliwe, jednocześnie musimy również ustalić jeden z pionowych trybów pisania, tzn. "writing-mode: vertical-lr" albo "writing-mode: vertical-rl". W przeciwnym razie nie zobaczymy żadnych efektów.

Przykład {text-orientation}

Znaki tekstu ułożone w pionie w domyślnej orientacji ("writing-mode: vertical-rl; text-orientation: mixed"):

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

Znaki tekstu ułożone w pionie zawsze jeden pod drugim ("writing-mode: vertical-lr; text-orientation: upright"):

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

Znaki tekstu ułożone w pionie zawsze na boku ("writing-mode: vertical-rl; text-orientation: sideways"):

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-lr;
	text-orientation: upright;
}

otrzymamy:

[Porównaj przykład z rozdziału: Tryb pisania]

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.