Thuộc tính text-orientation trong CSS dùng để đặt hướng ký tự trên dòng. Thuộc tính này hữu ích trong viết dọc như tạo tiêu đề bảng dọc. Nó cũng giúp định nghĩa tên hàng, v.v.
Cú pháp:
text-orientation: mixed|upright|sideways;
Thuộc tính:
- mixed: Giá trị này xoay ký tự của văn bản 90 độ theo chiều kim đồng hồ. Đây là giá trị mặc định.
Ví dụ:
html<!DOCTYPE html>
<head>
<title>
CSS | text-orientation Property
</title>
<style>
h1 {
color:green;
}
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
</body>
</html>
Đầu ra:
- upright: Giá trị này bắt đầu văn bản từ bên phải màn hình xuống dưới.
Ví dụ:
html<!DOCTYPE html>
<head>
<title>
CSS | text-orientation Property
</title>
<style>
h1 {
color:green;
}
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
</body>
</html>
Đầu ra:
- sideways: Giá trị này xoay dòng văn bản 90 độ theo chiều kim đồng hồ.
Ví dụ:
html<!DOCTYPE html>
<head>
<title>
CSS | text-orientation Property
</title>
<style>
h1 {
color:green;
}
p {
writing-mode: vertical-rl;
text-orientation: sideways;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
</body>
</html>
Đầu ra:
Lưu ý: Thuộc tính text-orientation phụ thuộc vào writing-mode property. Nếu nó không được đặt trên horizontal-tb thuộc tính này sẽ hoạt động.
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ text-orientation Property được liệt kê dưới đây:
- Google Chrome 48
- Edge 79
- Firefox 41
- Opera 35
- Safari 14