Orientamento del testo - Trucchi CSS

Sommario

La text-orientationproprietà in CSS allinea il testo in una riga quando si lavora con una verticale writing-mode. Fondamentalmente, ruota la linea di 90 ° in senso orario per aiutare a controllare come vengono visualizzate le lingue verticali, proprio come il modo in cui text-combine-uprightruota i gruppi di caratteri all'interno di una riga di testo in uno script verticale, ma per righe intere di testo.

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

Per la gestione del testo bidirezionale, ad esempio un blocco che contiene testo da sinistra a destra e da destra a sinistra, controlla la unicode-bidiproprietà. È combinato con la directionproprietà per sovrascrivere il modo in cui il browser decide di visualizzare il testo.

Sintassi

text-orientation: mixed | upright | sideways

Iniziale: mixed
Si applica a: tutti gli elementi tranne i gruppi di righe della tabella, le righe, i gruppi di colonne e le colonne
Ereditato: sì
Percentuali: n / a
Valore calcolato: valore specificato
Tipo di animazione: non animabile

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: Valore predefinito. I caratteri in uno script orizzontale vengono ruotati di 90 ° in senso orario. I caratteri in uno script verticale vengono visualizzati nel loro naturale orientamento verticale.
upright: I caratteri in una scrittura orizzontale vengono impostati nella loro posizione verticale orizzontale naturale, inclusi alcuni glifi. Quindi, se una modalità di scrittura verticale può ruotare una riga di testo in modo che i caratteri siano di lato, questo valore ruoterà i caratteri stessi di 90 ° nella loro posizione naturale. Si noti che questo valore forza la directionproprietà in un valore usato di ltr, il che significa che tutti i caratteri vengono trattati come se fossero in una modalità di scrittura da sinistra a destra.
sideways: Tutto il testo in modalità di scrittura verticale viene visualizzato lateralmente, come se fosse in un layout orizzontale, ma l'intera linea viene ruotata di 90 ° in senso orario.
sideways-right: Alcuni browser rispettano questo valore come alias per il sidewaysvalore mantenuto per compatibilità con le versioni precedenti.

use-glyph-orientationè stato rimosso come valore di parola chiave nel dicembre 2015. È stato utilizzato su elementi SVG per definire le proprietà SVG glyph-orientation-verticale glyph-orientation-horizontalche ora sono deprecati. glyph-orientation-verticalè ora un alias per text-orientation.

Supporto del browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo	Firefox	IE	Bordo	Safari
48	41	No	79	10.1 *

Mobile / Tablet

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

Specifica

Modalità di scrittura CSS livello 3 (bozza del redattore)

Maggiori informazioni

Perché l'orientamento del testo verticale è un incubo per la compatibilità cross browser? di Nikhil - Una spiegazione approfondita di text-orientatione writing-mode.
Crea facilmente testo lateralmente utilizzando la proprietà CSS "modalità di scrittura" di Adi Purdila - Esplora diversi approcci oltre all'uso text-orientation.
2 modi per creare testo verticale in CSS di WS Toh - Un confronto più diretto tra gli approcci che utilizzano writing-modee text-orientation.
Rotazione del testo di Chris Coyier - Un approccio al testo verticale che utilizza transforminvece di writing-modeo text-orientation.