L'implementazione da Chrome 119 alla versione 123 è una nuova funzionalità CSS internazionale di CSS Modalità di scrittura livello 4. Verticale di scrittura per elementi di controllo modulo significa che questi elementi possono in modalità di scrittura verticale. Verrà attivata la versione 123 di Chrome per tutti gli utenti, questo post illustra la funzionalità.
Modalità di scrittura verticale per gli elementi di controllo modulo basati su testo
Una volta abilitata completamente questa funzionalità, sarà possibile utilizzare la scrittura verticale
Modalità per gli elementi di controllo del modulo come pulsanti, elenchi di selezione e avanzamento
elementi. Per utilizzarla, imposta la modalità di scrittura della proprietà CSS su vertical-lr per
direzione del flusso del blocco da sinistra a destra e vertical-rl per il blocco da destra a sinistra
direzione del flusso.
Ciò è utile per molte lingue dell'Asia orientale che tradizionalmente hanno utilizzato script verticali per la scrittura. Ad esempio, il giapponese tradizionale viene spesso scritto verticalmente da destra a sinistra.
Ecco alcuni esempi internazionali di controlli dei moduli verticali.
Pulsanti
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select> elemento
Puoi specificare che tutto il testo verrà visualizzato in verticale da un elemento <select>.
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 l'implementazione corrente ha ancora le opzioni della finestra popup. visualizzato in orizzontale.
Input basati su testo
Per molti controlli modulo basati sull'input di testo, ora è possibile utilizzare un modalità di scrittura durante l'inserimento del 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. Ecco cosa
dispositivi di scorrimento come <meter>, <progress> e <input type=range>.
In precedenza, solo <range> poteva essere visualizzato in verticale utilizzando il CSS non standard
valore di aspetto slider-vertical. Ora tutti e tre possono essere visualizzati in verticale
utilizzando la proprietà CSS writing-mode.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Per impostazione predefinita, la direzione CSS è impostata su ltr. Ciò significa che i valori
visualizzato dall'alto verso il basso. Puoi specificare la direzione del valore in basso
per passare all'alto impostando la direzione su rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
È in corso un esperimento per modificare la direzione del valore in Chrome 122. Non esitare a contattarci per eventuali feedback.
Interagisci e condividi il feedback
Per condividere feedback su queste funzionalità, segnala un problema all'indirizzo crbug.com.