Verticale CSS-schrijfmodus voor formulierbesturingselementen

Di Zhang
Di Zhang

Uitrol van Chrome 119 naar 123 is een nieuwe internationale CSS-functie van CSS Writing Modes Level 4 . De verticale schrijfmodus voor formulierbesturingselementen betekent dat deze elementen in verticale schrijfmodi kunnen worden weergegeven. Vanaf Chrome 123 wordt de functie voor alle gebruikers ingeschakeld. In dit bericht wordt de functie uitgelegd.

Verticale schrijfmodus voor op tekst gebaseerde formulierbesturingselementen

Zodra deze functie volledig is ingeschakeld, is het mogelijk om verticale schrijfmodi te gebruiken voor formulierbesturingselementen zoals knoppen, selectielijsten en voortgangselementen. Om dit te gebruiken, stelt u de schrijfmodus van de CSS-eigenschap in op vertical-lr voor de stroomrichting van het blok van links naar rechts en vertical-rl voor de stroomrichting van het blok van rechts naar links.

Dit is handig voor veel Oost-Aziatische talen die traditioneel verticale scripts gebruiken om te schrijven. Traditioneel Japans wordt bijvoorbeeld vaak verticaal van rechts naar links geschreven.

Voorbeeld van verticale schrijfmodi

Hier zijn enkele geïnternationaliseerde voorbeelden van verticale formuliercontroles.

Knoppen 

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

Een knop met verticale tekst.

<select> elementen

U kunt opgeven dat een <select> -element alle tekst verticaal weergeeft.

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>

Een selecte lijst met verticale tekst.

Merk op dat in de huidige implementatie de opties van het pop-upvenster nog steeds horizontaal worden weergegeven.

Op tekst gebaseerde invoer

Voor veel op tekstinvoer gebaseerde formulierbesturingselementen is het nu mogelijk om een ​​verticale schrijfmodus te gebruiken bij het invoeren van tekst.

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

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

Een tekstgebied met verticale tekst.

Schuifregelaars

Het kan ook waardevol zijn om de waarde van een formulierelement visueel weer te geven. Dat is wat schuifregelaars zoals <meter> , <progress> en <input type=range> doen.

Een verscheidenheid aan schuifregelaars.

Voorheen kon alleen <range> verticaal worden weergegeven met de niet-standaard CSS-weergavewaarde slider-vertical . Nu kunnen ze alle drie verticaal worden weergegeven met behulp van de CSS writing-mode .

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

De schuifregelaars worden verticaal weergegeven.

Standaard is de CSS-richting ingesteld op ltr . Dit betekent dat waarden van boven naar beneden worden weergegeven. U kunt de richting van de waarde van onder naar boven opgeven door de richting in te stellen als rtl .

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

De schuifregelaars worden verticaal van onder naar boven weergegeven.

Er is een experiment om de waarderichting te veranderen in Chrome 122. Laat het ons weten als je feedback hebt.

Betrek en deel feedback

Als u feedback over deze functies wilt delen, kunt u een probleem indienen op crbug.com .