انتشار از Chrome 119 به 123 یک ویژگی CSS بین المللی جدید از CSS Writing Modes Level 4 است. حالت نوشتن عمودی برای عناصر کنترل فرم به این معنی است که این عناصر می توانند در حالت های نوشتاری عمودی نمایش داده شوند. در کروم 123 این ویژگی برای همه کاربران فعال خواهد شد، این پست این ویژگی را توضیح می دهد.
حالت نوشتن عمودی برای عناصر کنترل فرم مبتنی بر متن
هنگامی که این ویژگی به طور کامل فعال شد، امکان استفاده از حالت های عمودی نوشتن برای عناصر کنترل فرم مانند دکمه ها، لیست های انتخابی و عناصر پیشرفت وجود خواهد داشت. برای استفاده از آن، ویژگی نوشتن-mode 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 ارائه شود. اکنون، هر سه را می توان با استفاده از ویژگی 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;
}
آزمایشی برای تغییر جهت مقدار در Chrome 122 وجود دارد. اگر بازخوردی دارید به ما اطلاع دهید.
مشارکت کنید و بازخورد را به اشتراک بگذارید
برای به اشتراک گذاشتن بازخورد درباره این ویژگی‌ها، یک مشکل را در crbug.com ثبت کنید.