ویژگی writing-mode در css

ویژگی writing-mode در css تغییر جهت متن بالا به پایین

در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت writing-mode در زبان CSS می پردازیم.

ویژگی کاربردی writing-mode در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

معرفی و کاربرد ویژگی writing-mode در زبان طراحی سی اس اس

از خاصیت writing-mode در CSS3 جهت تغییر جهت نوشته از بالا به پایین در یک تگ html کاربرد دارد.

خصوصیت writing-mode عمدتا در زبان های منطقه شرق آسیا همچون زبان های چینی و ژاپنی که جهت نوشتن متن در آنها به صورت عمودی است، کاربرد بیشتری دارد.

نکته مهم

خاصیت writing-mode می تواند بر روی متن تگ های html که در صفحه آرایی از نوع گرید ( grid ) شرکت کرده اند، تاثیرگذار خواهد بود.

در این حالت می توان جهت خطی نوشته در html که به صورت پیش فرض از راست به چپ و جهت بلاک ها که از بالا به پایین می باشد، را تغییر بدهیم.

مقادیر صفت کاربردی writing-mode در زبان طراحی css

صفت writing-mode که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:

1. مقدار horizontal-tb
2. مقدار vertical-rl
3. مقدار vertical-lr

مقدار horizontal-tb درون خاصیت writing-mode در زبان سی اس اس

اگر خاصیت writing-mode را برای یک عنصر html برابر با مقدار horizontal-tb قرار دهیم، در حقیقت می خواهیم متن تگ html در راستای افق و از چپ به راست نمایش داده شود.

در واقع مقدار horizontal-tb در خاصیت writing-mode به عنوان مقدار پیش فرض محسوب می شود.

ویژگی writing-mode در css تغییر جهت متن بالا به پایین

[html] p {writing-mode: horizontal-tb;} [/html]

مقدار vertical-rl درون خاصیت writing-mode در زبان css

اگر خاصیت writing-mode را برای یک عنصر html برابر با vertical-rl قرار دهیم، در حقیقت می خواهیم متن تگ html در راستای عمود ( بالا به پایین ) و از چپ به راست نمایش داده شود.

[html] p {writing-mode: vertical-rl;} [/html]

مقدار vertical-lr درون خاصیت writing-mode در زبان سی اس اس

اگر خاصیت writing-mode را برای یک عنصر html برابر با vertical-lr قرار دهیم، در حقیقت می خواهیم متن تگ html در راستای عمود ( بالا به پایین ) و از راست به چپ نمایش داده شود.

[html] p {writing-mode: vertical-lr;} [/html]

بررسی خاصیت writing-mode از نظر نسخه زبان طراحی css

ویژگی کاربردی writing-mode در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت writing-mode در زبان طراحی سی اس اس

عناوین ساختاری خاصیت writing-mode	وضعیت ساختاری خاصیت writing-mode
مقدار پیش فرض	horizontal-tb
قابلیت توارث	دارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.writingMode="vertical-rl

پشتیبانی مرورگرهای اینترنتی از خاصیت writing-mode در زبان طراحی css

خاصیت css
writing-mode	48.0	12.0	41.0	11.0	35.0