Mode d'écriture vertical CSS pour les éléments de contrôle de formulaire

Di Zhang
Di Zhang

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.

Exemples de modes d'écriture verticale

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

Bouton avec texte vertical.

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

Liste de sélection avec texte vertical.

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>

Zone de texte avec texte vertical.

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

Divers curseurs de commande

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

Les commandes du curseur s&#39;affichent verticalement.

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

Commandes à faire glisser affichées verticalement de bas en haut.

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.