Orientacja tekstu - CSS-Tricks

text-orientationNieruchomość w CSS wyrównuje tekst w linii podczas pracy z pionowym writing-mode. Zasadniczo obraca albo linię o 90 ° w prawo, aby pomóc kontrolować sposób wyświetlania języków pionowych - podobnie jak sposób text-combine-uprightobracania grup znaków w wierszu tekstu w skrypcie pionowym, ale dla pełnych wierszy tekstu.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

Na przykład do obsługi tekstu dwukierunkowego - bloku zawierającego zarówno tekst pisany od lewej do prawej, jak i od prawej do lewej - sprawdź unicode-bidiwłaściwość. Jest łączony z directionwłaściwością, aby zastąpić sposób wyświetlania tekstu przez przeglądarkę.

Składnia

text-orientation: mixed | upright | sideways

Inicjał: mixed
Dotyczy: wszystkich elementów z wyjątkiem grup wierszy tabeli, wierszy, grup kolumn i kolumn
Odziedziczone: tak
Procenty: nie dotyczy
Wartość obliczona: określona wartość
Typ animacji: bez animacji

Wartości

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Wartość domyślna. Znaki pisma poziomego są obracane o 90 ° zgodnie z ruchem wskazówek zegara. Znaki pisma pionowego są wyświetlane w naturalnej orientacji pionowej.
upright: Znaki pisma poziomego są ustawiane w swojej naturalnej poziomej pozycji pionowej, w tym niektóre glify. Tak więc, gdy pionowy tryb pisania może obrócić wiersz tekstu tak, że znaki są ustawione bokiem, ta wartość obróci same znaki o 90 ° do ich naturalnego położenia. Zauważ, że ta wartość wymusza na tej directionwłaściwości używaną wartość ltr, co oznacza, że wszystkie znaki są traktowane tak, jakby znajdowały się w trybie pisania od lewej do prawej.
sideways: Cały tekst w trybie pisania w pionie jest wyświetlany bokiem, tak jakby był w układzie poziomym, ale cała linia jest obrócona o 90 ° w prawo.
sideways-right: Niektóre przeglądarki traktują tę wartość jako alias sidewayswartości zachowanej w celu zapewnienia zgodności wstecznej.

use-glyph-orientationzostał usunięty jako wartość słowa kluczowego w grudniu 2015 r. Został użyty w elementach SVG do zdefiniowania właściwości SVG glyph-orientation-verticali glyph-orientation-horizontalktóre są obecnie przestarzałe. glyph-orientation-verticaljest teraz aliasem dla text-orientation.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom	Firefox	TO ZNACZY	Brzeg	Safari
48	41	Nie	79	10,1 *

Telefon komórkowy / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10,0-10,2

Specyfikacja

Tryby pisania CSS, poziom 3 (wersja robocza redaktora)

Więcej informacji

Dlaczego pionowa orientacja tekstu jest koszmarem dla zgodności z różnymi przeglądarkami? Nikhil - Dokładne wyjaśnienie text-orientationi writing-mode.
Z łatwością twórz tekst ukośny za pomocą właściwości CSS „trybu pisania” Adi Purdila - oprócz używania, poznaj różne podejścia text-orientation.
2 sposoby tworzenia pionowego tekstu w CSS według WS Toh - Bardziej bezpośrednie porównanie między podejściami używającymi writing-modei text-orientation.
Obrót tekstu autorstwa Chrisa Coyiera - Podejście do tekstu pionowego przy użyciu transformzamiast writing-modelub text-orientation.