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

CSS text-orientation là thuộc tính CSS được sử dụng để xác định hướng của các ký tự trong dòng nội dung. Thuộc tính này chỉ áp dụng cho chế độ dọc của nội dung và không ảnh hưởng đến các phần tử có chế độ viết ngang. Nó giúp chúng ta điều khiển hiển thị của ngôn ngữ sử dụng ký tự dọc. Có năm giá trị cho thuộc tính này: mixed, sideways, upright, sideways-right và use-glyph-orientation. Giá trị mặc định của nó là mixed. Tất cả các giá trị của thuộc tính này chỉ hoạt động trong chế độ dọc. Thuộc tính này phụ thuộc vào thuộc tính writing-mode. Nó chỉ hoạt động khi writing-mode không được thiết lập là horizontal-tb.

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 text-orientation property là gì

CSS text-orientation property là thuộc tính CSS được sử dụng để xác định hướng của các ký tự trong dòng nội dung. Nó chỉ áp dụng cho chế độ dọc của nội dung và không ảnh hưởng đến các phần tử có chế độ viết ngang. Nó giúp chúng ta điều khiển hiển thị của ngôn ngữ sử dụng ký tự dọc. Có năm giá trị cho thuộc tính này: mixed, sideways, upright, sideways-right và use-glyph-orientation. Giá trị mặc định của nó là mixed. Tất cả các giá trị của thuộc tính này chỉ hoạt động trong chế độ dọc.

Ai sẽ dùng CSS text-orientation property

CSS text-orientation property được sử dụng bởi các nhà phát triển web để điều khiển hiển thị của ngôn ngữ sử dụng ký tự dọc. Nó có thể được sử dụng trong các trang web nơi các ngôn ngữ sử dụng ký tự dọc phải được hiển thị theo cách đúng và đẹp mắt.

CSS text-orientation property là thuộc tính CSS được sử dụng để xác định hướng của các ký tự trong dòng nội dung. Thuộc tính này chỉ áp dụng cho chế độ dọc của nội dung và không ảnh hưởng đến các phần tử có chế độ viết ngang. Nó giúp chúng ta điều khiển hiển thị của ngôn ngữ sử dụng ký tự dọc. Có năm giá trị cho thuộc tính này: mixed, sideways, upright, sideways-right và use-glyph-orientation. Giá trị mặc định của nó là mixed. Tất cả các giá trị của thuộc tính này chỉ hoạt động trong chế độ dọc.

Hướng dẫn CSS text-orientation property

Để sử dụng CSS text-orientation property, chúng ta cần phải xác định giá trị cho thuộc tính này và áp dụng nó vào các phần tử HTML. Cú pháp sử dụng như sau:

selector {
    text-orientation: value;
}

Trong đó, selector có thể là tên thẻ HTML, class hoặc id và value là giá trị được sử dụng cho thuộc tính.

Ví dụ:

p {
    text-orientation: upright;
}

Trong ví dụ này, thuộc tính text-orientation được áp dụng cho phần tử p và sử dụng giá trị upright. Điều này sẽ làm cho các ký tự trong phần tử p được hiển thị theo hướng ngang và các ký tự của kịch bản dọc được hiển thị theo cách đúng và đẹp mắt.

Ví dụ CSS text-orientation property

CSS text-orientation property cho phép bạn chỉ định cách văn bản được hiển thị 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 cách văn bản được hiển thị 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ừ trái sang phải trong một phần tử
div {
  text-orientation: vertical-lr;
}

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

Dưới đây là một số ví dụ cụ thể về cách sử dụng CSS text-orientation 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 text-orientation: horizontal-tb;.

div {
  text-orientation: 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 text-orientation: vertical-rl;.

div {
  text-orientation: 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 text-orientation: vertical-lr;.

div {
  text-orientation: 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 text-orientation: sideways-rl;.

div {
  text-orientation: 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 text-orientation: sideways-lr;.

div {
  text-orientation: sideways-lr;
}

Bạn có thể sử dụng CSS text-orientation property để tạo ra các hiệu ứng văn bản thú vị và sáng tạo.

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

• Để tạo một bảng chữ cái được hiển thị theo chiều dọc, bạn có thể sử dụng text-orientation: vertical-rl; và font-size: 20px;.
• Để tạo một văn bản được hiển thị theo chiều ngang từ trên xuống dưới, bạn có thể sử dụng text-orientation: sideways-rl; và transform: rotate(-90deg);.
• Để tạo một văn bản được hiển thị theo chiều dọc từ dưới lên trên, bạn có thể sử dụng text-orientation: sideways-lr; và transform: rotate(90deg);.

Ưu và Nhược điểm CSS text-orientation property

Ưu điểm:

• Giúp chúng ta điều khiển hiển thị của ngôn ngữ sử dụng ký tự dọc.
• Có năm giá trị để xác định hướng ký tự trong dòng nội dung.
• Thuận tiện cho việc hiển thị các ký tự trong các kịch bản dọc.

Nhược điểm:

• Chỉ áp dụng cho chế độ dọc của nội dung và không ảnh hưởng đến các phần tử có chế độ viết ngang.
• Không hoạt động trên tất cả các trình duyệt, chỉ hoạt động trên Firefox với giá trị sideways.

Lời khuyên CSS text-orientation property

Khi sử dụng CSS text-orientation property, chúng ta cần lưu ý rằng thuộc tính này chỉ áp dụng cho chế độ dọc của nội dung và không ảnh hưởng đến các phần tử có chế độ viết ngang. Nếu trang web của bạn không sử dụng ngôn ngữ sử dụng ký tự dọc, thì không cần thiết phải sử dụng thuộc tính này.

Nếu bạn muốn hiển thị các ký tự trong các kịch bản dọc, hãy sử dụng giá trị mixed hoặc upright. Tuy nhiên, nếu trang web của bạn có lượng khách hàng sử dụng Firefox nhiều, hãy cân nhắc việc sử dụng giá trị sideways để đảm bảo hiển thị chính xác của các ký tự trong các kịch bản dọc.