Il passaggio da Chrome 119 a 123 include una nuova funzionalità CSS internazionale delle Modalità di scrittura CSS di livello 4. La modalità di scrittura verticale per gli elementi di controllo dei moduli indica che questi elementi possono essere visualizzati in modalità di scrittura verticale. In Chrome 123 la funzionalità verrà attivata per tutti gli utenti. Questo post la illustra.
Modalità di scrittura verticale per gli elementi di controllo dei moduli basati su testo
Una volta attivata completamente, sarà possibile utilizzare le modalità di scrittura verticale per gli elementi di controllo dei moduli, come pulsanti, elenchi di selezione ed elementi di avanzamento. Per utilizzarla, imposta la proprietà CSS writing-mode su vertical-lr
per la direzione di flusso dei blocchi da sinistra a destra e su vertical-rl
per la direzione di flusso dei blocchi da destra a sinistra.
Questa opzione è utile per molte lingue dell'Asia orientale che tradizionalmente hanno utilizzato scritture verticali per la scrittura. Ad esempio, il giapponese tradizionale viene spesso scritto verticalmente da destra a sinistra.
Ecco alcuni esempi internazionalizzati di controlli di modulo verticali.
Pulsanti
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
Elementi <select>
Puoi specificare che un elemento <select>
mostri tutto il testo in verticale.
select {
writing-mode: vertical-lr;
}
<select multiple>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
<select>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
Tieni presente che nell'implementazione attuale le opzioni della finestra popup vengono ancora visualizzate orizzontalmente.
Input basati su testo
Per molti controlli dei moduli basati sull'inserimento di testo, ora è possibile utilizzare una modalità di scrittura verticale quando si inserisce il testo.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Dispositivi di scorrimento
Può essere utile anche visualizzare visivamente il valore di un elemento del modulo. È ciò che fanno i cursori come <meter>
, <progress>
e <input type=range>
.
In precedenza, solo <range>
poteva essere visualizzato in verticale utilizzando il valore dell'aspetto CSS non standard slider-vertical
. Ora tutti e tre possono essere visualizzati verticalmente utilizzando la proprietà CSS writing-mode
.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Per impostazione predefinita, l'orientamento CSS è impostato su ltr
. Ciò significa che i valori verranno visualizzati dall'alto verso il basso. Puoi specificare la direzione del valore da basso
a alto impostando la direzione su rtl
.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
In Chrome 122 è disponibile un esperimento per modificare la direzione del valore. Non esitare a contattarci per eventuali feedback.
Coinvolgere e condividere feedback
Per condividere feedback su queste funzionalità, segnala un problema all'indirizzo crbug.com.