Thuộc tính writing-mode trong CSS
Bùi Tấn Lực - 926
- 30/09/2025
Chức năng của Thuộc tính writing-mode trong CSS
Thuộc tính writing-mode trong CSS dùng để chỉ định hướng chảy của văn bản từ trên xuống dưới, từ trái sang phải, từ phải sang trái.
Cú pháp của Thuộc tính writing-mode trong CSS
writing-mode: giatri;
giatri: Giá trị để chỉ định hướng chảy của văn bản từ trên xuống dưới, từ trái sang phải, từ phải sang trái (Ví dụ: vertical-rl, vertical-lr)
Các giá trị của Thuộc tính writing-mode trong CSS
vertical-rl: Từ trên xuống dưới, từ phải sang trái.
vertical-lr: Từ trên xuống dưới, từ trái sang phải.
Code Thuộc tính writing-mode trong CSS
writing-mode:vertical-rl; Từ trên xuống dưới, từ phải sang trái
writing-mode: vertical-lr; Từ trên xuống dưới, từ trái sang phải
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính writing-mode trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
p{width:100%;margin:0px;padding:0px;text-transform: uppercase;font-weight: bold;font-size:21px}
span {width:100%; float: left; height: auto; margin-bottom:20px}
</style>
</head>
<body>
<h1>Code Thuộc tính writing-mode trong CSS</h1>
<span>Dùng để chỉ định hướng chảy của văn bản từ trên xuống dưới, từ trái sang phải, từ phải sang trái:</span>
<p style="writing-mode:horizontal-tb">horizontal-tb</p>
<!--Từ trên xuống dưới, từ phải sang trái-->
<p style="writing-mode:vertical-rl">vertical-rl</p>
<!--Từ trên xuống dưới, từ trái sang phải-->
<p style="writing-mode:vertical-lr">vertical-lr</p>
</body>
</html>
writing-mode trong CSS được ứng dụng vào những trường hợp nào?
writing-mode phù hợp khi cần thay đổi hướng trình bày của nội dung chữ thay vì chỉ xoay một phần tử bằng transform. Thuộc tính này đặc biệt hữu ích với các giao diện có tiêu đề dọc, nhãn bên cạnh nội dung hoặc bố cục cần hỗ trợ cách trình bày văn bản theo nhiều hướng.
Tạo bố cục chữ dọc cho giao diện website
Trong một số thiết kế, chữ dọc giúp tận dụng không gian hẹp hoặc tạo điểm nhấn trực quan cho giao diện. Với writing-mode, hướng dòng chữ được thay đổi theo cách phù hợp với hệ thống bố cục của văn bản, thay vì biến toàn bộ nội dung thành một hình ảnh bị xoay.
Chẳng hạn, một nhãn nằm ở cạnh bên của khu vực nội dung có thể được trình bày theo chiều dọc bằng giá trị vertical-rl:
.nhan-doc {
writing-mode: vertical-rl;
}
Cách này đặc biệt hữu ích với các thành phần như nhãn danh mục, tiêu đề phụ, thanh thông tin hoặc những khu vực có chiều rộng hạn chế. Nội dung vẫn là văn bản thực tế nên có thể được trình duyệt và công cụ hỗ trợ xử lý tốt hơn so với việc dùng hình ảnh chứa chữ.
Kết hợp writing-mode với các thuộc tính CSS khác
writing-mode thường phát huy hiệu quả tốt hơn khi được sử dụng cùng các thuộc tính điều khiển hướng chữ và cách hiển thị ký tự. direction có thể ảnh hưởng đến hướng trình bày theo ngữ cảnh ngôn ngữ, trong khi text-orientation kiểm soát cách các ký tự được đặt trong chế độ viết dọc.
Ví dụ, một khu vực hiển thị văn bản dọc có thể thiết lập thêm text-orientation để kiểm soát hướng của ký tự:
.tieu-de-doc {
writing-mode: vertical-rl;
text-orientation: mixed;
}
Khi kết hợp các thuộc tính này, nên kiểm tra trực tiếp trên nội dung thực tế và nhiều kích thước màn hình. Đặc biệt với giao diện responsive, chiều rộng của phần tử, khoảng cách, chiều cao dòng và cách xuống dòng có thể thay đổi đáng kể khi hướng viết được chuyển từ ngang sang dọc.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính writing-mode trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
