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

Di Zhang
Di Zhang

Chrome 119'dan 123'e, 4. CSS Yazma Modları Düzeyi 4 kapsamındaki yeni bir uluslararası CSS özelliğidir. Form kontrolü öğeleri için dikey yazma modu, bu öğelerin dikey yazma modlarında gösterilebileceği anlamına gelir. Chrome 123 sürümünde bu özellik tüm kullanıcılar için etkinleştirilecek. Bu yayında söz konusu özellik açıklanmaktadır.

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

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

Bu özellik, geleneksel olarak yazı yazmak için dikey alfabeleri kullanan birçok Doğu Asya dili için kullanışlıdır. Örneğin, geleneksel Japonca genellikle sağdan sola doğru dikey olarak yazılır.

Dikey yazma modlarına örnek

Dikey form denetimleriyle ilgili uluslararası bazı örnekler aşağıda verilmiştir.

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 bir seçim listesi.

Geçerli uygulamada pop-up pencere seçeneklerinin yatay olarak görüntülenmeye devam ettiğini unutmayın.

Metin tabanlı girişler

Artık metin girişi tabanlı pek çok form kontrolünde metin girerken dikey yazma modu kullanmak mümkündür.

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örüntülemek de yararlı olabilir. <meter>, <progress> ve <input type=range> gibi kaydırma araçlarının işlevi budur.

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

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

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

Kaydırma çubuğu dikey olarak görüntülemeyi denetler.

CSS yönü varsayılan olarak ltr değerine ayarlanmıştır. Bu, değerlerin yukarıdan aşağıya oluşturulacağı anlamına gelir. Yönü rtl şeklinde ayarlayarak değerin yönünü aşağıdan yukarıya belirleyebilirsiniz.

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

Slayt denetimleri dikey olarak aşağıdan yukarıya doğru görüntülenir.

Chrome 122'de değer yönünü değiştirmek için bir deneme yapılmıştır. Geri bildirimde bulunmak isterseniz bize bildirin.

Etkileşimde bulunun ve geri bildirim paylaşın

Bu özelliklerle ilgili geri bildirimlerinizi paylaşmak için crbug.com adresinden sorun bildiriminde bulunun.