إنّ طرح الإصدار من Chrome 119 إلى 123 هو ميزة عالمية جديدة في CSS ضمن المستوى 4 من أوضاع الكتابة في CSS. وضع الكتابة العمودية لعناصر التحكم في النموذج يعني أنه يمكن عرض هذه العناصر في أوضاع الكتابة العمودية. مع إصدار Chrome 123، سيتم تفعيل هذه الميزة لجميع المستخدمين، وتوضّح هذه المشاركة هذه الميزة.
وضع الكتابة بالوضع العمودي لعناصر التحكّم في النموذج المستنِد إلى النص
بعد تفعيل هذه الميزة بالكامل، سيصبح من الممكن استخدام أوضاع الكتابة العمودية
لعناصر التحكم في النموذج مثل الأزرار والقوائم المحدّدة وعناصر
التقدم. ولاستخدامه، اضبط وضع الكتابة في سمة CSS على 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. يمكن الآن عرض العناصر الثلاثة عموديًا
باستخدام سمة writing-mode في CSS.
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.