Tryb pionowego pisania CSS w elementach sterujących formularza

Di Zhang
Di Zhang

Wdrożenie Chrome w wersji 119 do wersji 123 to nowa międzynarodowa funkcja CSS dostępna w CSS Tryby pisania – poziom 4. Pionowo w trybie pisania dla elementów sterujących formularza, oznacza to, że można je w trybie pisania w pionie. Od wersji Chrome 123 funkcja ta zostanie włączona dla wszystkich użytkowników, wyjaśniamy w tym poście.

Tryb pisania pionowego w elementach sterujących formularza tekstowego

Gdy ta funkcja zostanie w pełni włączona, będzie można używać pisania w pionie tryby elementów sterujących formularzem takich jak przyciski, wybieranie list i postęp . Aby go użyć, ustaw tryb zapisu właściwości CSS na vertical-lr dla kierunek przepływu bloków od lewej do prawej i vertical-rl dla bloku od prawej do lewej i kierunku przepływu.

Jest to przydatne w wielu językach Azji Wschodniej, które są tradycyjnie używane skrypty pionowe do pisania. Na przykład często używa się tradycyjnego japońskiego. w pionie od prawej do lewej.

Przykładowe tryby pisania w pionie

Oto kilka umiędzynarodowionych przykładów elementów sterujących formularzy pionowych.

Przyciski

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

Przycisk z pionowym tekstem.

Elementy: <select>

Możesz określić, że element <select> będzie wyświetlał cały tekst w pionie.

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>

Lista wyboru z tekstem pionowym.

Pamiętaj, że w bieżącej implementacji nadal dostępne są opcje wyskakującego okienka. wyświetlane w poziomie.

Dane wejściowe oparte na tekście

W przypadku wielu elementów sterujących formularzy wymagających wprowadzania tekstu tryb pisania podczas wpisywania tekstu.

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

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

Obszar tekstowy z pionowym tekstem.

Suwaki

Przydatne może być również wizualne wyświetlenie wartości elementu formularza. To właśnie suwaki, takie jak <meter>, <progress> i <input type=range>.

Różne suwaki.

Wcześniej tylko <range> mógł być renderowany w pionie za pomocą niestandardowego kodu CSS wartość wyglądu slider-vertical. Teraz wszystkie 3 elementy można wyświetlać w pionie za pomocą właściwości CSS writing-mode.

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

Elementy sterujące suwaka są wyświetlane w pionie.

Domyślnie kierunek CSS to ltr. Oznacza to, że wartości będą wyrenderowano od góry do dołu. Możesz określić kierunek, w którym wartość ma być u dołu do góry, ustawiając kierunek na rtl.

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

Elementy sterujące slajdami są wyświetlane pionowo od dołu do góry.

Dostępny jest eksperyment dotyczący zmiany kierunku wartości w Chrome 122. Jeśli masz jakieś uwagi, daj nam znać.

Angażuj odbiorców i dziel się opiniami

Aby przesłać opinię na temat tych funkcji, zgłoś problem na stronie crbug.com.