Văn bản-kết hợp-ngay thẳng - Thủ thuật CSS

Anonim

Các text-combine-uprightthuộ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:

Khi làm việc với chế độ viết dọc từ trái sang phải ( writing-mode: vertical-rl;), giống như bên trái của hình minh họa này, thuộc text-combine-uprighttí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:
  • 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ếudigits
  • 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-uprighttrự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 digitsgiá trị ít hơn nhiều so với allgiá 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+
Nguồn: caniuse
  1. Sử dụng tên không chuẩn: -ms-text-combine-horizontal
  2. Nhận ra digitsgiá trị đằng sau layout.css.text-combine-upright-digits.enabledcờ thử nghiệm, nhưng chưa triển khai hỗ trợ bố cục cho tate-chū-yoko
  3. 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 2021

phương hướng

.element ( direction: rtl; ) Jwahir Sundai Almanac vào ngày 5 tháng 1 năm 2021

chế độ viết

.element ( writing-mode: vertical-rl; ) Robin Rendle