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.
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;
}
<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>
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>
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.
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;
}
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;
}
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.