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