ویژگی 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 مقدار می پذیرد که عبارتند از:
- مقدار horizontal-tb
- مقدار vertical-rl
- مقدار 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 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
ویژگی writing-mode در css تغییر جهت متن بالا به پایین – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید