Vertikaler CSS-Schreibmodus für Formularsteuerelemente

Di Zhang
Di Zhang

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.

Beispiel für vertikale Schreibmodi

Hier sind einige internationalisierte Beispiele für vertikale Formularsteuerelemente.

Tasten

<html lang="zh">

<button>请点击</button>
button {
  writing-mode: vertical-rl;
}

Eine Schaltfläche mit vertikalem Text.

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

Eine Auswahlliste mit vertikalem Text.

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>

Ein Textfeld mit vertikalem Text.

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

Eine Vielzahl von Schiebereglern.

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

Die Schieberegler werden vertikal angezeigt.

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

Die Steuerelemente für die Folien werden vertikal von unten nach oben angezeigt.

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.