Le déploiement de Chrome 119 à 123 est une nouvelle fonctionnalité CSS internationale proposée par CSS Modes d'écriture niveau 4. Verticale des éléments de contrôle de formulaire signifie que ces éléments peuvent être affiché en mode d'écriture verticale. D'ici Chrome 123, la fonctionnalité sera activée pour tous les utilisateurs, cet article explique la fonctionnalité.
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 l'écriture verticale
modes pour les éléments de contrôle de formulaire tels que les boutons, les listes de sélection et la progression
éléments. Pour l'utiliser, définissez le mode d'écriture de la propriété CSS sur vertical-lr pour
sens du flux en bloc de gauche à droite et vertical-rl pour un bloc de droite à gauche
dans le sens du flux.
Ceci 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 s'écrit souvent verticalement de droite à gauche.
Voici quelques exemples internationalisés de commandes de forme 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 comporte toujours les options de la fenêtre pop-up. affichées horizontalement.
Saisies textuelles
Pour de nombreuses commandes de formulaire basées sur la saisie de texte, il est désormais possible d'utiliser une barre 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
comme <meter>, <progress> et <input type=range>.
Auparavant, seul <range> pouvait être affiché verticalement à l'aide du code CSS non standard
la valeur d'apparence slider-vertical. Désormais, les trois peuvent
être affichées verticalement
à l'aide de la propriété CSS writing-mode.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Par défaut, l'orientation CSS est définie sur ltr. Cela signifie que les valeurs seront
affiché de haut en bas. Vous pouvez spécifier le sens de la valeur vers le bas
vers le haut en définissant la direction sur rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Une expérience permet de modifier le sens des valeurs dans Chrome 122. N'hésitez pas à nous faire part de vos commentaires.
Interagir et partager des commentaires
Pour nous faire part de vos commentaires sur ces fonctionnalités, signalez un problème à l'adresse crbug.com.