Từ Chrome 119 đến 123, chúng tôi sẽ ra mắt một tính năng CSS quốc tế mới trong Chế độ viết CSS cấp 4. Chế độ ghi theo chiều dọc cho các phần tử điều khiển biểu mẫu có nghĩa là các phần tử này có thể hiển thị ở chế độ ghi theo chiều dọc. Kể từ Chrome 123, tính năng này sẽ được bật cho tất cả người dùng. Bài đăng này giải thích về tính năng này.
Chế độ ghi dọc cho các thành phần điều khiển biểu mẫu dựa trên văn bản
Sau khi bật đầy đủ tính năng này, bạn có thể sử dụng chế độ ghi theo chiều dọc cho các thành phần điều khiển biểu mẫu như nút, danh sách chọn và thành phần tiến trình. Để sử dụng thuộc tính này, hãy đặt chế độ ghi thuộc tính CSS thành vertical-lr
cho hướng luồng khối từ trái sang phải và vertical-rl
cho hướng luồng khối từ phải sang trái.
Điều này hữu ích cho nhiều ngôn ngữ Đông Á theo truyền thống đã sử dụng chữ viết dọc để viết. Ví dụ: tiếng Nhật truyền thống thường được viết theo chiều dọc từ phải sang trái.
Sau đây là một số ví dụ quốc tế hoá về các thành phần điều khiển biểu mẫu dọc.
Nút
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select>
phần tử
Bạn có thể chỉ định rằng phần tử <select>
sẽ hiển thị tất cả văn bản theo chiều dọc.
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>
Xin lưu ý rằng cách triển khai hiện tại vẫn có các tuỳ chọn của cửa sổ bật lên hiển thị theo chiều ngang.
Dữ liệu đầu vào dựa trên văn bản
Đối với nhiều thành phần điều khiển biểu mẫu dựa trên phương thức nhập văn bản, giờ đây, bạn có thể sử dụng chế độ viết theo chiều dọc khi nhập văn bản.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Thanh trượt
Việc hiển thị giá trị của một phần tử biểu mẫu một cách trực quan cũng có thể hữu ích. Đó là những gì thanh trượt như <meter>
, <progress>
và <input type=range>
thực hiện.
Trước đây, chỉ có thể hiển thị <range>
theo chiều dọc bằng cách sử dụng giá trị giao diện CSS không chuẩn slider-vertical
. Giờ đây, bạn có thể hiển thị cả ba theo chiều dọc bằng cách sử dụng thuộc tính writing-mode
CSS.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Theo mặc định, hướng CSS được đặt thành ltr
. Điều này có nghĩa là các giá trị sẽ được hiển thị từ trên xuống dưới. Bạn có thể chỉ định hướng của giá trị là từ dưới lên bằng cách đặt hướng là rtl
.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Có một thử nghiệm để thay đổi hướng giá trị trong Chrome 122. Hãy cho chúng tôi biết nếu bạn có ý kiến phản hồi.
Tương tác và chia sẻ ý kiến phản hồi
Để chia sẻ ý kiến phản hồi về các tính năng này, hãy gửi vấn đề tại crbug.com.