Une nouvelle fonctionnalité CSS internationale issue des modes d'écriture CSS de niveau 4 est en cours de déploiement entre les versions 119 et 123 de Chrome. Le mode d'écriture verticale pour les éléments de commande de formulaire signifie que ces éléments peuvent être affichés en mode d'écriture verticale. À partir de Chrome 123, cette fonctionnalité sera activée pour tous les utilisateurs. Cet article vous en dit plus à son sujet.
Mode d'écriture vertical pour les éléments de commande de formulaire basés sur du texte
Une fois cette fonctionnalité entièrement activée, vous pourrez utiliser les modes d'écriture verticale pour les éléments de commande de formulaire tels que les boutons, les listes de sélection et les éléments de progression. Pour l'utiliser, définissez la propriété CSS writing-mode sur vertical-lr
pour la direction de flux de bloc de gauche à droite et sur vertical-rl
pour la direction de flux de bloc 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 d'éléments de contrôle de formulaire verticalisés pour différentes langues.
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 les options de la fenêtre pop-up sont toujours affichées horizontalement dans l'implémentation actuelle.
Saisies textuelles
Pour de nombreuses commandes de formulaire basées sur la saisie de texte, il est désormais possible d'utiliser un mode d'écriture verticale lorsque vous saisissez du 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 de formulaire. C'est ce que font les curseurs tels que <meter>
, <progress>
et <input type=range>
.
Auparavant, seul <range>
pouvait être affiché verticalement à l'aide de 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
. Cela signifie que les valeurs seront affichées de haut en bas. Vous pouvez spécifier la direction de la valeur de bas en haut en définissant la direction sur rtl
.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Un test permet de modifier le sens de la valeur dans Chrome 122. N'hésitez pas à nous faire part de vos commentaires.
Interagir et envoyer des commentaires
Pour envoyer des commentaires sur ces fonctionnalités, signalez un problème sur crbug.com.