Orientácia na text - Triky CSS

text-orientationNehnuteľnosť v CSS zarovná text v súlade pri práci s vertikálnou writing-mode. V zásade otáča riadok buď o 90 ° v smere hodinových ručičiek, aby pomohol ovládať, ako sa zobrazujú vertikálne jazyky - podobne ako spôsob otáčania text-combine-uprightskupín znakov v rámci riadku textu vo vertikálnom skripte, ale pre celé riadky textu.

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

Na prácu s obojsmerným textom - blok, ktorý obsahuje napríklad text zľava doprava aj sprava doľava - skontrolujte unicode-bidivlastnosť. Kombinuje sa s directionvlastnosťou, ktorá prepíše, ako sa prehliadač rozhodne zobraziť text.

Syntax

text-orientation: mixed | upright | sideways

Počiatočné: mixed
Vzťahuje sa na: všetky prvky okrem skupín riadkov tabuľky, riadkov, skupín stĺpcov a stĺpcov
Zdedené: áno
Percentá: n / a
Vypočítaná hodnota: zadaná hodnota
Typ animácie: nie je animovateľný

Hodnoty

/* 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: Predvolená hodnota. Znaky v horizontálnom písme sú otočené o 90 ° v smere hodinových ručičiek. Znaky vo zvislom písme sa zobrazujú v prirodzenej zvislej orientácii.
upright: Znaky v horizontálnom písme sú zasadené do svojej prirodzenej vodorovnej zvislej polohy, vrátane niektorých piktogramov. Pokiaľ teda vertikálny režim písania môže otočiť riadok textu tak, aby boli znaky nabok, táto hodnota otočí samotné znaky o 90 ° do ich prirodzenej polohy. Upozorňujeme, že táto hodnota vynúti directionvlastnosť na použitú hodnotu ltr, čo znamená, že so všetkými znakmi sa zaobchádza, akoby boli v režime zápisu zľava doprava.
sideways: Celý text v režime zvislého písania sa zobrazuje nabok, akoby bol v horizontálnom rozložení, ale celý riadok je otočený o 90 ° v smere hodinových ručičiek.
sideways-right: Niektoré prehliadače rešpektujú túto hodnotu ako alias pre sidewayshodnotu uchovanú z dôvodu spätnej kompatibility.

use-glyph-orientationbol odstránený ako hodnota kľúčového slova v decembri 2015. Použil sa na prvky SVG na definovanie vlastností SVG glyph-orientation-verticala glyph-orientation-horizontalktoré sú teraz zastarané. glyph-orientation-verticalje teraz alias pre text-orientation.

Podpora prehliadača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome	Firefox	IE	Hrana	Safari
48	41	Nie	79	10,1 *

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10.0-10.2

Špecifikácia

Režimy písania CSS, úroveň 3 (návrh redaktora)

Viac informácií

Prečo je vertikálna orientácia textu nočnou morou pre kompatibilitu s rôznymi prehliadačmi? Nikhil - dôkladné vysvetlenie text-orientationa writing-mode.
Ľahko vytvárajte bočný text pomocou vlastnosti CSS „režimu písania“ od Adi Purdily - preskúmajte okrem použitia aj rôzne prístupy text-orientation.
2 spôsoby, ako vytvoriť vertikálny text v CSS pomocou WS Toh - priamejšie porovnanie prístupov pomocou writing-modea text-orientation.
Otočenie textu Chris Coyier - prístup k vertikálnemu textu pomocou transformnamiesto writing-modealebo text-orientation.