Wprowadziliśmy w Chrome od wersji 119 do 123 nową międzynarodową funkcję CSS z poziomu 4 w ramach trybów pisania CSS. Tryb pisania pionowego elementów sterujących formularza oznacza, że elementy te mogą być wyświetlane w trybie pisania pionowego. W Chrome 123 ta funkcja zostanie włączona dla wszystkich użytkowników. W tym poście znajdziesz jej opis.
Tryb pisania pionowego dla elementów sterujących formularza opartych na tekście
Po pełnym włączeniu tej funkcji będzie można używać trybów pisania pionowego w przypadku elementów sterowania formularzem, takich jak przyciski, listy wyboru i elementy postępu. Aby go użyć, ustaw w przypadku właściwości CSS writing-mode wartość vertical-lr, jeśli kierunek przepływu bloku ma być od lewej do prawej, i wartość vertical-rl, jeśli ma być od prawej do lewej.
Jest to przydatne w przypadku wielu języków wschodnioazjatyckich, które tradycyjnie używają pisma pionowego. Na przykład tradycyjna japońska jest często pisana pionowo od prawej do lewej.
Oto kilka przykładów elementów sterujących formularza pionowego w różnych językach.
Przyciski
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
Elementy: <select>
Możesz określić, że element <select> będzie wyświetlał cały tekst w układzie pionowym.
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>
Pamiętaj, że w obecnej implementacji opcje wyskakującego okienka są nadal wyświetlane poziomo.
Dane tekstowe
W przypadku wielu elementów sterujących w formularzach, które wymagają wpisywania tekstu, można teraz używać trybu pisania pionowego.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Suwaki
Wartość elementu formularza można też wyświetlać wizualnie. Do tego służą suwaki takie jak <meter>, <progress> i <input type=range>.
Wcześniej tylko <range> mogło być renderowane w orientacji pionowej za pomocą niestandardowej wartości wyglądu CSS slider-vertical. Teraz wszystkie 3 elementy można wyświetlać w układaniu pionowym za pomocą właściwości CSS writing-mode.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Domyślnie kierunek CSS jest ustawiony na ltr. Oznacza to, że wartości będą renderowane od góry do dołu. Kierunek wartości możesz określić jako od dołu do góry, ustawiając kierunek jako rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
W Chrome 122 trwa eksperyment dotyczący zmiany kierunku wartości. Jeśli chcesz podzielić się swoją opinią, daj nam znać.
Angażowanie użytkowników i przesyłanie opinii
Aby podzielić się opinią na temat tych funkcji, prześlij zgłoszenie na stronie crbug.com.