Các writing-modebất động sản thay đổi sự liên kết của văn bản để nó có thể được đọc từ trên xuống dưới hoặc từ trái sang phải, tùy thuộc vào ngôn ngữ. Ví dụ: giả sử chúng ta muốn thêm một số văn bản được đọc từ trên xuống dưới và từ phải sang trái, như sau:
.vertical-rl ( writing-mode: vertical-rl; )Xem Chế độ viết bút: vertical-rl của CSS-Tricks (@ css-trick) trên CodePen.
Điều này hữu ích nhất trong các ngôn ngữ như Trung Quốc, Nhật Bản hoặc Hàn Quốc, nơi văn bản thường được đặt theo chiều dọc. Trong ngôn ngữ tiếng Anh, nhiều khả năng bạn sẽ muốn sử dụng thuộc tính này vì lý do thẩm mỹ, chẳng hạn như căn chỉnh tiêu đề trong một khối văn bản như sau:
Xem Pen YWBWGA của CSS-Tricks (@ css-trick) trên CodePen.
Giá trị
Trong các ví dụ dưới đây, tôi đã đặt chữ cái đầu tiên của văn bản màu đỏ, để dễ dàng hơn khi xem bạn cần bắt đầu đọc theo hướng nào.
ngang-tb
Đây là giá trị mặc định của thuộc tính: văn bản được đọc từ trái sang phải và từ trên xuống dưới.
Xem Chế độ viết bút: ngang-tb của CSS-Tricks (@ css-trick) trên CodePen.
dọc-rl
Văn bản được đọc từ phải sang trái và từ trên xuống dưới:
Xem Chế độ viết bút: vertical-rl của CSS-Tricks (@ css-trick) trên CodePen.
dọc-lr
Văn bản được đọc từ trái sang phải và từ trên xuống dưới:
Xem Chế độ viết bút: vertical-rl của CSS-Tricks (@ css-trick) trên CodePen.
Liên kết liên quan
- Văn bản dọc với Chế độ viết CSS3
- Ahmad Shadeed trên chế độ viết
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| số 8* | 41 | 11 | 12 | 5.1 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |