Modalità di scrittura verticale CSS per gli elementi di controllo modulo

Di Zhang
Di Zhang

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.

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.

Esempio di modalità di scrittura verticale

Ecco alcuni esempi internazionalizzati di controlli di modulo verticali.

Pulsanti

<html lang="zh">

<button>请点击</button>
button {
  writing-mode: vertical-rl;
}

Un pulsante con testo verticale.

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>

Un elenco selezionato con testo verticale.

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>

Un&#39;area di testo con testo verticale.

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>.

Una serie di controlli con cursore.

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;
}

I controlli del cursore visualizzati in verticale.

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;
}

I controlli delle diapositive visualizzati verticalmente dal basso verso l&#39;alto.

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.