Triển khai từ Chrome 119 đến 123 là một tính năng CSS quốc tế mới từ Chế độ viết CSS cấp 4. Chế độ ghi 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ế độ viết dọc. Với 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 tính năng này.
Chế độ viết dọc cho các phần tử điều khiển biểu mẫu dựa trên văn bản
Sau khi tính năng này được bật hoàn toàn, bạn có thể sử dụng các chế độ ghi dọc cho các phần tử điều khiển biểu mẫu, chẳng hạn như nút, danh sách chọn và phần tử tiến trình. Để sử dụng đối tượng 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 Á vốn thường dùng hệ thố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.
Dưới đâ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 một 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>
Lưu ý rằng cách triển khai hiện tại vẫn hiển thị các tuỳ chọn của cửa sổ bật lên theo chiều ngang.
Phương thức nhập dựa trên văn bản
Đối với nhiều chế độ đ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 dọc khi nhập văn bản.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Thanh trượt
Bạn cũng có thể thấy hữu ích khi hiển thị giá trị của một phần tử biểu mẫu một cách trực quan. Đó là điều mà các thanh trượt như <meter>, <progress> và <input type=range> làm.
Trước đây, chỉ <range> có thể hiển thị 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, cả ba thành phần này đều có thể hiển thị 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 trê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 về việc 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.
Thu hút 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 báo cáo vấn đề tại crbug.com.