Định hướng văn bản - Thủ thuật CSS

Các text-orientationbất động sản trong văn bản CSS Canh lề trong một dòng khi làm việc với một dọc writing-mode. Về cơ bản, nó xoay dòng 90 ° theo chiều kim đồng hồ để giúp kiểm soát cách hiển thị ngôn ngữ theo chiều dọc - giống như cách text-combine-uprightxoay các nhóm ký tự trong một dòng văn bản trong tập lệnh dọc, nhưng đối với các dòng văn bản đầy đủ.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

Để xử lý văn bản hai hướng - ví dụ như một khối chứa cả văn bản từ trái sang phải và từ phải sang trái - hãy kiểm tra thuộc unicode-biditính. Nó được kết hợp với thuộc directiontính để ghi đè cách trình duyệt quyết định hiển thị văn bản.

Cú pháp

text-orientation: mixed | upright | sideways

Ban đầu: mixed
Áp dụng cho: tất cả các phần tử ngoại trừ nhóm hàng trong bảng, hàng, nhóm cột và cột
Kế thừa: có
Phần trăm: n / a
Giá trị được tính: giá trị được chỉ định
Loại hoạt ảnh: không hoạt hình

Giá trị

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Giá trị mặc định. Các ký tự trong tập lệnh ngang được xoay 90 ° theo chiều kim đồng hồ. Các ký tự trong tập lệnh dọc được hiển thị theo hướng dọc tự nhiên của chúng.
upright: Các ký tự trong chữ viết ngang được đặt ở vị trí thẳng đứng theo chiều ngang tự nhiên của chúng, bao gồm một số nét chữ. Vì vậy, trong đó chế độ viết dọc có thể xoay một dòng văn bản để các ký tự nằm ngang, giá trị này sẽ tự xoay các ký tự 90 ° về vị trí tự nhiên của chúng. Lưu ý rằng giá trị này buộc thuộc directiontính phải có giá trị đã sử dụng ltr, nghĩa là tất cả các ký tự được xử lý như thể chúng đang ở chế độ viết từ trái sang phải.
sideways: Tất cả văn bản ở chế độ viết dọc được hiển thị sang một bên, như thể nó ở trong một bố cục nằm ngang, nhưng toàn bộ dòng được xoay 90 ° theo chiều kim đồng hồ.
sideways-right: Một số trình duyệt tôn trọng giá trị này như một bí danh cho sidewaysgiá trị được giữ để tương thích ngược.

use-glyph-orientationđã bị xóa dưới dạng giá trị từ khóa vào tháng 12 năm 2015. Nó được sử dụng trên các phần tử SVG để xác định các thuộc tính SVG glyph-orientation-verticalvà glyph-orientation-horizontalhiện không được dùng nữa. glyph-orientation-verticalbây giờ là một bí danh cho text-orientation.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Cạnh	Safari
48	41	Không	79	10.1 *

Di động / Máy tính bảng

Chrome dành cho Android	Android Firefox	Android	iOS Safari
88	85	81	10.0-10.2

Sự chỉ rõ

Chế độ viết CSS Cấp độ 3 (Bản thảo của người biên tập)

Thêm thông tin

Tại sao Định hướng Văn bản Theo chiều dọc là Một cơn ác mộng đối với khả năng tương thích của nhiều trình duyệt? của Nikhil - Giải thích cặn kẽ về text-orientationvà writing-mode.
Dễ dàng tạo văn bản trên vỉa hè bằng cách sử dụng Thuộc tính CSS “chế độ viết” của Adi Purdila - Ngoài việc sử dụng, khám phá các phương pháp tiếp cận khác nhau text-orientation.
2 Cách Tạo Văn Bản Dọc trong CSS bằng WS Toh - So sánh trực tiếp hơn giữa các phương pháp sử dụng writing-modevà text-orientation.
Xoay văn bản của Chris Coyier - Một cách tiếp cận văn bản dọc bằng cách sử dụng transformthay vì writing-modehoặc text-orientation.