W wersjach od Chrome 119 do wersji 123 wprowadzamy nową międzynarodową funkcję CSS z poziomu 4 trybów pisania CSS. Tryb pisma pionowego w przypadku elementów sterujących formularza pozwala wyświetlać te elementy w trybach pisania pionowego. Funkcja będzie dostępna dla wszystkich użytkowników w Chrome 123. Opisaliśmy w tym poście w tym poście.
Tryb pisania pionowego dla tekstowych elementów sterujących formularza
Po pełnym włączeniu tej funkcji będzie można używać trybów pisania w pionie w przypadku elementów sterujących formularza, takich jak przyciski, listy wyboru i elementy postępu. Aby go użyć, ustaw tryb zapisu właściwości CSS na vertical-lr dla kierunku przepływu bloku od lewej do prawej i vertical-rl dla kierunku przepływu bloku od prawej do lewej.
Jest to przydatne w przypadku wielu języków wschodnioazjatyckich, w których pismo pisane jest pionowo. Na przykład tradycyjny język japoński często jest pisany pionowo od prawej do lewej.
Oto kilka międzynarodowych przykładów ustawień formularza pionowego.
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 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>
Zwróć uwagę, że w obecnej implementacji opcje wyskakującego okienka nadal są wyświetlane poziomo.
Dane wejściowe oparte na tekście
W przypadku wielu elementów sterujących formularza opartych na wprowadzaniu tekstu można teraz używać trybu pisania pionowego do wprowadzania tekstu.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Suwaki
Wartość elementu formularza warto także przedstawić wizualnie. To właśnie robią suwaki, tacy jak <meter>, <progress> i <input type=range>.
Wcześniej tylko <range> można było renderować w pionie za pomocą niestandardowej wartości wyglądu CSS slider-vertical. Teraz wszystkie 3 można wyświetlić w pionie
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. Możesz określić kierunek wartości od dołu do góry, ustawiając go jako rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Istnieje eksperyment dotyczący zmiany kierunku wartości w Chrome 122. Jeśli masz jakieś uwagi, daj nam znać.
Angażuj i dziel się opiniami
Aby podzielić się opinią na temat tych funkcji, zgłoś problem na stronie crbug.com.