Teks-menggabungkan-tegak - Trik CSS

The text-combine-uprightproperti CSS menggabungkan karakter ke dalam ruang dari satu karakter. Spesifikasi menyebut komposisi "horizontal-dalam-vertikal" ini yang merupakan cara yang bagus untuk menjelaskan kasus penggunaan: situasi di mana Anda mungkin memerlukan beberapa karakter dalam mode penulisan vertikal untuk ditampilkan secara horizontal pada baris yang sama.

span ( text-combine-upright: all; )

Teknik teks horizontal dalam teks vertikal adalah teknik bahasa Jepang yang disebut tate-chū-yoko. Begini tampilannya:

Saat bekerja dengan mode penulisan kiri-ke-kanan vertikal ( `writing-mode: vertical-rl;`), seperti sisi kiri ilustrasi ini, `text-combine-upright`properti dapat mengambil beberapa karakter dan menampilkannya secara horizontal, yang pada dasarnya membagi ruang karakter menjadi bagian yang sama sesuai dengan jumlah karakter yang dipilih. Dalam contoh ini, sisi kanan menunjukkan dua karakter yang berbagi ruang karakter yang sama di dalam mode penulisan vertikal.

Sintaksis

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

Nilai awal: none
Berlaku untuk: elemen sebaris yang tidak diganti
Diwariskan: ya
Persentase: n / a
Nilai yang dihitung: kata kunci yang ditentukan, ditambah bilangan bulat ifdigits
Jenis animasi: tidak dapat dianimasikan

Nilai

text-combine-upright menerima nilai-nilai berikut:

none: Ini adalah nilai awal. Tidak ada karakter yang ditampilkan secara horizontal dalam mode penulisan vertikal.
all: Semua karakter tipografi yang berurutan dalam kotak berisi vertikal ditampilkan secara horizontal pada baris yang sama, menggunakan spasi dari satu karakter di kotak vertikal.
digits ?: Semua digit ASCII yang berurutan dalam kotak berisi vertikal ditampilkan secara horizontal pada baris yang sama, menggunakan spasi dari satu karakter di kotak vertikal, hingga bilangan bulat yang ditentukan. Jika tidak ada bilangan bulat yang spesifik, maka defaultnya adalah 2 digit. Semua yang di bawah 2 dan di atas 4 tidak valid.

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

Pemakaian

Katakanlah kita mengambil contoh langsung dari spesifikasi, yang merupakan elemen dengan mode penulisan vertikal.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Oke, kami ingin angka pada tanggal ditampilkan secara horizontal. Masuk akal untuk mengasumsikan bahwa menambahkan text-combine-uprightlangsung ke elemen akan melakukan trik:

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

Buuuuut, tidak terlalu. Pada saat penulisan, kita perlu menerapkan properti pada digit itu sendiri agar ini berfungsi. Rentang akan dilakukan.

平成20年4月16日に

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

Ini dia!

Dukungan browser

Seperti yang baru saja kita lihat di contoh, dukungan browser sedikit tersebar saat ini. Sementara banyak browser menawarkan setidaknya dukungan parsial text-combine-upright, ada jauh lebih sedikit dukungan untuk digitsnilai daripada allnilai.

YAITU	Tepi	Firefox	Chrome	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5.1 + ³	35+

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Sumber: caniuse

Menggunakan nama non-standar: -ms-text-combine-horizontal
Mengenali digitsnilai di balik layout.css.text-combine-upright-digits.enabledbendera percobaan, tetapi belum mengimplementasikan dukungan tata letak untuk tate-chū-yoko
Menggunakan nama non-standar: -webkit-text-combine