Mode penulisan vertikal CSS untuk elemen kontrol formulir

Di Zhang
Di Zhang

Diluncurkan dari Chrome 119 ke 123 adalah fitur CSS internasional baru dari CSS Mode Penulisan Level 4. {i>Vertical<i} mode penulisan untuk elemen kontrol formulir berarti bahwa elemen-elemen ini dapat ditampilkan dalam mode penulisan vertikal. Pada 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, penulisan vertikal dapat digunakan mode untuk elemen kontrol formulir seperti tombol, daftar pilihan, dan progres yang kurang penting. Untuk menggunakannya, tetapkan mode penulisan properti CSS ke vertical-lr untuk arah aliran blok kiri-ke-kanan dan vertical-rl untuk blok kanan-ke-kiri arah aliran data.

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

Contoh mode penulisan vertikal

Berikut beberapa contoh kontrol bentuk vertikal yang diinternasionalkan.

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 ditampilkan secara horizontal.

Input berbasis teks

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

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

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

Area teks dengan teks vertikal.

Penggeser

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

Beragam kontrol penggeser.

Sebelumnya, hanya <range> yang dapat dirender secara vertikal menggunakan CSS non-standar nilai tampilan 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. Ini berarti nilai-nilai akan dirender dari atas ke bawah. Anda dapat menentukan arah nilai di bagian bawah ke atas dengan menetapkan arah ke 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.