ویژگی writing-mode در CSS برای تعیین جهت جریان محتوای متن داخل یک عنصر استفاده می‌شود. این ویژگی مشخص می‌کند که متن باید به صورت افقی یا عمودی نمایش داده شود.
این ویژگی به خصوص برای مدیریت جهت متن در زبان‌های غیر لاتین مانند چینی، ژاپنی و عربی، و همچنین برای ایجاد طرح‌های خلاقانه و جالب بصری مفید است.
مقادیر ممکن:
- horizontal-tb: مقدار پیش‌فرض. متن به صورت افقی نمایش داده می‌شود، جایی که متن از چپ به راست و از بالا به پایین جریان دارد، مانند اکثر زبان‌های غربی.
- vertical-rl: این مقدار یک حالت نوشتاری عمودی از راست به چپ را مشخص می‌کند، که معمولاً برای زبان‌هایی مانند چینی، ژاپنی یا کره‌ای استفاده می‌شود. متن به صورت عمودی جریان دارد، از راست شروع شده و به سمت چپ ادامه می‌یابد.
- vertical-lr: مانند vertical-rl، این مقدار نیز حالت نوشتاری عمودی را نشان می‌دهد، اما متن از چپ به راست جریان دارد، که در زبان‌هایی مانند مغولی استفاده می‌شود.
- sideways-rl: این مقدار جریان متن عمودی را از بالا به پایین مشخص می‌کند، اما متن را از راست به چپ قرار می‌دهد. این مقدار برای زبان‌های عمودی مانند مغولی یا برخی اشکال از متن ژاپنی استفاده می‌شود، جایی که نویسه‌ها 90 درجه به سمت راست چرخش داده می‌شوند و از راست به چپ خوانده می‌شوند.
- sideways-lr: این مقدار جریان متن عمودی را از پایین به بالا مشخص می‌کند، اما متن را از چپ به راست قرار می‌دهد.
مقادیر lr، lr-tb، rl، tb، tb-lr و tb-rl در CSS به عنوان قدیمی تلقی می‌شوند و باید دیگر استفاده نشود. به جای آن، بهتر است از مقادیر horizontal-tb و vertical-lr استفاده شود.
horizontal-tb Value
ویژگی writing-mode در CSS برای تعیین جهت جریان محتوای متن داخل یک عنصر استفاده می‌شود. این ویژگی مشخص می‌کند که متن آیا به صورت افقی یا عمودی نمایش داده شود.
مقدار horizontal-tb یکی از مقادیر ممکن برای ویژگی writing-mode است. در این مقدار، متن به صورت افقی نمایش داده می‌شود و جریان متن از چپ به راست و از بالا به پایین است، که برای اکثر زبان‌های غربی استفاده می‌شود.
در مثال زیر، ویژگی writing-mode به مقدار horizontal-tb تنظیم شده است و محتوای متن داخل یک عنصر نمایش داده می‌شود:
<html>
<head>
<style>
.box {
width: 250px;
background-color: pink;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h2>CSS writing-mode: horizontal-tb</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>در این مثال، متن داخل عنصر با کلاس box به صورت افقی نمایش داده شده است و از چپ به راست و از بالا به پایین می‌خواند.
vertical-rl Value
ویژگی writing-mode در CSS برای تعیین جهت جریان محتوای متن داخل یک عنصر استفاده می‌شود. مقدار vertical-rl یکی از مقادیر ممکن برای این ویژگی است که جریان متن را از راست به چپ و از بالا به پایین تعیین می‌کند.
در مثال زیر، ویژگی writing-mode به مقدار vertical-rl تنظیم شده است و محتوای متن داخل یک عنصر نمایش داده می‌شود:
<html>
<head>
<style>
.box {
height: 250px;
background-color: pink;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h2>CSS writing-mode: vertical-rl</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>در این مثال، متن داخل عنصر با کلاس box به صورت عمودی نمایش داده شده است و از راست به چپ و از بالا به پایین می‌خواند.
vertical-lr Value
در CSS، ویژگی writing-mode برای تعیین جهت جریان محتوای متن داخل یک عنصر استفاده می‌شود. مقدار vertical-lr یکی از مقادیر ممکن برای این ویژگی است که جریان متن را از چپ به راست و از بالا به پایین تعیین می‌کند.
در مثال زیر، ویژگی writing-mode به مقدار vertical-lr تنظیم شده است و محتوای متن داخل یک عنصر نمایش داده می‌شود:
<html>
<head>
<style>
.box {
height: 250px;
background-color: pink;
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<h2>CSS writing-mode: vertical-lr</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>در این مثال، متن داخل عنصر با کلاس box به صورت عمودی نمایش داده شده است و از چپ به راست و از بالا به پایین می‌خواند.
sideways-rl Value
در CSS، مقدار sideways-rl برای ویژگی writing-mode استفاده می‌شود که متن را به صورت عمودی از بالا به پایین نمایش می‌دهد و حروف به صورت افقی از راست به چپ قرار می‌گیرند. این مقدار تنها توسط مرورگر Firefox پشتیبانی می‌شود.
در مثال زیر، ویژگی writing-mode به مقدار sideways-rl تنظیم شده است:
<html>
<head>
<style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-rl;
}
</style>
</head>
<body>
<h2>CSS writing-mode: sideways-rl - این مثال تنها توسط مرورگر Firefox پشتیبانی می‌شود.</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>در این مثال، متن داخل عنصر با کلاس box به صورت عمودی نمایش داده شده است و حروف به صورت افقی از راست به چپ قرار گرفته‌اند. اما این قابلیت تنها توسط مرورگر Firefox پشتیبانی می‌شود و در مرورگر‌های دیگر قابل مشاهده نیست.
sideways-lr Value
در CSS، مقدار sideways-lr برای ویژگی writing-mode استفاده می‌شود که متن را به صورت عمودی از بالا به پایین نمایش می‌دهد و حروف به صورت افقی از چپ به راست قرار می‌گیرند. این مقدار تنها توسط مرورگر Firefox پشتیبانی می‌شود.
در مثال زیر، ویژگی writing-mode به مقدار sideways-lr تنظیم شده است:
<html>
<head>
<style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-lr;
}
</style>
</head>
<body>
<h2>CSS writing-mode: sideways-lr - این مثال تنها توسط مرورگر Firefox پشتیبانی می‌شود.</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>در این مثال، متن داخل عنصر با کلاس box به صورت عمودی نمایش داده شده است و حروف به صورت افقی از چپ به راست قرار گرفته‌اند. اما این قابلیت تنها توسط مرورگر Firefox پشتیبانی می‌شود و در مرورگر‌های دیگر قابل مشاهده نیست.
Asthetic Use (english Language)
در این مثال، ویژگی writing-mode برای ایجاد یک اثر زیبایی برای زبان انگلیسی استفاده شده است. ارزش‌های vertical-lr و vertical-rl به عنوان ویژگی writing-mode به عنوان خواندن متن عمودی اعمال می‌شوند، به این معنا که متن به صورت عمودی نمایش داده می‌شود، یا از چپ به راست (vertical-lr) یا از راست به چپ (vertical-rl).
در ادامه توضیح داده شده:
.mainbox: این کلاس حداکثر عرض ممکن برای ظرف را تعیین می‌کند (max-width: 750px), آن را به طور نسبی قرار می‌دهد و برای ایجاد فضا در اطراف محتوا، padding اضافه می‌کند..box: این کلاس با ارتفاع250pxو رنگ پس‌زمینه صورتی محتوای جعبه را سبک می‌کند.h2: این می‌زندو یک محدوده را سبک‌سازی می‌کند. این متن را به طور مطلق داخل ظرف مکان‌یابی می‌کند، آن را در گوشه بالا و چپ موقعیت می‌دهد (left: 0; top: 0;), و ارتفاع خط را به1تنظیم می‌کند. به طور اضافی، رنگ آن را به سبز روشن (color: lightgreen), اندازه قلم را به40px, و وزن قلم را به800می‌دهد. مهمترین ویژگی اینجاwriting-mode: vertical-rlاست که مشخص می‌کند متن باید به صورت عمودی از راست به چپ نمایش داده شود.
در زیر ساختار HTML استفاده شده در این مثال آمده است:
<html>
<head>
<style>
.mainbox{
max-width: 750px;
position: relative;
padding-left: 80px;
padding-top: 50px;
}
.box {
height: 250px;
background-color: pink;
}
h2 {
padding-top: 70px;
writing-mode: vertical-rl;
position: absolute;
left: 0;
top: 0;
line-height: 1;
color: lightgreen;
font-size: 40px;
font-weight: 800;
}
</style>
</head>
<body>Related Properties
اینجا یک لیست از ویژگی‌های مرتبط با writing-mode در CSS آورده شده است، همراه با توضیحات کوتاه:
-
display: این ویژگی تنظیم می‌کند که متن به چه جهتی نمایش داده شود. به عنوان مثال، می‌تواند
blockیاinlineباشد که تأثیر زیادی بر چیدمان و نمایش متن دارد. -
unicode-bidi: این ویژگی تعیین می‌کند که متنی که شامل کاراکترهای ثابت و دیگر زبان‌هاست چگونه نمایش داده شود. به عنوان مثال، زبان‌هایی که از راست به چپ می‌نویسند را می‌توان با این ویژگی کنترل کرد.
-
text-orientation: این ویژگی تعیین می‌کند که حرف‌ها در خط چگونه قرار گیرند. به عنوان مثال، آیا حروف باید عمودی یا افقی باشند؟
-
text-combine-upright: این ویژگی اجازه ترکیب چند واحد نوشتاری به صورت عمودی را به یک واحد نوشتاری تکی می‌دهد. این ویژگی معمولاً برای نمایش ارقام ژاپنی که به صورت افقی هستند، استفاده می‌شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام