Tekstorientering - CSS-triks | CSS-almanakk 2025

Den text-orientationeiendom i CSS Justerer tekst på en linje når du arbeider med en vertikal writing-mode. I utgangspunktet roterer den enten linjen 90 ° med klokken for å kontrollere hvordan vertikale språk vises - omtrent som måten text-combine-uprightroterer grupper av tegn i en tekstlinje i et loddrett skript, men for hele tekstlinjer.

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

For å håndtere toveis tekst - for eksempel en blokk som inneholder både venstre til høyre og høyre til venstre tekst - sjekk ut unicode-bidieiendommen. Det kombineres med directioneiendommen for å overstyre hvordan nettleseren bestemmer seg for å vise teksten.

Syntaks

text-orientation: mixed | upright | sideways

Første: mixed
Gjelder: alle elementer unntatt tabellradgrupper, rader, kolonnegrupper og kolonner
Arvet: ja
Prosentandeler: ikke relevant
Beregnet verdi: spesifisert verdi
Animasjonstype: ikke animerbar

Verdier

/* 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: Standardverdi. Tegn i et horisontalt skript roteres 90 ° med klokken. Tegn i et loddrett skript vises i sin naturlige vertikale retning.
upright: Tegn i et horisontalt skript er satt i sin naturlige vannrette oppreist stilling, inkludert noen tegn. Så hvor en vertikal skrivemodus kan rotere en tekstlinje slik at tegn er sidelengs, vil denne verdien rotere tegnene selv 90 ° til deres naturlige posisjon. Merk at denne verdien tvinger directionegenskapen til en brukt verdi av ltr, noe som betyr at alle tegn behandles som om de er i en skrivemodus fra venstre til høyre.
sideways: All tekst i loddrett skrivemodus vises sidelengs, som om den var i horisontal oppsett, men hele linjen roteres 90 ° med klokken.
sideways-right: Noen nettlesere respekterer denne verdien som et alias for sidewaysverdien som holdes for bakoverkompatibilitet.

use-glyph-orientationble fjernet som en søkeordverdi i desember 2015. Den ble brukt på SVG-elementer for å definere SVG-egenskaper glyph-orientation-verticalog glyph-orientation-horizontalsom nå er utfaset. glyph-orientation-verticaler nå et alias for text-orientation.

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome	Firefox	DVS	Kant	Safari
48	41	Nei	79	10,1 *

Mobil / nettbrett

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

Spesifikasjon

CSS-skrivemodus Nivå 3 (redaktørens utkast)

Mer informasjon

Hvorfor vertikal tekstorientering er et mareritt for kompatibilitet mellom nettlesere? av Nikhil - En grundig forklaring på text-orientationog writing-mode.
Lag enkelt tekst fra siden ved hjelp av CSS-egenskapen "skrivemodus" av Adi Purdila - Utforsk forskjellige tilnærminger i tillegg til å bruke text-orientation.
2 måter å lage vertikal tekst i CSS av WS Toh - En mer direkte sammenligning mellom tilnærminger ved bruk av writing-modeog text-orientation.
Tekstrotasjon av Chris Coyier - En tilnærming til vertikal tekst ved hjelp av i transformstedet for writing-modeeller text-orientation.