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

Di Zhang
Di Zhang

CSS Yazma Modları 4. Seviye'den yeni bir uluslararası CSS özelliği olan bu özellik, Chrome 119'dan 123'e kadar olan sürümlerde kullanıma sunulmaktadır. Form denetimi öğeleri için dikey yazma modu, bu öğelerin dikey yazma modlarında gösterilebileceği anlamına gelir. Chrome 123'te bu özellik tüm kullanıcılar için etkinleştirilecek. Bu gönderide özellik açıklanmaktadır.

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

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

Bu, geleneksel olarak yazmak için dikey alfabeler 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ı örneği

Aşağıda, dili yerelleştirilmiş dikey form denetimlerine ilişkin bazı örnekler 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östereceğ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çili liste.

Mevcut uygulamada pop-up pencerenin seçeneklerinin hâlâ yatay olarak gösterildiğini unutmayın.

Metin tabanlı girişler

Metin girişine dayalı birçok form kontrolünde artık metin girerken dikey yazma modu kullanılabilir.

textarea {
  writing-mode: vertical-rl;
  width: 5em;
  height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>

Dikey metin içeren bir metin alanı.

Kaydırma Çubukları

Form öğesinin değerini görsel olarak göstermek de yararlı olabilir. <meter>, <progress> ve <input type=range> gibi kaydırma çubukları bu işlevi görür.

Ç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 mülkü kullanılarak üçü de dikey olarak gösterilebilir.

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

Dikey olarak görüntülenen kaydırma çubuğu kontrolleri.

CSS yönü varsayılan olarak ltr olarak ayarlanmıştır. Bu, değerlerin üstten alta doğru oluşturulacağı anlamına gelir. Yönü rtl olarak ayarlayarak değerin yönünü aşağıdan yukarıya doğru olacak şekilde belirtebilirsiniz.

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

Dikey olarak aşağıdan yukarıya doğru gösterilen slayt kontrolleri.

Chrome 122'de değer yönünü değiştirmeyle ilgili bir deneme var. Geri bildiriminiz varsa lütfen bize bildirin.

Etkileşim kurma ve geri bildirim paylaşma

Bu özelliklerle ilgili geri bildirim paylaşmak için crbug.com adresinden sorun bildirin.