Mode penulisan vertikal CSS untuk elemen kontrol formulir

Di Zhang
Di Zhang

Fitur CSS internasional baru dari CSS Writing Mode Level 4 diluncurkan dari Chrome 119 hingga 123. Mode penulisan vertikal untuk elemen kontrol formulir berarti elemen ini dapat ditampilkan dalam mode penulisan vertikal. Di 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, Anda dapat menggunakan mode penulisan vertikal untuk elemen kontrol formulir seperti tombol, daftar pilih, dan elemen progres. Untuk menggunakannya, tetapkan mode penulisan properti CSS ke vertical-lr untuk arah alur blok kiri-ke-kanan dan vertical-rl untuk arah alur blok kanan-ke-kiri.

Hal ini berguna untuk banyak bahasa Asia Timur yang secara tradisional telah menggunakan tulisan vertikal untuk menulis. Misalnya, bahasa Jepang tradisional sering ditulis secara vertikal dari kanan ke kiri.

Contoh mode penulisan vertikal

Berikut beberapa contoh kontrol formulir vertikal yang diinternasionalisasi.

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 implementasi 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

Menampilkan nilai elemen formulir secara visual juga dapat bermanfaat. Itulah yang dilakukan penggeser seperti <meter>, <progress>, dan <input type=range>.

Berbagai 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 ditetapkan ke ltr. Artinya, 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 membagikan masukan tentang fitur ini, laporkan masalah di crbug.com.