Tryb pionowego pisania CSS w elementach sterujących formularza

Di Zhang
Di Zhang

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.

Przykład trybów zapisu w pionie

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;
}

Przycisk z tekstem pionowym.

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>

Zaznaczona lista z tekstem pionowym.

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>

Tekstowy obszar wprowadzania danych z tekstem pionowym.

Suwaki

Wartość elementu formularza można też wyświetlać wizualnie. Do tego służą suwaki takie jak <meter>, <progress><input type=range>.

różne suwaki.

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;
}

Suwaki wyświetlane w pionie.

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;
}

Elementy sterujące sladem wyświetlane pionowo od dołu do góry

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.