Переход с Chrome 119 на 123 — это новая международная функция CSS из режимов написания CSS уровня 4 . Режим вертикального написания для элементов управления формой означает, что эти элементы могут отображаться в режимах вертикального написания. В Chrome 123 эта функция будет включена для всех пользователей, в этом сообщении объясняется эта функция.
Режим вертикального письма для текстовых элементов управления формой
Как только эта функция будет полностью включена, можно будет использовать режимы вертикального письма для элементов управления формой, таких как кнопки, списки выбора и элементы прогресса. Чтобы использовать его, установите для свойства CSS write-mode значение vertical-lr для направления потока блоков слева направо и vertical-rl для направления потока блоков справа налево.
Это полезно для многих восточноазиатских языков, в которых традиционно для письма использовалось вертикальное письмо. Например, традиционный японский язык часто пишется вертикально справа налево.
Вот несколько интернационализированных примеров элементов управления вертикальной формой.
Кнопки
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select> элементы
Вы можете указать, что элемент <select> будет отображать весь текст вертикально.
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>
Обратите внимание, что в текущей реализации параметры всплывающего окна по-прежнему отображаются горизонтально.
Текстовые входы
Для многих элементов управления формой на основе ввода текста теперь можно использовать режим вертикального письма при вводе текста.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Слайдеры
Также может быть полезно визуально отобразить значение элемента формы. Именно это делают такие ползунки, как <meter> , <progress> и <input type=range> .
Раньше только <range> можно было отображать вертикально, используя нестандартное значение внешнего вида CSS slider-vertical . Теперь все три можно отображать вертикально, используя свойство writing-mode CSS.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
По умолчанию направление CSS установлено на ltr . Это означает, что значения будут отображаться сверху вниз. Вы можете указать направление значения снизу вверх, задав направление как rtl .
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
В Chrome 122 проводится эксперимент по изменению направления значений. Если у вас есть отзывы, дайте нам знать.
Привлекайте и делитесь отзывами
Чтобы поделиться отзывом об этих функциях, сообщите о проблеме на crbug.com .