Tekstoriëntatie - CSS-trucs | CSS Almanac 2025

De text-orientationeigenschap in CSS lijnt tekst uit op een regel wanneer u met een verticaal werkt writing-mode. In feite roteert het de regel 90 ° met de klok mee om te helpen bepalen hoe verticale talen worden weergegeven - net zoals de manier waarop text-combine-uprightgroepen tekens binnen een regel tekst in een verticaal script worden geroteerd, maar dan voor volledige regels tekst.

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

Bekijk de unicode-bidieigenschap voor het afhandelen van bidirectionele tekst - een blok dat zowel van links naar rechts als van rechts naar links wordt geschreven . Het wordt gecombineerd met de directioneigenschap om te negeren hoe de browser besluit de tekst weer te geven.

Syntaxis

text-orientation: mixed | upright | sideways

Eerste: mixed
Is van toepassing op: alle elementen behalve tabelrijgroepen, rijen, kolomgroepen en kolommen
Overgenomen: ja
Percentages: nvt
Berekende waarde: gespecificeerde waarde
Animatietype: niet animeerbaar

Waarden

/* 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 Tekens in een horizontaal schrift worden 90 ° met de klok mee gedraaid. Tekens in een verticaal schrift worden weergegeven in hun natuurlijke verticale oriëntatie.
upright Dus waar een verticale schrijfmodus een regel tekst kan draaien zodat de tekens zijwaarts zijn, zal deze waarde de tekens zelf 90 ° naar hun natuurlijke positie draaien. Merk op dat deze waarde de directioneigenschap dwingt tot een gebruikte waarde van ltr, wat betekent dat alle tekens worden behandeld alsof ze in een van links naar rechts schrijfmodus zijn.
sideways
sideways-rightsideways

use-glyph-orientationis verwijderd als sleutelwoordwaarde in december 2015. Het werd gebruikt op SVG-elementen om SVG-eigenschappen te definiëren glyph-orientation-verticalen glyph-orientation-horizontaldie zijn nu verouderd. glyph-orientation-verticalis nu een alias voor text-orientation.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome	Firefox	D.W.Z	Rand	Safari
48	41	Nee	79	10,1 *

Mobiel / tablet

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

Specificatie

CSS-schrijfmodi niveau 3 (concept van de redacteur)

Meer informatie

Waarom is verticale tekstoriëntatie een nachtmerrie voor compatibiliteit tussen browsers? door Nikhil - Een grondige uitleg van text-orientationen writing-mode.
Creëer eenvoudig zijwaartse tekst met behulp van de "schrijfmodus" CSS-eigenschap van Adi Purdila - Verken verschillende benaderingen naast het gebruik van text-orientation.
2 manieren om verticale tekst in CSS te maken door WS Toh - Een meer directe vergelijking tussen benaderingen met writing-modeen text-orientation.
Tekstrotatie door Chris Coyier - Een benadering van verticale tekst met in transformplaats van writing-modeof text-orientation.