Modalità di scrittura - Trucchi CSS

La writing-modeproprietà modifica l'allineamento del testo in modo che possa essere letto dall'alto verso il basso o da sinistra a destra, a seconda della lingua. Ad esempio, supponiamo di voler aggiungere del testo che viene letto dall'alto verso il basso e da destra a sinistra, in questo modo:

.vertical-rl ( writing-mode: vertical-rl; )

Vedi la modalità di scrittura della penna: vertical-rl di CSS-Tricks (@ css-tricks) su CodePen.

Ciò è particolarmente utile in lingue come il cinese, il giapponese o il coreano, dove il testo è spesso impostato verticalmente. In lingua inglese, è più probabile che tu voglia utilizzare questa proprietà per motivi estetici, come l'allineamento di un'intestazione in un blocco di testo come questo:

Guarda la penna YWBWGA di CSS-Tricks (@ css-tricks) su CodePen.

Valori

Negli esempi seguenti ho reso la prima lettera del testo rossa, solo così è più facile vedere in quale direzione devi iniziare a leggere.

orizzontale-tb

Questo è il valore predefinito della proprietà: il testo viene letto da sinistra a destra e dall'alto in basso.

Vedi Pen writing-mode: horizontal-tb di CSS-Tricks (@ css-tricks) su CodePen.

vertical-rl

Il testo viene letto da destra a sinistra e dall'alto verso il basso:

Vedi la modalità di scrittura della penna: vertical-rl di CSS-Tricks (@ css-tricks) su CodePen.

verticale-lr

Il testo viene letto da sinistra a destra e dall'alto in basso:

Vedi la modalità di scrittura della penna: vertical-rl di CSS-Tricks (@ css-tricks) su CodePen.

Link correlati

Testo verticale con modalità di scrittura CSS3
Ahmad Shadeed sulla modalità di scrittura

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.