عند الترقية من الإصدار 119 من Chrome إلى الإصدار 123، ستظهر ميزة جديدة لصفحات الأنماط المتتالية (CSS) على مستوى CSS Writing Modes Level 4. يعني وضع الكتابة العمودي لعناصر عناصر التحكّم في النماذج أنّه يمكن عرض هذه العناصر في أوضاع الكتابة العمودية. سيتم تفعيل الميزة في الإصدار 123 من Chrome لجميع المستخدمين، ويوضّح هذا المنشور هذه الميزة.
وضع الكتابة العمودية لعناصر التحكّم في النماذج المستندة إلى النص
بعد تفعيل هذه الميزة بالكامل، سيكون من الممكن استخدام أوضاع الكتابة العمودية
لعناصر التحكّم في النموذج، مثل الأزرار وقوائم الاختيار وعناصر التقدّم. لاستخدام هذه السمة، اضبط writing-mode على vertical-lr لاتجاه تدفق الكتل من اليسار إلى اليمين وvertical-rl لاتجاه تدفق الكتل من اليمين إلى اليسار.
ويفيد ذلك العديد من لغات شرق آسيا التي استخدمت تقليديًا خطوطًا عمودية للكتابة. على سبيل المثال، غالبًا ما يتم كتابة اللغة اليابانية التقليدية بشكل عمودي من اليمين إلى اليسار.
في ما يلي بعض الأمثلة المتوافقة مع جميع اللغات على عناصر التحكّم في النماذج الرأسية.
الأزرار
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select> من العناصر
يمكنك تحديد أنّ عنصر <select> سيعرض كل النص عموديًا.
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>
يُرجى العِلم أنّ التنفيذ الحالي لا يزال يعرض خيارات النافذة المنبثقة عموديًا.
الإدخالات المستندة إلى النصوص
بالنسبة إلى العديد من عناصر التحكّم في النماذج المستندة إلى إدخال النصوص، أصبح من الممكن الآن استخدام وضع كتابة عمودي عند إدخال النص.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
أشرطة التمرير
قد يكون من المفيد أيضًا عرض قيمة عنصر النموذج بشكل مرئي. وهذا هو الغرض من استخدام أدوات التمرير، مثل <meter> و<progress> و<input type=range>.
في السابق، كان لا يمكن عرض سوى <range> بشكل عمودي باستخدام قيمة مظهر CSS
غير العادية slider-vertical. والآن، يمكن عرض كلّ العناصر الثلاثة عموديًا
باستخدام سمة CSS writing-mode.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
يتم ضبط اتجاه CSS تلقائيًا على ltr. وهذا يعني أنّ القيم سيتم
عرضها من الأعلى إلى الأسفل. يمكنك تحديد اتجاه القيمة ليكون من أسفل
إلى أعلى من خلال ضبط الاتجاه على rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
تتوفّر تجربة لتغيير اتجاه القيمة في الإصدار 122 من Chrome. يُرجى إعلامنا إذا كانت لديك أي ملاحظات.
التفاعل مع الملاحظات ومشاركتها
لمشاركة ملاحظاتك حول هذه الميزات، يُرجى الإبلاغ عن مشكلة على الرابط crbug.com.