text-combine-upright
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Thuộc tính CSS text-combine-upright đặt sự kết hợp các ký tự vào không gian của một ký tự đơn. Nếu văn bản kết hợp rộng hơn 1em, tác nhân người dùng phải co nội dung vào trong 1em. Bố cục kết quả được coi như một glyph đứng duy nhất để bố trí và trang trí. Thuộc tính này chỉ có tác dụng trong các chế độ viết dọc.
Điều này được sử dụng để tạo ra hiệu ứng được gọi là tate-chū-yoko 縦中横
trong tiếng Nhật, hoặc 橫向文字
trong tiếng Trung.
Try it
text-combine-upright: none;
text-combine-upright: all;
<section class="default-example" id="default-example">
<div>
<p>
<span class="transition-all" id="example-element"
>2022<span>年</span>12<span>月</span>8</span
>日から楽しい
</p>
</div>
</section>
p {
writing-mode: vertical-rl;
}
Cú pháp
/* Giá trị từ khóa */
text-combine-upright: none;
text-combine-upright: all;
/* Giá trị toàn cục */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;
Giá trị
none-
Không có xử lý đặc biệt.
all-
Cố gắng sắp chữ tất cả các ký tự liên tiếp trong hộp theo chiều ngang, sao cho chúng chiếm không gian của một ký tự đơn trong dòng dọc của hộp.
Note:
Mô-đun chế độ viết CSS định nghĩa giá trị digits <integer> cho thuộc tính text-combine-upright để hiển thị hai đến bốn chữ số ASCII liên tiếp (U+0030–U+0039) sao cho chúng chiếm không gian của một ký tự đơn trong hộp dòng dọc, tuy nhiên giá trị này không được hỗ trợ trong bất kỳ trình duyệt nào.
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | non-replaced inline elements |
| Inherited | yes |
| Computed value | specified keyword, plus integer if 'digits' |
| Animation type | Not animatable |
Cú pháp hình thức
text-combine-upright =
none |
all |
[ digits <integer [2,4]>? ]
<integer> =
<number-token>
Ví dụ
Dùng 'all' với văn bản ngang
Giá trị all yêu cầu đánh dấu xung quanh mỗi đoạn văn bản ngang, nhưng hiện tại được hỗ trợ bởi nhiều trình duyệt hơn giá trị digits.
HTML
<p lang="zh-Hant">
民國<span class="num">105</span>年<span class="num">4</span>月<span
class="num"
>29</span
>日
</p>
CSS
html {
writing-mode: vertical-rl;
font: 24px serif;
}
.num {
text-combine-upright: all;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |