Mode penulisan vertikal CSS untuk elemen kontrol formulir

Di Zhang
Di Zhang

Peluncuran Chrome 119 ke 123 adalah fitur CSS internasional baru dari Mode Menulis CSS Level 4. Mode penulisan vertikal untuk elemen kontrol formulir berarti bahwa elemen ini dapat ditampilkan dalam mode penulisan vertikal. Mulai Chrome 123, fitur ini akan diaktifkan untuk semua pengguna, postingan ini menjelaskan fitur tersebut.

Mode penulisan vertikal untuk elemen kontrol formulir berbasis teks

Setelah fitur ini diaktifkan sepenuhnya, mode penulisan vertikal dapat digunakan untuk elemen kontrol formulir seperti tombol, daftar pilih, dan elemen progres. Untuk menggunakannya, setel mode penulisan properti CSS ke vertical-lr untuk arah aliran blok dari kiri-ke-kanan dan vertical-rl untuk arah aliran blok kanan-ke-kiri.

Cara ini berguna untuk banyak bahasa Asia Timur yang biasanya menggunakan skrip vertikal untuk penulisan. Misalnya, bahasa Jepang tradisional sering ditulis secara vertikal dari kanan ke kiri.

Contoh mode penulisan vertikal

Berikut adalah beberapa contoh internasional untuk kontrol formulir vertikal.

Tombol

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

Tombol dengan teks vertikal.

<select> elemen

Anda dapat menentukan bahwa elemen <select> akan menampilkan semua teks secara vertikal.

select {
  writing-mode: vertical-lr;
}

<select multiple>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

<select>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

Daftar pilihan dengan teks vertikal.

Perhatikan bahwa penerapan saat ini masih memiliki opsi jendela pop-up yang ditampilkan secara horizontal.

Input berbasis teks

Untuk banyak kontrol formulir berbasis input teks, kini Anda dapat menggunakan mode penulisan vertikal saat memasukkan teks.

textarea {
  writing-mode: vertical-rl;
  width: 5em;
  height: 20em;
}

<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>

Textarea dengan teks vertikal.

Penggeser

Ada baiknya juga jika Anda menampilkan nilai elemen formulir secara visual. Itulah yang dilakukan slider seperti <meter>, <progress>, dan <input type=range>.

Beragam kontrol penggeser.

Sebelumnya, hanya <range> yang dapat dirender secara vertikal menggunakan nilai tampilan CSS non-standar slider-vertical. Sekarang, ketiganya dapat ditampilkan secara vertikal menggunakan properti writing-mode CSS.

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
}

Kontrol penggeser ditampilkan secara vertikal.

Secara default, arah CSS disetel ke ltr. Ini berarti nilai akan dirender dari atas ke bawah. Anda dapat menentukan arah nilai dari bawah ke atas dengan menetapkan arah sebagai rtl.

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
  direction: rtl;
}

Kontrol slide ditampilkan secara vertikal dari bawah ke atas.

Ada eksperimen untuk mengubah arah nilai di Chrome 122. Beri tahu kami jika Anda memiliki masukan.

Berinteraksi dan memberikan masukan

Untuk memberikan masukan tentang fitur ini, ajukan masalah di crbug.com.