Die Einführung von Chrome 119 bis 123 ist eine neue internationale CSS-Funktion aus CSS-Schreibmodi der Stufe 4. Vertikaler Schreibmodus für Formularsteuerelemente bedeutet, dass diese Elemente in vertikalen Schreibmodi angezeigt werden können. Ab Chrome 123 wird die Funktion für alle Nutzer aktiviert. In diesem Beitrag wird die Funktion erläutert.
Vertikaler Schreibmodus für textbasierte Formularsteuerelemente
Sobald diese Funktion vollständig aktiviert ist, können Sie vertikale Schreibmodi für Formularsteuerelemente wie Schaltflächen, Auswahllisten und Fortschrittselemente verwenden. Wenn Sie sie verwenden möchten, setzen Sie den Schreibmodus der CSS-Eigenschaft auf vertical-lr für die Blockflussrichtung von links nach rechts und vertical-rl für die Blockflussrichtung von rechts nach links.
Dies ist für viele ostasiatische Sprachen nützlich, in denen traditionell vertikale Schriften zum Schreiben verwendet wurden. Japanisch wird beispielsweise oft von rechts nach links vertikal geschrieben.
Hier sind einige internationalisierte Beispiele für vertikale Formularsteuerelemente.
Schaltflächen
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select>-Elemente
Du kannst festlegen, dass bei 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>
In der aktuellen Implementierung werden die Optionen des Pop-up-Fensters weiterhin horizontal angezeigt.
Textbasierte Eingaben
Für viele texteingabebasierte Formularsteuerelemente ist es jetzt möglich, bei der Texteingabe einen vertikalen Schreibmodus zu verwenden.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Schieberegler
Es kann sich auch als nützlich erweisen, den Wert eines Formularelements visuell darzustellen. Genau das können Schieberegler 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 mit der CSS-Eigenschaft writing-mode vertikal angezeigt werden.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Die CSS-Richtung ist standardmäßig auf ltr festgelegt. Das bedeutet, dass die Werte von oben nach unten gerendert werden. Sie können die Richtung des Werts als von unten nach oben festlegen, indem Sie die Richtung auf rtl festlegen.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Es wird ein Experiment zum Ändern der Wertrichtung in Chrome 122 durchgeführt. Wenn du Feedback hast, kannst du dich gern an uns wenden.
Reagieren und Feedback geben
Wenn Sie Feedback zu diesen Funktionen geben möchten, können Sie unter crbug.com ein Problem melden.