Chế Độ Ghi CSS: Một Cuộc Hành Trình QuaOrientation Văn Bản

Xin chào các bạn nhà phát triển web! Hôm nay, chúng ta sẽ bắt đầu một cuộc phiêu lưu thú vị vào thế giới của Chế độ Ghi CSS. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi sẽ hướng dẫn bạn qua thuộc tính kỳ diệu này có thể thực sự lật ngược văn bản của bạn! Hãy cột chặt dây an toàn và cùng tôi lặn sâu vào!

Chế độ Ghi CSS là gì?

Trước khi chúng ta bắt đầu viết mã, hãy hiểu rõ về chế độ ghi là gì. Hãy tưởng tượng bạn đang đọc một cuốn sách. Trong tiếng Anh, chúng ta thường đọc từ trái sang phải và từ trên xuống dưới. Nhưng nếu bạn đang đọc một cuốn sách truyền thống bằng tiếng Nhật? Văn bản sẽ chạy theo chiều dọc từ trên xuống và từ phải sang trái. Đó là khi thuộc tính writing-mode trong CSS trở nên hữu ích!

Thuộc tính writing-mode trong CSS cho phép chúng ta kiểm soát hướng hiển thị văn bản và các nội dung inline khác. Nó giống như một cây c这支魔法 có thể làm cho văn bản của bạn nhảy múa theo các hướng khác nhau!

Các Giá Trị Có Thể

Hãy cùng nhìn qua các giá trị khác nhau mà chúng ta có thể sử dụng với thuộc tính writing-mode:

Giá trị	Mô tả
horizontal-tb	Văn bản chảy theo chiều ngang từ trái sang phải, từ trên xuống dưới
vertical-rl	Văn bản chảy theo chiều dọc từ trên xuống, từ phải sang trái
vertical-lr	Văn bản chảy theo chiều dọc từ trên xuống, từ trái sang phải
sideways-rl	Văn bản chảy theo chiều dọc từ trên xuống, tất cả các ký tự được quay 90° clockwise
sideways-lr	Văn bản chảy theo chiều dọc từ trên xuống, tất cả các ký tự được quay 90° counter-clockwise

Áp Dụng Cho

Thuộc tính writing-mode có thể được áp dụng cho tất cả các phần tử, bao gồm ::first-letter và ::first-line pseudo-elements. Nó giống như một remote điều khiển universel cho hướng văn bản!

Cú Pháp DOM

Bây giờ, hãy xem cách chúng ta có thể sử dụng writing-mode trong CSS của mình:

element {
writing-mode: value;
}

Đơn giản phải không? Hãy cùng lặn sâu vào từng giá trị và xem chúng trong hành động!

CSS writing-mode - giá trị horizontal-tb

Đây là chế độ ghi mặc định cho phần lớn các ngôn ngữ, bao gồm tiếng Anh. Hãy xem một ví dụ:

<div class="horizontal-tb">
<p>Đây là văn bản ngang từ trái sang phải, từ trên xuống dưới.</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

Điều này sẽ hiển thị văn bản như bạn đang đọc bài viết này. Không có gì đặc biệt, nhưng đó là điểm xuất phát của chúng ta!

CSS writing-mode - giá trị vertical-rl

Bây giờ, hãy lật ngược mọi thứ:

<div class="vertical-rl">
<p>Đây là văn bản dọc, từ phải sang trái!</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

Voila! Văn bản của bạn bây giờ chạy theo chiều dọc từ trên xuống và các dòng nhiều sẽ bắt đầu từ bên phải và di chuyển sang trái. Nó giống như đang đọc một cuộn văn bản truyền thống bằng tiếng Nhật hoặc Trung Quốc!

CSS writing-mode - giá trị vertical-lr

Hãy thử chế độ dọc từ trái sang phải:

<div class="vertical-lr">
<p>Đây là văn bản dọc, từ trái sang phải!</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

Bây giờ văn bản của bạn là dọc, nhưng nó bắt đầu từ bên trái. Nó giống như đang đọc một bản thảo Mông Cổ!

CSS writing-mode - giá trị sideways-rl

Chuẩn bị cho một chút nhào lộn? Hãy thử sideways-rl:

<div class="sideways-rl">
<p>Đây là văn bản xiên, từ phải sang trái!</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

Điều này quay mỗi ký tự 90° clockwise. Nó giống như văn bản của bạn đang làm một ván lăn!

CSS writing-mode - giá trị sideways-lr

Và bây giờ là cú lật cuối cùng:

<div class="sideways-lr">
<p>Đây là văn bản xiên, từ trái sang phải!</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

Lần này, mỗi ký tự được quay 90° counter-clockwise. Nó giống như văn bản của bạn đang làm một cú lộn ngược!

CSS writing-mode - Sử Dụng Thẩm Mỹ (Ngôn Ngữ Tiếng Anh)

Mặc dù các chế độ ghi khác nhau rất quan trọng để hỗ trợ nhiều ngôn ngữ, chúng cũng có thể được sử dụng sáng tạo trong tiếng Anh. Dưới đây là một ví dụ vui:

<div class="book-spine">
<h2>Chuyến Phiêu Lưu CSS</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

Điều này tạo ra văn bản dọc trông giống như cột sống của một cuốn sách trên kệ. Đ Cooler, phải không?

CSS writing-mode - Các Thuộc Tính Liên Quan

Để kiểm soát hoàn toàn hướng văn bản, bạn có thể muốn sử dụng các thuộc tính này cùng với writing-mode:

Thuộc tính	Mô tả
text-orientation	Định nghĩa hướng của các ký tự văn bản
direction	Đặt hướng của văn bản, các phần tử inline, và cột bảng
unicode-bidi	Thay thế thuật toán bidirectional cho văn bản

Dưới đây là một ví dụ nhanh:

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

Điều này cho phép văn bản dọc nơi một số ký tự (như các ký tự Latinh) được quay, trong khi các ký tự khác (như các ký tự Trung Quốc) giữ nguyên.

Và thế là xong, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới kỳ diệu của Chế độ Ghi CSS. Nhớ rằng, internet là một nền tảng toàn cầu, và các thuộc tính này giúp làm cho nó khả dụng và đẹp mắt cho mọi người, bất kể ngôn ngữ hoặc hệ thống chữ viết của họ.

Lần sau khi bạn xây dựng một trang web, tại sao không thử chơi với các thuộc tính này? Bạn có thể tạo ra điều gì đó bất ngờ và tuyệt vời! Chúc các bạn viết mã vui vẻ, và mong rằng văn bản của bạn luôn chảy theo hướng đúng!

Credits: Image by storyset