CSS writing-mode property sử dụng như thế nào ?

CSS writing-mode property (tạm dịch: thuộc tính viết chữ CSS) xác định các hướng viết chữ của văn bản, bao gồm các hướng viết chữ theo chiều ngang và chiều dọc. Nó cho phép chỉ định các hướng di chuyển nội dung trên trang web, quyết định cách các dòng chữ được sắp xếp theo chiều dọc hoặc chiều ngang. Thuộc tính này cũng chỉ định hướng dòng khối, hướng mà các hộp hoặc container được xếp chồng lên nhau, và hướng mà chúng chảy trong container.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS writing-mode property là gì ?

CSS writing-mode property được sử dụng để thay đổi hướng viết chữ trên website. Thuộc tính này có thể xác định việc viết chữ theo chiều ngang hoặc chiều dọc, đồng thời chỉ định hướng của nội dung trên trang. Trong CSS, có ba giá trị có thể sử dụng: horizontal-tb, vertical-rl và vertical-lr.

• Giá trị mặc định của CSS writing-mode property là ‘horizontal-tb’, khi đó văn bản sẽ được viết theo chiều ngang và đọc từ trái qua phải, từ trên xuống dưới.
• Giá trị ‘vertical-rl’ là viết theo chiều dọc từ trên xuống dưới và từ phải sang trái.
• Giá trị ‘vertical-lr’ cũng viết theo chiều dọc, nhưng từ trái qua phải.

Ai sẽ dùng CSS writing-mode property

CSS writing-mode property là một công cụ hữu ích cho các nhà thiết kế web khi muốn tạo kiểu cho các nội dung trong trang web của mình. Thuộc tính này phù hợp với các trang web bảng tin, trang web chuyên về tiếng Hàn Quốc hoặc Trung Quốc, hoặc bất kỳ trang web nào có yêu cầu hiển thị nội dung theo chiều dọc.

Nếu bạn đang tạo một trang web bảng tin hàng ngày hoặc thường xuyên cập nhật, bạn nên sử dụng CSS writing-mode property để giúp nội dung trông đẹp hơn và dễ đọc hơn. Nó cũng phù hợp cho các trang web có nội dung theo kiểu lật sách, tạp chí hoặc blog.

Hướng dẫn CSS writing-mode property

Để sử dụng CSS writing-mode property, bạn có thể theo các bước sau:

1. Bước 1: Tạo một thẻ HTML và đặt nội dung bên trong.
2. Bước 2: Sử dụng thuộc tính CSS ‘writing-mode’ để định cấu hình hướng viết chữ cho nội dung trên trang web.

Cú pháp:

selector {
    writing-mode: value;
}

3. Bước 3: Thiết lập giá trị của thuộc tính “writing-mode” để chỉ định hướng viết chữ mong muốn.

Ví dụ:

<p class="horizontal-tb">This is horizontal text.</p>
<p class="vertical-rl">This text is written vertically from right to left.</p>
<p class="vertical-lr">This text is written vertically from left to right.</p>

<style>
.horizontal-tb {
  writing-mode: horizontal-tb;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-lr {
  writing -mode: vertical-lr;
}
</style>

Trong ví dụ này, thuộc tính CSS ‘writing-mode’ được sử dụng để xác định hướng viết chữ của các đoạn văn bản. Bằng cách sử dụng các giá trị khác nhau của thuộc tính này, ta có thể thiết lập hướng viết chữ theo chiều ngang hoặc chiều dọc cho các đoạn văn bản.

Ví dụ CSS writing-mode property

CSS writing-mode property cho phép bạn chỉ định hướng của văn bản trong một phần tử.

Giá trị mặc định của thuộc tính này là horizontal-tb, có nghĩa là văn bản được hiển thị theo chiều ngang từ trái sang phải.

Để chỉ định hướng của văn bản trong một phần tử, bạn có thể sử dụng một trong các giá trị sau:

• horizontal-tb: Văn bản được hiển thị theo chiều ngang từ trái sang phải.
• vertical-rl: Văn bản được hiển thị theo chiều dọc từ phải sang trái.
• vertical-lr: Văn bản được hiển thị theo chiều dọc từ trái sang phải.
• sideways-rl: Văn bản được hiển thị theo chiều ngang từ trên xuống dưới.
• sideways-lr: Văn bản được hiển thị theo chiều ngang từ dưới lên trên.

Ví dụ:

// Để hiển thị văn bản theo chiều dọc từ phải sang trái trong một phần tử
div {
  writing-mode: vertical-rl;
}

Ví dụ này sẽ hiển thị văn bản theo chiều dọc từ phải sang trái trong phần tử div.

Dưới đây là một số ví dụ cụ thể về cách sử dụng CSS writing-mode property:

Để hiển thị văn bản theo chiều ngang từ trái sang phải trong một phần tử, bạn có thể sử dụng writing-mode: horizontal-tb;.

div {
  writing-mode: horizontal-tb;
}

Để hiển thị văn bản theo chiều dọc từ phải sang trái trong một phần tử, bạn có thể sử dụng writing-mode: vertical-rl;.

div {
  writing-mode: vertical-rl;
}

Để hiển thị văn bản theo chiều dọc từ trái sang phải trong một phần tử, bạn có thể sử dụng writing-mode: vertical-lr;.

div {
  writing-mode: vertical-lr;
}

Để hiển thị văn bản theo chiều ngang từ trên xuống dưới trong một phần tử, bạn có thể sử dụng writing-mode: sideways-rl;.

div {
  writing-mode: sideways-rl;
}

Để hiển thị văn bản theo chiều ngang từ dưới lên trên trong một phần tử, bạn có thể sử dụng writing-mode: sideways-lr;.

div {
  writing-mode: sideways-lr;
}

Ưu và Nhược điểm CSS writing-mode property

Ưu điểm

• Cho phép hiển thị nội dung website dễ đọc hơn.
• Tạo ra một cái nhìn mới mẻ cho các trang web.
• Cải thiện trải nghiệm người dùng khi xem nội dung trên các thiết bị di động.

Nhược điểm

• Khó sử dụng cho các trang web chuyên về tiếng Anh, do tiếng Anh được viết từ trái qua phải và từ trên xuống dưới.
• Không phù hợp cho các trang web có nội dung dài.

Lời khuyên CSS writing-mode property

Việc sử dụng CSS writing-mode property phụ thuộc vào kiểu trang web bạn đang thiết kế. Nếu bạn muốn tăng tính tương tác và trải nghiệm người dùng, hãy cân nhắc sử dụng thuộc tính này. Tuy nhiên, nếu trang web của bạn có nội dung dài, hãy suy nghĩ kỹ trước khi sử dụng CSS writing-mode property.