Orientare text - CSS-Tricks | Almanah CSS 2025

text-orientationProprietatea în textul CSS se aliniaza într - o linie atunci când se lucrează cu o verticală writing-mode. Practic, rotește fie linia cu 90 ° în sensul acelor de ceasornic pentru a ajuta la controlul modului în care sunt afișate limbile verticale - la fel ca modul în care text-combine-uprightrotește grupurile de caractere dintr-o linie de text într-un script vertical, dar pentru liniile complete de text.

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

Pentru manipularea textului bidirecțional - un bloc care conține atât text de la stânga la dreapta, cât și de la dreapta la stânga, de exemplu - verificați unicode-bidiproprietatea. Este combinat cu directionproprietatea pentru a suprascrie modul în care browserul decide să afișeze textul.

Sintaxă

text-orientation: mixed | upright | sideways

Iniţială: mixed
Se aplică: tuturor elementelor, cu excepția grupurilor de rânduri de tabele, rândurilor, grupurilor de coloane și coloanelor
Moștenit: da
Procente: n / a
Valoare calculată: valoare specificată
Tipul de animație: nu este animabil

Valori

/* 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: Valoare implicită. Caracterele dintr-un script orizontal sunt rotite cu 90 ° în sensul acelor de ceasornic. Caracterele dintr-un script vertical sunt afișate în orientarea lor verticală naturală.
upright: Caracterele dintr-un script orizontal sunt setate în poziția lor verticală orizontală, inclusiv unele glifuri. Deci, în cazul în care un mod de scriere vertical poate roti o linie de text, astfel încât caracterele să fie laterale, această valoare va roti caracterele în sine cu 90 ° până la poziția lor naturală. Rețineți că această valoare forțează directionproprietatea într-o valoare utilizată de ltr, ceea ce înseamnă că toate caracterele sunt tratate ca și cum ar fi într-un mod de scriere de la stânga la dreapta.
sideways: Tot textul într-un mod de scriere verticală este afișat lateral, ca și cum ar fi într-un aspect orizontal, dar întreaga linie este rotită cu 90 ° în sensul acelor de ceasornic.
sideways-right: Unele browsere respectă această valoare ca un alias pentru sidewaysvaloarea păstrată pentru compatibilitatea cu versiunile anterioare.

use-glyph-orientationa fost eliminat ca valoare de cuvânt cheie în decembrie 2015. A fost utilizat pe elemente SVG pentru a defini proprietăți SVG glyph-orientation-verticalși glyph-orientation-horizontalcare sunt acum depreciate. glyph-orientation-verticaleste acum un alias pentru text-orientation.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom	Firefox	IE	Margine	Safari
48	41	Nu	79	10.1 *

Mobil / Tabletă

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

Specificație

Moduri de scriere CSS Nivel 3 (Proiect redactor)

Mai multe informatii

De ce orientarea verticală a textului este un coșmar pentru compatibilitatea browserului încrucișat? de Nikhil - O explicație temeinică a text-orientationși writing-mode.
Creați cu ușurință text lateral utilizând proprietatea CSS „mod scriere” de Adi Purdila - Explorați diferite abordări în plus față de utilizare text-orientation.
2 moduri de a crea text vertical în CSS de către WS Toh - O comparație mai directă între abordările care utilizează writing-modeși text-orientation.
Rotire text de Chris Coyier - O abordare a textului vertical folosind transformîn loc de writing-modesau text-orientation.