Proprietà CSS writing-mode
Usa la proprietà CSS writing-mode per definire la direzione del flusso del testo. Scopri i valori della proprietà e prova gli esempi.
La proprietà CSS writing-mode stabilisce se le righe di testo vengono disposte orizzontalmente o verticalmente, e in quale direzione avanzano i blocchi e le righe.
Questa pagina spiega cosa fa la proprietà, i valori che accetta, quando è davvero necessaria e come interagisce con proprietà correlate come text-orientation e direction.
Cosa controlla writing-mode
writing-mode modifica la direzione del flusso dei blocchi — la direzione in cui si impilano i box a livello di blocco (paragrafi, intestazioni, ecc.) — e la direzione di base inline in cui i caratteri scorrono all'interno di una riga. In una normale pagina in italiano, i blocchi si impilano dall'alto verso il basso e il testo all'interno di una riga scorre da sinistra a destra (horizontal-tb). Passando a un valore verticale si ruota l'intero modello: le righe scorrono dall'alto verso il basso e si impilano da destra a sinistra oppure da sinistra a destra.
Poiché rimappa il significato di "start", "end", "block" e "inline", writing-mode funziona in sinergia con le proprietà logiche CSS (margin-block, padding-inline, inset-block e così via), che seguono automaticamente la modalità di scrittura attiva invece di essere legate ai lati fisici.
Quando usarlo?
- Script asiatici orientali verticali (cinese tradizionale, giapponese, coreano) che vengono scritti dall'alto verso il basso, con colonne che scorrono da destra a sinistra — usare
vertical-rl. - Etichette UI ruotate, come un'intestazione di colonna laterale in una tabella o un'etichetta dell'asse verticale in un grafico.
- Layout editoriali o "da rivista" che intenzionalmente mettono un'intestazione o un riquadro di richiamo di lato.
Per le modalità verticali si abbina quasi sempre writing-mode con text-orientation per decidere se i singoli caratteri latini rimangono in piedi o vengono ruotati di 90°.
I browser moderni supportano pienamente la proprietà writing-mode senza prefissi dei vendor.
| Valore iniziale | horizontal-tb |
|---|---|
| Si applica a | Tutti gli elementi tranne i gruppi di righe di tabella, i gruppi di colonne di tabella, le righe di tabella, le colonne di tabella, i contenitori ruby base e i contenitori ruby annotation. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.writingMode = "vertical-lr"; |
Sintassi
Valori CSS di writing-mode
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;Il valore predefinito è horizontal-tb. La proprietà è ereditata, quindi impostarla su un contenitore la applica a tutti i discendenti a meno che non la sovrascrivano.
Esempio della proprietà writing-mode con il valore horizontal-tb:
Esempio di codice CSS writing-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: horizontal-tb;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Risultato
Un altro esempio in cui il contenuto scorre verticalmente dall'alto verso il basso e da destra a sinistra.
Esempio della proprietà writing-mode con il valore vertical-rl:
Esempio CSS writing-mode vertical-rl
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-rl;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Nell'esempio seguente, il contenuto scorre verticalmente dall'alto verso il basso e da sinistra a destra.
Esempio della proprietà writing-mode con il valore vertical-lr:
Esempio CSS writing-mode vertical-lr
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-lr;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Combinazione con text-orientation
All'interno di una modalità di scrittura verticale, text-orientation decide come viene ruotato ogni glifo. La combinazione più comune mantiene i caratteri CJK in posizione verticale mentre il flusso della riga rimane verticale:
.vertical {
writing-mode: vertical-rl;
text-orientation: upright; /* keep characters upright instead of rotated 90° */
}Senza text-orientation: upright, le lettere latine e i numeri vengono ruotati di 90° in senso orario per impostazione predefinita in modalità verticale.
Valori
horizontal-tb è l'unico valore orizzontale. I valori rimanenti sono tutti verticali e differiscono nella direzione in cui si impilano le righe e in come vengono orientati i glifi.
| Valore | Descrizione |
|---|---|
| horizontal-tb | Predefinito. Il contenuto scorre orizzontalmente da sinistra a destra e le righe si impilano dall'alto verso il basso. |
| vertical-rl | Il contenuto scorre verticalmente dall'alto verso il basso e le righe si impilano da destra a sinistra. |
| vertical-lr | Il contenuto scorre verticalmente dall'alto verso il basso e orizzontalmente da sinistra a destra. |
| sideways-rl | Deprecato in CSS Writing Modes Level 3. Il contenuto scorre verticalmente dall'alto verso il basso e tutti i glifi sono ruotati lateralmente verso destra. |
| sideways-lr | Deprecato in CSS Writing Modes Level 3. Il contenuto scorre verticalmente dall'alto verso il basso e tutti i glifi sono ruotati lateralmente verso sinistra. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
text-orientation— controlla come vengono ruotati i singoli glifi all'interno di una modalità di scrittura verticale.direction— imposta la direzione di base inline (LTR o RTL) per il testo.text-align— allinea il contenuto inline; le parole chiavestart/endrispettano la modalità di scrittura.transform— un modo alternativo per ruotare visivamente gli elementi senza modificare il modello di layout.