Textorientering - CSS-tricks | CSS Almanack 2025

Den text-orientationegendom i CSS Justerar text i en linje när man arbetar med en vertikal writing-mode. I grund och botten roterar den antingen raden 90 ° medurs för att hjälpa till att kontrollera hur vertikala språk visas - ungefär som hur text-combine-uprightroterar grupper av tecken inom en textrad i ett vertikalt skript, men för hela textrader.

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

För att hantera dubbelriktad text - till exempel ett block som innehåller både vänster till höger och höger till vänster-text - kolla in unicode-bidiegenskapen. Det kombineras med directionegenskapen för att åsidosätta hur webbläsaren väljer att visa texten.

Syntax

text-orientation: mixed | upright | sideways

Första: mixed
Gäller för: alla element utom tabellradgrupper, rader, kolumngrupper och kolumner
Ärvt: ja
Procentandelar: ej tillämpligt
Beräknat värde: specificerat värde
Animationstyp: inte animerbar

Värden

/* 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ärde. Tecken i ett horisontellt skript roteras 90 ° medurs. Tecken i ett vertikalt skript visas i sin naturliga vertikala orientering.
upright: Tecken i ett horisontellt skript ställs in i sin naturliga horisontella upprätta position, inklusive några tecken. Så där ett vertikalt skrivläge kan rotera en textrad så att tecken är i sidled, roterar detta värde tecknen själva 90 ° till sin naturliga position. Observera att detta värde tvingar directionegenskapen till ett använt värde på ltr, vilket innebär att alla tecken behandlas som om de är i ett skrivläge från vänster till höger.
sideways: All text i vertikalt skrivläge visas i sidled, som om den var i en horisontell layout, men hela linjen roteras 90 ° medurs.
sideways-right: Vissa webbläsare respekterar detta värde som ett alias för det sidewaysvärde som hålls för bakåtkompatibilitet.

use-glyph-orientationtogs bort som ett nyckelordsvärde i december 2015. Det användes på SVG-element för att definiera SVG-egenskaper glyph-orientation-verticaloch glyph-orientation-horizontalsom nu är utfasade. glyph-orientation-verticalär nu ett alias för text-orientation.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom	Firefox	IE	Kant	Safari
48	41	Nej	79	10,1 *

Mobil / surfplatta

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

Specifikation

CSS-skrivlägen nivå 3 (redaktionens utkast)

Mer information

Varför är vertikal textorientering en mardröm för kompatibilitet mellan webbläsare? av Nikhil - En grundlig förklaring av text-orientationoch writing-mode.
Skapa enkelt sidledes text med hjälp av CSS-egenskapen "skrivläge" av Adi Purdila - Utforska olika tillvägagångssätt förutom att använda text-orientation.
2 sätt att skapa vertikal text i CSS av WS Toh - En mer direkt jämförelse mellan tillvägagångssätt med writing-modeoch text-orientation.
Textrotation av Chris Coyier - En metod för vertikal text med transformistället för writing-modeeller text-orientation.