Teks-gabungan-tegak - Trik CSS

The text-combine-uprightharta CSS menggabungkan watak-watak ke dalam ruang satu aksara. Spesifikasi menyebut komposisi “horizontal-in-vertical” ini adalah cara yang baik untuk menggambarkan kes penggunaan: situasi di mana anda mungkin memerlukan beberapa watak dalam mod penulisan menegak untuk dipaparkan secara mendatar pada baris yang sama.

span ( text-combine-upright: all; )

Teknik teks melintang dalam teks menegak adalah bahasa Jepun yang disebut tate-chū-yoko. Begini rupa:

Semasa bekerja dengan mod penulisan kiri-ke-kanan menegak ( `writing-mode: vertical-rl;`), seperti sebelah kiri ilustrasi ini, `text-combine-upright`harta tanah dapat mengambil beberapa aksara dan memaparkannya secara mendatar, pada dasarnya membelah ruang watak menjadi bahagian yang sama mengikut berapa banyak watak yang dipilih. Dalam contoh ini, sebelah kanan menunjukkan dua watak yang berkongsi ruang watak yang sama di dalam mod penulisan menegak.

Sintaks

text-combine-upright: none | all | ( digits ? )

Nilai awal: none
Berlaku untuk: elemen sebaris yang tidak diganti
Diwarisi: ya
Peratusan: n / a
Nilai dikira: kata kunci yang ditentukan, ditambah bilangan bulat jikadigits
Jenis animasi: tidak beranimasi

Nilai

text-combine-upright menerima nilai berikut:

none: Ini adalah nilai awal. Tidak ada watak yang dipaparkan secara mendatar dalam mod penulisan menegak.
all: Semua watak tipografi berturut-turut dalam kotak berisi menegak dipaparkan secara mendatar pada baris yang sama, mengambil ruang satu watak dalam kotak menegak.
digits ?: Semua digit ASCII berturut-turut dalam kotak berisi menegak dipaparkan secara mendatar pada garis yang sama, mengambil ruang satu watak dalam kotak menegak, hingga bilangan bulat yang ditentukan. Sekiranya tidak ada bilangan bulat yang spesifik, maka lalai adalah 2 digit. Apa-apa perkara di bawah 2 dan ke atas 4 tidak sah.

/* 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;

Penggunaan

Katakanlah kita mengambil contoh yang langsung dari spesifikasi, yang merupakan elemen dengan mod penulisan menegak.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, kami mahu nombor pada tarikh dipaparkan secara mendatar. Adalah logik untuk menganggap bahawa menambahkan text-combine-uprightsecara langsung pada elemen akan melakukan muslihat:

date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )

Buuuuut, tidak banyak. Pada masa penulisan, kita perlu meletakkan harta itu pada angka itu sendiri agar ini berfungsi. Jangka masa akan berjaya.

平成20年4月16日に

date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )

Di sana kita pergi!

Sokongan penyemak imbas

Seperti yang kita lihat dalam contoh, sokongan penyemak imbas sedikit tersebar pada masa ini. Walaupun banyak penyemak imbas menawarkan sokongan sekurang-kurangnya separa text-combine-upright, terdapat sokongan yang lebih sedikit untuk digitsnilai daripada yang ada untuk allnilai tersebut.

IE	Hujung	Firefox	Chrome	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5.1 + ³	35+

Android Chrome	Android Firefox	Penyemak Imbas Android	Safari iOS	Opera Mudah Alih
86+	82 + ²	81+	5 + ³	59+

Sumber: caniuse

Menggunakan nama tidak standard: -ms-text-combine-horizontal
Mengakui digitsnilai di sebalik layout.css.text-combine-upright-digits.enabledbendera eksperimen, tetapi belum melaksanakan sokongan susun atur untuk tate-chū-yoko
Menggunakan nama tidak standard: -webkit-text-combine