همونطور که اطلاع دارید در جلسات قبل در مورد واحدهای Viewport صحبت کردیم و شما رو با اونا آشنا کردیم. در این جلسه قصد داریم ویژگی writing-mode در CSS رو شما آموزش و مثالهای مربوط به اون رو قرار بدیم. برای این آموزش از این لینک بعنوان منبع استفاده میکنیم. هدف اصلی از به وجود آمدن این ویژگی، نمایش زبانهای آسیای شرقی همانند زبانهای چینی و ژاپنی بوده است. اگرچه میتونیم از این ویژگی برای زبانهای دیگر مانند انگلیسی و فارسی و ... استفاده کنیم و متون رو بصورت عمودی نوشته و حالت زیبا و جالبی رو به وجود بیاریم. متنی که MDN در سایت خودش در مورد این ویژگی قرار داده، بصورت زیر است:
ویژگی Writing-mode در CSS علاوه بر افقی یا عمودی بودن خطوط، جهت نوشته شدن متن رو نیز مشخص میکنه.
پشتیبانی مرورگرها
مرورگرها پشتیبانی خوبی از ویژگی writing-mode دارند و با خیال راحت میتونین از اون استفاده کنید.
همونطور که میبینید تقریبا 85 درصد مرورگرها از اون بصورت کامل پشتیبانی میکنن. اگر از vendor prefixها نیز استفاده کنیم این درصد به 92 خواهد رسید. مرورگرهای IE نیز بصورت جزئی از اون پشتیبانی میکنن.
مقدار پیش فرض برای writing-mode:
مرورگرهایی که از این ویژگی پششتیبانی میکنن، مقدار پیش فرض برای این ویژگی رو در نظر میگیرند. همونطور که میبینید مقادیر این ویژگی با یک خط فاصله از هم جدا شده اند. بخش اول میتونه vertical یا horizontal باشه. اگر horizontal باشه به معنای اینه که متون بصورت افقی نمایش داده میشن و از این مورد میتونیم برای زبانهای انگلیسی و عربی و فارسی و ... استفاده کنیم. زمانی که مقدار رو برابر با vertical قرار میدیم باعث میشه که متن مورد نظر بصورت عمودی نوشته بشه و این حالت بیشتر بدرد زبانهای چینی و ژاپنی و ... میخوره. بخش بعدی مربوط به مشخص کردن جهت پیشرفت متن هست. مثلا در مقدار بالا ما بعد از - از tb استفاده کردیم که مخفف top to bottom هستش. یعنی میخوایم متنمون افقی نمایش داده بشه و خط اول در بالا قرار بگیره و خطوط بعدی در زیر اون قرار بگیرن. میتونیم از bt نیز استفاده کنیم و این حالت برعکس میشه. همچنین به همراه vertical میتونیم از lr یا rl استفاده کنیم که به ترتیب مخفف left to right و right to left هستند. مثلا تصویر زیر رو در نظر بگیرید:
vertical و horizontal به ترتیب مخصوص زبانهای عمودی (مانند چینی) و زبانهای افقی (مانند انگلیسی یا فارسی) هستند ولی میتونین از اونا در جاهای دیگه نیز استفاده کنید. مثلا در تصویر بالا زمانی که از vertical-lr استفاده میکنیم، متن انگلیسی بصورت عمودی نوشته میشه و خط اول اون در سمت چپ قرار میگیره. اما زمانی که از vertical-rl استفاده میکنیم، خط اول از سمت راست شروع میشه و خطوط در جهت چپ ادامه پیدا میکنند.
در جلسه بعد مثالهایی رو قرار میدیم که بهتر با این ویژگی آشنا بشید.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !