Ra mắt từ Chrome 119 đến 123 là một tính năng mới của Dịch vụ so sánh giá (CSS) quốc tế của CSS Chế độ ghi cấp 4. Ngành dọc chế độ viết 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ể được được hiển thị ở chế độ viết 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 sẽ giải thích về tính năng này.
Chế độ viết 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 hoàn toàn tính năng này, bạn có thể dùng chế độ viết dọc
chế độ cho các phần tử điều khiển biểu mẫu như nút, chọn danh sách và tiến trình
phần tử. Để sử dụng thuộc tính này, hãy đặt chế độ viết của thuộc tính CSS thành vertical-lr cho
hướng luồng từ trái sang phải và vertical-rl cho khối từ phải sang trái
hướng dòng chảy.
Điều này hữu ích cho nhiều ngôn ngữ Đông Á vốn thường sử dụng các chữ viết dọc để viết. Ví dụ: tiếng Nhật phồn thể 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ề chế độ kiểm soát 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ị toàn bộ 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 có các tuỳ chọn của cửa sổ bật lên được hiển thị theo chiều ngang.
Phương thức nhập bằng 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 nhập văn bản, giờ đây, bạn có thể sử dụng thành phần chế độ viết 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 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ì
như <meter>, <progress> và <input type=range> có thể làm như vậy.
Trước đây, chỉ có thể hiển thị <range> theo chiều dọc bằng cách sử dụng CSS không chuẩn
giá trị giao diện slider-vertical. Giờ đây, cả ba đều có thể được hiển thị theo chiều dọc
bằng thuộc tính writing-mode của 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ẽ
hiển thị từ trên xuống dưới. Bạn có thể chỉ định hướng của giá trị đặt ở dưới cùng
lên trên cùng 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.
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 gửi vấn đề tại crbug.com.