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.
Hier zijn enkele geïnternationaliseerde voorbeelden van verticale formuliercontroles.
Toetsen
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<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>
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>
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.
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;
}
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;
}
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 .