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.