Vertikaler CSS-Schreibmodus für Formularsteuerelemente

Di Zhang
Di Zhang

Eine neue internationale Preisvergleichsportal-Funktion von CSS wird von Chrome 119 bis 123 eingeführt. Schreibmodi Stufe 4. Vertikal für Formularsteuerelemente bedeutet, dass diese Elemente in vertikalen Schreibmodi angezeigt werden. Ab Chrome 123 wird die Funktion aktiviert wird die Funktion in diesem Beitrag erläutert.

Vertikaler Schreibmodus für textbasierte Formularsteuerelemente

Sobald diese Funktion vollständig aktiviert ist, können Sie vertikale Schriften Modi für Formularsteuerelemente wie Schaltflächen, Auswahllisten und Fortschritt Elemente. Um ihn zu verwenden, setzen Sie die CSS-Eigenschaft „writing-mode“ auf vertical-lr für Blockflussrichtung von links nach rechts und vertical-rl für linksläufige Blöcke Richtung des Flusses.

Dies ist für viele ostasiatische Sprachen nützlich, für das Schreiben von Texten. Zum Beispiel wird Japanisch häufig geschrieben, von rechts nach links vertikal ausgerichtet werden.

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

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>

Eine Auswahlliste mit vertikalem Text.

Beachten Sie, dass die aktuelle Implementierung immer noch die Optionen des Pop-up-Fensters enthält. horizontal angezeigt werden.

Textbasierte Eingaben

Für viele auf Texteingabe basierende Formularsteuerelemente ist es jetzt möglich, eine vertikale wenn Sie Text eingeben.

textarea {
  writing-mode: vertical-rl;
  width: 5em;
  height: 20em;
}

<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>

Ein Textbereich mit vertikalem Text.

Schieberegler

Es kann auch hilfreich sein, den Wert eines Formularelements visuell darzustellen. Genau das wie <meter>, <progress> und <input type=range>.

Verschiedene Schieberegler

Bisher konnte nur <range> mit dem nicht standardmäßigen CSS vertikal gerendert werden. Darstellungswert slider-vertical. Jetzt können alle drei vertikal mithilfe der CSS-Eigenschaft writing-mode.

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
}

Die vertikal angezeigten Schieberegler.

Standardmäßig ist die CSS-Richtung auf ltr festgelegt. Das bedeutet, dass die Werte von oben nach unten gerendert. Sie können festlegen, dass der Wert nach unten gerichtet werden soll. indem Sie die Richtung als rtl festlegen.

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
  direction: rtl;
}

Die Schieberegler werden vertikal von unten nach oben angezeigt.

Es gibt ein Experiment zum Ändern der Wertrichtung in Chrome 122. Wenn du Feedback hast, kannst du dich jederzeit gern an uns wenden.

Interagieren und Feedback geben

Wenn du Feedback zu diesen Funktionen geben möchtest, kannst du hier ein Problem melden: crbug.com.