Le déploiement de Chrome 119 à 123 est une nouvelle fonctionnalité CSS internationale du niveau d'écriture CSS 4. Le mode d'écriture verticale pour les éléments de contrôle de formulaire signifie que ces éléments peuvent être affichés en mode d'écriture verticale. D'ici Chrome 123, la fonctionnalité sera activée pour tous les utilisateurs.
Mode d'écriture vertical pour les éléments de contrôle de formulaire basés sur du texte
Une fois cette fonctionnalité entièrement activée, vous pourrez utiliser des modes d'écriture verticale pour les éléments de contrôle de formulaire tels que les boutons, les listes de sélection et les éléments de progression. Pour l'utiliser, définissez le mode d'écriture de la propriété CSS sur vertical-lr pour le sens du flux de blocs de gauche à droite et sur vertical-rl pour le sens de flux de blocs de droite à gauche.
Cela est utile pour de nombreuses langues d'Asie de l'Est qui ont traditionnellement utilisé des scripts verticaux pour l'écriture. Par exemple, le japonais traditionnel est souvent écrit verticalement de droite à gauche.
Voici quelques exemples internationalisés de commandes de formulaire verticales.
Boutons
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
Éléments <select>
Vous pouvez spécifier qu'un élément <select> affiche tout le texte verticalement.
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>
Notez que l'implémentation actuelle présente toujours les options de la fenêtre pop-up affichées horizontalement.
Entrées textuelles
Pour de nombreuses commandes de formulaire basées sur la saisie de texte, il est maintenant possible d'utiliser un mode d'écriture vertical lors de la saisie de texte.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Curseurs
Il peut également être utile d'afficher visuellement la valeur d'un élément du formulaire. C'est ce que font les curseurs tels que <meter>, <progress> et <input type=range>.
Auparavant, seul <range> pouvait être affiché verticalement en utilisant la valeur d'apparence CSS non standard slider-vertical. Désormais, les trois peuvent être affichés verticalement à l'aide de la propriété CSS writing-mode.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Par défaut, le sens CSS est défini sur ltr. Les valeurs s'affichent alors de haut en bas. Vous pouvez spécifier le sens de la valeur de bas en haut en définissant le sens sur rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Il existe une expérience permettant de changer l'orientation de la valeur dans Chrome 122. N'hésitez pas à nous contacter si vous avez des commentaires.
Interagir et donner votre avis
Pour nous faire part de vos commentaires sur ces fonctionnalités, signalez votre problème sur crbug.com.