Proprietà CSS text-orientation
Usa la proprietà CSS text-orientation per definire l'orientamento dei caratteri in una riga di contenuto. Valori ed esempi pratici.
La proprietà CSS text-orientation controlla come i singoli caratteri sono orientati all'interno di una riga quando il testo scorre in verticale. È lo strumento da utilizzare quando si impaginano scritture dell'Asia orientale (cinese, giapponese, coreano) nel loro tradizionale flusso verticale, oppure quando si desidera un'etichetta o un'intestazione verticale in un design con script latino.
Da sola, text-orientation non ha effetto — entra in gioco solo quando la direzione della riga è verticale. Tale direzione si imposta con la proprietà writing-mode (ad esempio vertical-rl o vertical-lr). Pensa alle due proprietà come a una divisione del lavoro: writing-mode stabilisce in quale direzione scorre la riga, mentre text-orientation decide come viene ruotato ogni glifo lungo quella riga.
Questo capitolo illustra cosa fa ciascun valore, quando preferirne uno rispetto a un altro, le criticità relative al supporto dei browser e degli esempi eseguibili che puoi modificare.
Perché usarla
- Tipografia CJK verticale. Per impostazione predefinita (
mixed), i caratteri latini mescolati a testo cinese o giapponese verticale vengono ruotati di 90°, risultando di difficile lettura.uprightli mantiene dritti nella posizione corretta. - Intestazioni verticali decorative ed etichette laterali. Titoli in stile costa, tag nella barra laterale ed etichette degli assi dei grafici nei design con script latino si leggono spesso meglio in posizione verticale o di lato.
- Rendering fedele di contenuti multi-scrittura in cui numeri, acronimi o prestiti linguistici compaiono all'interno di testo verticale.
Valori in sintesi
text-orientation accetta cinque valori relativi alla scrittura — mixed, upright, sideways, sideways-right e use-glyph-orientation — più le parole chiave globali initial e inherit. Tutti i valori relativi alla scrittura si applicano solo nelle modalità tipografiche verticali.
Alcune note storiche utili: il vecchio valore sideways-left è stato rimosso dalla specifica, sideways-right è ora mantenuto solo come alias di sideways, e i casi d'uso non verticali sono stati spostati nei valori sideways-lr / sideways-rl della proprietà writing-mode.
La proprietà text-orientation ha effetto solo quando writing-mode è verticale (vertical-rl o vertical-lr). In un normale layout orizzontale viene ignorata.
| Valore iniziale | mixed |
|---|---|
| Si applica a | Tutti gli elementi, eccetto i gruppi di righe di tabella, le righe, i gruppi di colonne e le colonne. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.textOrientation = "upright"; |
Sintassi
Valori CSS text-orientation
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;Esempio della proprietà text-orientation con il valore "mixed":
Esempio di codice CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Con mixed, le lettere latine rimangono dritte mentre la riga stessa scorre dall'alto verso il basso e da destra a sinistra. Questo è il comportamento predefinito del browser per le modalità di scrittura verticali ed è quello corretto per testo CJK autentico.
Risultato
Esempio della proprietà text-orientation con il valore "upright":
CSS text-orientation con valore upright, esempio
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Il valore upright forza ogni glifo a stare in verticale, indipendentemente dalla sua scrittura. È la scelta tipica per un'intestazione verticale decorativa in un design con script latino e per mantenere leggibili le parole latine incorporate nel testo CJK verticale. Nota che upright forza anche la direzione bidirezionale direction del testo a ltr.
Esempio: intestazione verticale accanto al testo del corpo
Altro esempio di codice CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ffffff;
color: #000000;
font-size: 1.1em;
}
.example {
background: #cccccc;
color: #fff;
padding: 3em;
margin: 40px auto 0;
width: 400px;
max-width: 400px;
display: flex;
}
h1 {
color: #8ebf42;
margin: 0.15em 0.75em 0 0;
font-family: 'Bungee Shade', cursive;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: upright;
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
p {
margin: 0;
line-height: 1.5;
font-size: 1.15em;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<div class="example">
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</body>
</html>Supporto browser e fallback
text-orientation è supportata in tutti i browser moderni (Chrome, Edge, Firefox, Safari). Due note pratiche:
- È significativa solo insieme a un
writing-modeverticale, quindi imposta sempre entrambe insieme. - Le versioni più vecchie di WebKit richiedono il prefisso
-webkit-suwriting-mode(puoi vederlo nell'esempio precedente). La proprietàtext-orientationin sé non richiede prefissi nei browser attuali. - Evita
use-glyph-orientation: è deprecata e non è più supportata nei browser moderni.
Valori
| Valore | Descrizione |
|---|---|
| mixed | Gli script orizzontali vengono disposti in verticale, mentre gli script verticali vengono ruotati di 90° in senso orario. Questo è il valore predefinito della proprietà. |
| upright | Tutti i caratteri sono disposti in verticale, indipendentemente dalla loro scrittura. Non influisce sulla proprietà direction. |
| sideways | I caratteri sono disposti come sarebbero in orizzontale, ma con l'intera riga ruotata di 90° in senso orario. |
| sideways-right | Un alias di sideways, mantenuto per compatibilità. |
| use-glyph-orientation | Deprecato. In precedenza mappava alle obsolete proprietà SVG glyph-orientation-vertical e glyph-orientation-horizontal. Non è più supportato nei browser moderni. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
writing-mode— imposta la direzione della riga (orizzontale o verticale) ed è necessaria affinchétext-orientationabbia effetto.text-combine-upright— comprime una breve sequenza di caratteri (ad esempio un anno a due cifre) nello spazio di un singolo carattere verticale nel testo verticale.direction— controlla la direzione base bidirezionale del testo.text-align— allinea il contenuto inline lungo la riga, che nelle modalità verticali diventa un allineamento in alto/basso.