L'implementazione da Chrome 119 alla versione 123 è una nuova funzionalità CSS internazionale realizzata dalle modalità di scrittura CSS di livello 4. La modalità di scrittura verticale per gli elementi di controllo modulo consente di visualizzare questi elementi in modalità di scrittura verticale. A partire dalla versione 123 di Chrome la funzionalità sarà attivata per tutti gli utenti: questo post la spiega.
Modalità di scrittura verticale per gli elementi di controllo modulo basati su testo
Quando questa funzionalità sarà completamente abilitata, potrai utilizzare le modalità di scrittura verticale per gli elementi di controllo modulo come pulsanti, elenchi di selezione ed elementi di avanzamento. Per utilizzarlo, imposta la modalità di scrittura della proprietà CSS su vertical-lr per la direzione del flusso del blocco da sinistra a destra e su vertical-rl per la direzione del flusso del blocco da destra a sinistra.
È utile per molte lingue dell'Asia orientale che in genere hanno utilizzato scritture verticali per la scrittura. Ad esempio, la lingua giapponese tradizionale è spesso scritta in verticale, da destra a sinistra.
Ecco alcuni esempi internazionalizzati di controlli dei moduli verticali.
Pulsanti
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select> elemento
Puoi specificare che un elemento <select> mostrerà 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 le opzioni della finestra popup dell'implementazione corrente sono ancora visualizzate orizzontalmente.
Input basati su testo
Per molti controlli modulo basati sull'input di testo, è ora possibile utilizzare la modalità di scrittura verticale.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Dispositivi di scorrimento
Può essere utile anche mostrare visivamente il valore di un elemento del modulo. Questo è ciò che fanno
dispositivi di scorrimento come <meter>, <progress> e <input type=range>.
In precedenza, solo <range> poteva essere visualizzato verticalmente utilizzando il valore di aspetto CSS non standard slider-vertical. Ora puoi mostrarli tutti e tre in verticale
utilizzando la proprietà CSS writing-mode.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Per impostazione predefinita, la direzione del CSS è impostata su ltr. Ciò significa che i valori verranno visualizzati dall'alto verso il basso. Puoi specificare la direzione del valore dal basso verso l'alto impostando la direzione come rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
È disponibile un esperimento per modificare la direzione del valore in Chrome 122. Non esitare a contattarci per eventuali feedback.
Interagisci e condividi feedback
Per condividere feedback su queste funzionalità, segnala il problema all'indirizzo crbug.com.