Orijentacija teksta - CSS-trikovi

text-orientationNekretnina u CSS poravnava tekst u skladu prilikom rada s vertikalnim writing-mode. U osnovi, okreće liniju za 90 ° u smjeru kazaljke na satu kako bi pomogao kontrolirati prikaz okomitih jezika - slično kao i način text-combine-uprightokretanja skupina znakova unutar retka teksta u vertikalnoj skripti, ali za pune retke teksta.

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

Za rukovanje dvosmjernim tekstom - blok koji sadrži i tekst slijeva udesno i udesno ulijevo - pogledajte unicode-bidisvojstvo. Kombinira se sa directionsvojstvom da nadjača način na koji preglednik odluči prikazati tekst.

Sintaksa

text-orientation: mixed | upright | sideways

Inicijal: mixed
Odnosi se na: sve elemente, osim grupa redaka tablice, redaka, grupa stupaca i stupaca
Naslijeđeno: da
Postoci: n / a
Izračunata vrijednost: navedena vrijednost
Vrsta animacije: nije animirana

Vrijednosti

/* 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: Zadana vrijednost. Znakovi u vodoravnoj skripti rotiraju se za 90 ° u smjeru kazaljke na satu. Znakovi u vertikalnoj skripti prikazuju se u prirodnoj vertikalnoj orijentaciji.
upright: Znakovi u vodoravnoj skripti postavljaju se u prirodni vodoravni uspravni položaj, uključujući neke znakove. Dakle, tamo gdje vertikalni način pisanja može zakrenuti liniju teksta tako da su znakovi postrance, ova će vrijednost okretati same znakove za 90 ° u njihov prirodni položaj. Imajte na umu da ova vrijednost prisiljava directionsvojstvo na korištenu vrijednost ltr, što znači da se svi znakovi tretiraju kao da su u načinu pisanja slijeva udesno.
sideways: Sav tekst u načinu okomitog pisanja prikazuje se postrance, kao da je u vodoravnom rasporedu, ali cijela je linija zakrenuta za 90 ° u smjeru kazaljke na satu.
sideways-right: Neki preglednici poštuju ovu vrijednost kao zamjensko ime za sidewaysvrijednost koja je zadržana radi povratne kompatibilnosti.

use-glyph-orientationuklonjena je kao vrijednost ključne riječi u prosincu 2015. Korištena je na SVG elementima za definiranje SVG svojstava glyph-orientation-verticali glyph-orientation-horizontalkoja su sada zastarjela. glyph-orientation-verticalje sada pseudonim za text-orientation.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom	Firefox	IE	Rub	Safari
48	41	Ne	79	10,1 *

Mobitel / tablet

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

Specifikacija

Načini pisanja CSS-a razina 3 (urednikov nacrt)

Više informacija

Zašto je vertikalna orijentacija teksta noćna mora za kompatibilnost više preglednika? Nikhil - Temeljito objašnjenje text-orientationi writing-mode.
Jednostavno stvorite bočni tekst pomoću CSS svojstva "način pisanja" Adija Purdile - Istražite različite pristupe uz upotrebu text-orientation.
2 načina za stvaranje vertikalnog teksta u CSS-u od strane WS Toh - Izravnija usporedba pristupa pomoću writing-modei text-orientation.
Rotacija teksta Chrisa Coyiera - pristup vertikalnom tekstu koji koristi transformumjesto writing-modeili text-orientation.