Thuộc tính text-orientation trong CSS

Định nghĩa và cách sử dụng

text-orientation Thuộc tính xác định hướng của ký tự.

Lưu ý:Chỉ khi writing-mode Chỉ có hiệu lực khi đặt thành dọc.

Mô hình

Ví dụ 1

Đặt hướng văn bản cho các phần tử <div> khác nhau:

div.a {
  text-orientation: mixed;
}
div.b {
  text-orientation: upright;
}

Thử ngay

Ví dụ 2

text-orientation Thuộc tính này có thể được sử dụng để thay đổi hướng của phần đầu của bảng:

th {
    writing-mode: vertical-lr;
    text-orientation: upright;
}

Thử ngay

Cú pháp CSS

text-orientation: mixed|upright|sideways|sideways-right|use-glyph-orientation|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
mixed Giá trị mặc định. Ký tự quay 90 độ theo chiều kim đồng hồ.
upright Ký tự không quay, giữ thẳng.
sideways Hướng của ký tự cùng với hướng của dòng văn bản khi writing-mode là dọc, tức là quay 90 độ theo chiều kim đồng hồ.
sideways-right Bằng giá trị của thuộc tính sideways. Dùng để đảm bảo tương thích.
use-glyph-orientation Dùng cho phần tử SVG, để văn bản kế thừa thuộc tính SVG đã bị bỏ đi glyph-orientation-vertical và glyph-orientation-horizontal.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Tiếp nhận thuộc tính này từ phần tử cha của nó. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: mixed
Kế thừa: yes
Tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.textOrientation="upright"

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
48.0 79.0 41.0 14.0 35.0

Trang liên quan

Tham khảo:Thuộc tính writing-mode trong CSS