طرح Chrome 119 إلى 123 هو ميزة دولية جديدة من خدمات مقارنة الأسعار (CSS) من CSS أوضاع الكتابة المستوى 4 القطاع وضع الكتابة لعناصر التحكم في النموذج يعني أن هذه العناصر يمكن في أوضاع الكتابة العمودية. بحلول الإصدار 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.