Form kontrol öğeleri için CSS dikey yazma modu

Di Zhang
Di Zhang

Chrome 119'dan 123'e kullanıma sunmak, CSS'nin yeni uluslararası CSS özelliğidir. Yazma Modları Düzey 4. Sektör özellikleri için yazma modu, bu öğelerin dikey yazma modlarında gösterilir. Chrome 123 sürümünde bu özellik etkinleştirilecek Bu yayında, tüm kullanıcılar için bu özellik açıklanmaktadır.

Metin tabanlı form kontrolü öğeleri için dikey yazma modu

Bu özellik tamamen etkinleştirildikten sonra dikey yazma kullanılabilir. düğmeler, seçim listeleri ve ilerleme durumu gibi form kontrol öğeleri için modlar öğeler. Bu özelliği kullanmak için CSS özelliğini yazma modunu vertical-lr olarak ayarlayın: soldan sağa blok akış yönü ve sağdan sola blok için vertical-rl akış yönü.

Bu, geleneksel olarak kullanılan pek çok Doğu Asya dili için alfabelerden oluşur. Örneğin, geleneksel Japonca genellikle dikey olarak sağdan sola.

Dikey yazma modlarına örnek

Dikey form kontrolleriyle ilgili uluslararası hale getirilmiş bazı örnekleri aşağıda bulabilirsiniz.

Düğmeler

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

Dikey metin içeren bir düğme.

<select> öğe

Bir <select> öğesinin tüm metni dikey olarak görüntüleyeceğini belirtebilirsiniz.

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>

Dikey metin içeren seçim listesi.

Mevcut uygulamada hâlâ pop-up pencere seçeneklerinin bulunduğunu unutmayın görüntülenir.

Metin tabanlı girişler

Metin girişine dayalı birçok form kontrolü için artık dikey bir form kullanılabilir yazma modunu açar.

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

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

Dikey metin içeren bir metin alanı.

Kaydırma Çubukları

Bir form öğesinin değerini görsel olarak göstermek de yararlı olabilir. İşte bu <meter>, <progress> ve <input type=range> gibi kaydırma çubuklarıyla çalışır.

Çeşitli kaydırma çubuğu denetimleri.

Daha önce, standart olmayan CSS kullanılarak sadece <range> dikey olarak oluşturulabiliyordu görünüm değeri slider-vertical. Artık üçü de dikey olarak görüntülenebilir. Bunun için CSS writing-mode özelliğini kullanabilirsiniz.

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

Kaydırma çubuğu denetimleri dikey olarak görüntülenir.

Varsayılan olarak, CSS yönü ltr değerine ayarlıdır. Bu, değerlerin yukarıdan aşağıya oluşturulur. Değerin yönünü en altta olacak şekilde belirtebilirsiniz en üste ayarlamak için yönü rtl olarak ayarlayın.

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

Slayt denetimleri alttan yukarıya dikey olarak görüntülenir.

Chrome 122'de değer yönünü değiştirmeye yönelik bir deneme bulunmaktadır. Geri bildirimlerinizi bizimle paylaşın.

Etkileşimde bulunun ve geri bildirim paylaşın

Bu özelliklerle ilgili geri bildirimde bulunmak için şu adresten sorun bildiriminde bulunun: crbug.com.