Usmerjenost na besedilo - CSS-triki

text-orientationHotel v besedilu CSS poravnana v liniji pri delu z navpično writing-mode. V bistvu vrti bodisi črto za 90 ° v smeri urnega kazalca, da pomaga nadzirati prikaz navpičnih jezikov - podobno kot način text-combine-uprightvrtenja skupin znakov znotraj vrstice besedila v navpičnem scenariju, vendar za celotne vrstice besedila.

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

Za obdelavo dvosmernega besedila - bloka, ki na primer vsebuje besedilo od leve proti desni in besedilo od desne proti levi - preverite unicode-bidilastnost. V kombinaciji z directionlastnostjo preglasi način, kako se brskalnik odloči za prikaz besedila.

Sintaksa

text-orientation: mixed | upright | sideways

Začetno: mixed
Velja za: vse elemente, razen skupin vrstic tabel, vrstic, skupin stolpcev in stolpcev
Podedovano: da
Odstotki: n / a
Izračunana vrednost: določena vrednost
Vrsta animacije: ni animirana

Vrednote

/* 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: Privzeta vrednost. Znaki v vodoravni pisavi se zasukajo za 90 ° v smeri urnega kazalca. Znaki v navpični pisavi so prikazani v naravni navpični usmerjenosti.
upright: Znaki v vodoravni pisavi so postavljeni v naravni vodoravni pokončni položaj, vključno z nekaj glifi. Torej, kadar lahko vertikalni način pisanja vrti črto besedila tako, da so znaki postrani, bo ta vrednost same znake zasukala za 90 ° v njihov naravni položaj. Upoštevajte, da ta vrednost prisili directionlastnost v uporabljeno vrednost ltr, kar pomeni, da so vsi znaki obravnavani, kot da so v načinu pisanja od leve proti desni.
sideways: Celotno besedilo v načinu navpičnega pisanja je prikazano postrani, kot da bi bilo v vodoravni postavitvi, vendar je celotna vrstica zasukana za 90 ° v smeri urnega kazalca.
sideways-right: Nekateri brskalniki to vrednost spoštujejo kot vzdevek sidewaysvrednosti, ki je shranjena za povratno združljivost.

use-glyph-orientationje bil odstranjen kot vrednost ključne besede decembra 2015. Uporabljal se je za elemente SVG za določanje lastnosti SVG glyph-orientation-verticalin glyph-orientation-horizontalso zdaj zastareli. glyph-orientation-verticalje zdaj vzdevek za text-orientation.

Podpora brskalnika

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome	Firefox	IE	Rob	Safari
48	41	Ne	79	10,1 *

Mobilni / tablični računalnik

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

Specifikacija

Načini pisanja CSS 3. stopnja (urednikov osnutek)

Več informacij

Zakaj je vertikalna orientacija besedila nočna mora za združljivost med brskalniki? avtor Nikhil - Temeljita razlaga text-orientationin writing-mode.
Preprosto ustvarite postrani besedilo z uporabo lastnosti CSS, ki jo je napisal Adi Purdila v načinu za pisanje - poleg uporabe raziščite tudi različne pristope text-orientation.
2 načina za ustvarjanje navpičnega besedila v CSS s strani WS Toh - Neposrednejša primerjava med pristopi z uporabo writing-modein text-orientation.
Vrtenje besedila Chrisa Coyierja - pristop k navpičnemu besedilu, ki uporablja transformnamesto writing-modeali text-orientation.