Các text-combine-upright
thuộc tính CSS kết hợp các nhân vật vào không gian của một ký tự. Thông số kỹ thuật gọi đây là bố cục “ngang trong dọc”, đây là một cách hay để mô tả trường hợp sử dụng: các tình huống mà bạn có thể cần một số ký tự trong chế độ viết dọc để hiển thị theo chiều ngang trên cùng một dòng.
span ( text-combine-upright: all; )
Kỹ thuật văn bản ngang trong văn bản dọc là một kỹ thuật tiếng Nhật gọi là tate-chū-yoko. Đây là cách nó trông:

writing-mode: vertical-rl;
), giống như bên trái của hình minh họa này, thuộc text-combine-upright
tính có thể lấy nhiều ký tự và hiển thị chúng theo chiều ngang, về cơ bản chia không gian ký tự thành các phần bằng nhau tùy theo số ký tự được chọn. Trong ví dụ này, bên phải hiển thị hai ký tự chia sẻ cùng một không gian ký tự bên trong chế độ viết dọc.
Cú pháp
text-combine-upright: none | all | ( digits ? )
- Giá trị ban đầu:
none
- Áp dụng cho: phần tử nội tuyến không thay thế
- Kế thừa: có
- Phần trăm: n / a
- Giá trị được tính: từ khóa được chỉ định, cộng với số nguyên nếu
digits
- Loại hoạt ảnh: không hoạt hình
Giá trị
text-combine-upright
chấp nhận các giá trị sau:
none
: Đây là giá trị ban đầu. Không có ký tự nào được hiển thị theo chiều ngang trong chế độ viết dọc.all
: Tất cả các ký tự kiểu chữ liên tiếp trong hộp chứa dọc được hiển thị theo chiều ngang trên cùng một dòng, chiếm không gian của một ký tự trong hộp dọc.digits ?
: Tất cả các chữ số ASCII liên tiếp trong hộp chứa dọc được hiển thị theo chiều ngang trên cùng một dòng, chiếm khoảng trống của một ký tự trong hộp dọc, tối đa là số nguyên được chỉ định. Nếu không có số nguyên nào cụ thể, thì giá trị mặc định là 2 chữ số. Bất kỳ điều gì dưới 2 và trên 4 đều không hợp lệ.
/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* 2 digits */ text-combine-upright: digits 4; /* 4 digits */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset;
Sử dụng
Giả sử chúng ta lấy ví dụ trực tiếp từ thông số kỹ thuật, đó là một phần tử có chế độ viết dọc.
平成20年4月16日に
date ( writing-mode: vertical-lr; )
OK, chúng tôi muốn các số trong ngày hiển thị theo chiều ngang. Thật hợp lý khi giả định rằng việc thêm text-combine-upright
trực tiếp vào phần tử sẽ thực hiện thủ thuật:
date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )
Buuuuut, không quá nhiều. Tại thời điểm viết bài, chúng ta cần áp dụng thuộc tính trên chính các chữ số để điều này hoạt động. Một nhịp sẽ làm.
平成20年4月16日に
date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )
Bắt đầu!
Hỗ trợ trình duyệt
Như chúng ta vừa thấy trong ví dụ, hiện tại hỗ trợ trình duyệt còn hơi rải rác. Trong khi nhiều trình duyệt cung cấp hỗ trợ ít nhất một phần cho giá trị text-combine-upright
, thì hỗ trợ cho digits
giá trị ít hơn nhiều so với all
giá trị.
I E | Cạnh | Firefox | Trình duyệt Chrome | Safari | Opera |
---|---|---|---|---|---|
11¹ | 12 + ¹ | 48 + ² | 48+ | 5,1 + ³ | 35+ |
Chrome dành cho Android | Android Firefox | Trình duyệt Android | iOS Safari | Opera Mobile |
---|---|---|---|---|
86+ | 82 + ² | 81+ | 5 + ³ | 59+ |
- Sử dụng tên không chuẩn:
-ms-text-combine-horizontal
- Nhận ra
digits
giá trị đằng saulayout.css.text-combine-upright-digits.enabled
cờ thử nghiệm, nhưng chưa triển khai hỗ trợ bố cục cho tate-chū-yoko - Sử dụng tên không chuẩn:
-webkit-text-combine
Sự chỉ rõ
- Chế độ viết CSS Cấp độ 4 (Bản thảo của người biên tập)
Thuộc tính liên quan
Almanac vào ngày 5 tháng 1 năm 2021phương hướng
.element ( direction: rtl; )




chế độ viết
.element ( writing-mode: vertical-rl; )

