از ویژگی direction در کنار چندین ویژگی دیگر برای تعیین جهت نوشته یک عنصر استفاده می شود.
در مقابل زبان هایی که جهت نوشتن آنها از چپ به راست (LTR) می باشد زبان هایی مثل زبان شیرین فارسی و زبان های عربی و عبری از راست به چپ (RTL) نوشته می شوند.
با کمک از این ویژگی می توان شرایط مناسب را برای نوشتن در هر دو جهت فراهم کرد.
ویژگی direction جهت موارد زیر را تعیین می کند:
- جهت
embedوoverrideدر زمانی که همراه با ویژگی unicode-bidi استفاده می شود. - جهت اولیه عناصر بلاک که در این صورت متن و عناصر خطی داخل آنها در جهت تعیین شده نمایش داده می شوند.
- جهت سرزیر افقی عناصر.
- زمانی که برای یک متن text-align از نوع
justifyتعریف شده است، جهت خط آخر نیمه تمام آن متن توسطdirectionتعیین می شود. - جهت عنصر table.
به عنوان مثال در پاراگراف زیر جهت متن بصورت راست به چپ تعیین شده است:
p {
direction: rtl;
}
مقادیر direction
تمام مقادیری که این ویژگی می تواند داشته باشد به شرح زیر هستند:
direction: ltr | rtl | inherit
ltr
این مقدار، مقدار پیشفرض و اولیه این ویژگی می باشد و جهت عنصر را از چپ به راست تعیین می کند.
rtl
برای تغییر جهت عناصر به راست به چپ از این مقدار استفاده می کنیم.
inherit
این مقدار باعث می شود تا direction پدر عنصر هر مقداری داشته باشد به عنصر به ارث برسد.
.dad {
direction: rtl;
}
.dad p {
direction: inherit; /* == rtl */
}
اگر برای یک نوشته ای که به زبان انگلیسی (چپ به راست) است جهت را از راست به چپ قرار دهیم بصورت زیر نمایش داده خواهد شد:
this is a test!
همینطور اگر برای یک نوشته فارسی جهت را از چپ به راست تعیین کنیم خواهیم داشت:
متن آزمایشی برای مشاهده جهت نوشته!
همانطور که در دو مثال بالا دیده می شود کاراکترهایی مثل علامت تعجب و نقطه که در آخر متن قرار می گیرند ناصحیح چیده می شوند.
dir یا direction؟
جهت عناصر می تواند از تغییر ویژگی dir در HTML نیز تعیین شود. و مقادیر این ویژگی نیز با مقادیر direction یکسان هستند.
<p dir="rtl">
متن آزمایشی برای تعیین جهت نوشته.
</p>
حال سوال پیش می آید که از کدام یک از این موارد استفاده کنیم؟
اگر جهت نوشتن را جز موارد نمایشی و ظاهری قرار دهیم پس بر اساس این نکته که کارهای نمایشی باید توسط CSS انجام شود، استفاده از direction جواب ما خواهد بود.
اما باید توجه کنیم که جهت صحیح نوشته جز موارد بنیادی یک صفحه وب می باشد. و جدا از کاربرهایی که به سایت ما سر می زنند RSS Reader ها نیز وجود دارند که نیاز به یک HTML صحیح و خوانا دارند. پس با توجه به این نکته برای تعیین جهت عناصر بهتر است از ویژگی dir در HTML استفاده کنیم. و همینطور اگر در حال ساخت یک صفحه فارسی هستیم بهتر است این ویژگی را به تگ <html> بدهیم. در این صورت تمام عناصر صفحه این ویژگی را از عنصر ریشه یعنی همان <html> ارث می برند و جهت آنها نیز بدرستی تعیین می شوند.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<title>CSS-Tricks.ir</title>
<meta name="description" content="آموزش جامع طراحی صفحات وب">
</head>
<body>
<p>سلام دنیا</p>
</body>
</html>
سوال داری؟ برو به پنل پرسش و پاسخ