In Chrome 119 bis 123 wird eine neue internationale CSS-Funktion aus CSS Writing Modes Level 4 eingeführt. Der vertikale Schreibmodus für Formularsteuerelemente bedeutet, dass diese Elemente im vertikalen Schreibmodus angezeigt werden können. Ab Chrome 123 ist die Funktion für alle Nutzer aktiviert. In diesem Beitrag wird sie erläutert.
Vertikaler Schreibmodus für textbasierte Formularsteuerelemente
Sobald diese Funktion vollständig aktiviert ist, können vertikale Schreibmodi für Formularsteuerelemente wie Schaltflächen, Auswahllisten und Fortschrittselemente verwendet werden. Legen Sie dazu die CSS-Property „writing-mode“ auf vertical-lr für einen linksläufigen Blockfluss oder auf vertical-rl für einen rechtsläufigen Blockfluss fest.
Das ist nützlich für viele ostasiatische Sprachen, die traditionell vertikale Schriftarten verwenden. Traditionelle japanische Schrift wird beispielsweise oft vertikal von rechts nach links geschrieben.
Hier sind einige internationalisierte Beispiele für vertikale Formularsteuerelemente.
Tasten
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select>-Elemente
Sie können angeben, dass in einem <select>-Element der gesamte Text vertikal angezeigt wird.
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>
Hinweis: Bei der aktuellen Implementierung werden die Optionen des Pop-up-Fensters weiterhin horizontal angezeigt.
Textbasierte Eingaben
Bei vielen formularbasierten Steuerelementen für die Texteingabe kann jetzt beim Eingeben von Text der vertikale Schreibmodus verwendet werden.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Schieberegler
Es kann auch sinnvoll sein, den Wert eines Formularelements visuell darzustellen. Das ist die Funktion von Schiebereglern wie <meter>, <progress> und <input type=range>.
Bisher konnte nur <range> mit dem nicht standardmäßigen CSS-Darstellungswert slider-vertical vertikal gerendert werden. Jetzt können alle drei vertikal mithilfe der CSS-Eigenschaft writing-mode angezeigt werden.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Standardmäßig ist die CSS-Richtung auf ltr festgelegt. Die Werte werden also von oben nach unten gerendert. Sie können die Richtung des Werts von unten nach oben festlegen, indem Sie die Richtung als rtl festlegen.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
In Chrome 122 gibt es einen Test, mit dem die Richtung der Werte geändert werden kann. Wir freuen uns über Feedback.
Mit Nutzern interagieren und Feedback geben
Wenn Sie uns Feedback zu diesen Funktionen geben möchten, können Sie ein Problem unter crbug.com melden.