Tekstorientering - CSS-tricks

Den text-orientationejendom i CSS Justerer tekst i en linje, når man arbejder med en lodret writing-mode. Dybest set roterer den enten linjen 90 ° med uret for at hjælpe med at kontrollere, hvordan lodrette sprog vises - ligesom den måde, hvorpå text-combine-uprightroterer grupper af tegn inden for en tekstlinje i et lodret script, men for fulde tekstlinjer.

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

Til håndtering af tovejs tekst - en blok, der f.eks. Indeholder både venstre mod højre og højre mod venstre tekst - tjek unicode-bidiejendommen. Det kombineres med directionegenskaben for at tilsidesætte, hvordan browseren beslutter at vise teksten.

Syntaks

text-orientation: mixed | upright | sideways

Initial: mixed
Gælder for: alle elementer undtagen række i grupper, rækker, kolonnegrupper og kolonner
Arvet: ja
Procentdele: ikke oplyst
Beregnet værdi: specificeret værdi
Animationstype: ikke animerbar

Værdier

/* 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: Standardværdi. Tegn i et vandret script drejes 90 ° med uret. Tegn i et lodret script vises i deres naturlige lodrette retning.
upright: Tegn i et vandret script indstilles i deres naturlige vandrette lodrette position, inklusive nogle tegn. Så hvor en lodret skrivemåde kan rotere en tekstlinje, så tegnene sidelæns, roterer denne værdi tegnene selv 90 ° til deres naturlige position. Bemærk, at denne værdi tvinger directionegenskaben til en brugt værdi på ltr, hvilket betyder at alle tegn behandles som om de er i en skriv-til-venstre-til-tilstand.
sideways: Al tekst i lodret skrivetilstand vises sidelæns, som om den var i vandret layout, men hele linjen roteres 90 ° med uret.
sideways-right: Nogle browsere respekterer denne værdi som et alias for den sidewaysværdi, der bevares for bagudkompatibilitet.

use-glyph-orientationblev fjernet som en nøgleordsværdi i december 2015. Det blev brugt på SVG-elementer til at definere SVG-egenskaber, glyph-orientation-verticalog glyph-orientation-horizontalsom nu er udfaset. glyph-orientation-verticaler nu et alias for text-orientation.

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome	Firefox	IE	Edge	Safari
48	41	Ingen	79	10,1 *

Mobil / tablet

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

Specifikation

CSS-skrivemetoder niveau 3 (redaktionens kladde)

Mere information

Hvorfor lodret tekstorientering er et mareridt for Cross Browser-kompatibilitet? af Nikhil - En grundig forklaring af text-orientationog writing-mode.
Opret let sidelæns tekst ved hjælp af "skrivetilstand" CSS-egenskab af Adi Purdila - Udforsk forskellige tilgange ud over at bruge text-orientation.
2 måder at oprette lodret tekst i CSS af WS Toh - En mere direkte sammenligning mellem tilgange ved hjælp af writing-modeog text-orientation.
Tekstrotation af Chris Coyier - En tilgang til lodret tekst ved hjælp af i transformstedet for writing-modeeller text-orientation.