The writing-modeproperti mengubah alignment teks sehingga dapat dibaca dari atas ke bawah atau dari kiri ke kanan, tergantung pada bahasa. Misalnya, kita ingin menambahkan beberapa teks yang dibaca dari atas ke bawah dan dari kanan ke kiri, seperti ini:
.vertical-rl ( writing-mode: vertical-rl; )Lihat Pen writing-mode: vertical-rl by CSS-Tricks (@ css-trick) di CodePen.
Ini paling berguna dalam bahasa seperti Cina, Jepang atau Korea yang teksnya sering diatur secara vertikal. Dalam bahasa Inggris, kemungkinan besar Anda ingin menggunakan properti ini untuk alasan estetika, seperti menyelaraskan heading dalam blok teks seperti ini:
Lihat Pen YWBWGA oleh CSS-Tricks (@ css-trick) di CodePen.
Nilai
Dalam contoh di bawah ini, saya telah membuat huruf pertama dari teks menjadi merah, supaya lebih mudah untuk melihat arah mana yang Anda perlukan untuk mulai membaca.
horizontal-tb
Ini adalah nilai default properti: teks dibaca dari kiri ke kanan dan dari atas ke bawah.
Lihat Pen writing-mode: horizontal-tb by CSS-Tricks (@ css-trick) di CodePen.
vertical-rl
Teks dibaca dari kanan ke kiri dan dari atas ke bawah:
Lihat Pen writing-mode: vertical-rl by CSS-Tricks (@ css-trick) di CodePen.
vertikal-lr
Teks dibaca dari kiri ke kanan dan dari atas ke bawah:
Lihat Pen writing-mode: vertical-rl by CSS-Tricks (@ css-trick) di CodePen.
Tautan yang berhubungan
- Teks vertikal dengan Mode Penulisan CSS3
- Ahmad Shadeed tentang mode menulis
Dukungan browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5.1 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5.0-5.1 * |