آشنایی با خصوصیت direction در css

در ادامه مقالات آموزش CSS از این جلسه به معرفی پراپرتی های موجود در CSS خواهیم پرداخت و این موضوع را هم با پراپرتی های مربوط به متون آغاز خواهیم کرد.در این مقاله در مورد ویژگی direction صحبت خواهیم کرد.

direction

مرورگرهای به طور پیش فرض متون و عناصر موجود در صفحه را از سمت چپ به راست طراز می کنند اما در مقابل زبان هایی که جهت نوشتن آنها از چپ به راست (LTR) می باشد زبان هایی مثل زبان شیرین فارسی و زبان های عربی و عبری از راست به چپ (RTL) نوشته می شوند. به کمک ویژگی direction می توان شرایط مناسب را برای نوشتن در هر دو جهت فراهم کرد.

ویژگی direction جهت موارد زیر را تعیین می کند:

جهت اولیه عناصر بلاک که در این صورت متن و عناصر خطی داخل آنها در جهت تعیین شده نمایش داده می شوند
جهت سرزیر افقی عناصر
زمانی که برای یک متن text-align از نوع justify تعریف شده است، جهت خط آخر نیمه تمام آن متن توسط direction تعیین می شود
جهت عنصر table

به عنوان مثال در پاراگراف زیر با استفاده از خصوصیت direction جهت متن خود را از راست به چپ تعیین کرده ایم.

p {
  direction: rtl;  
}

مقادیر direction

مقادیری که این ویژگی می تواند داشته باشد را در کد زیر مشاهده می کنید.در ادامه هر کدام را به طور جداگانه بررسی خواهیم کرد.

direction: ltr | rtl | inherit

ltr

این مقدار، مقدار پیشفرض و اولیه این ویژگی می باشد و جهت عنصر را از چپ به راست تعیین می کند.

rtl

از این مقدار زمانی استفاده می کنیم که بخواهیم جهت عناصر را به راست به چپ تغییر بدهیم.

Inherit

این مقدار باعث می شود تا direction پدر عنصر هر مقداری داشته باشد به عنصر به ارث برسد.

.parent {
  direction: rtl;
}

.parent p {
  direction: inherit; /* == rtl */
}

اگر جهت نمایش یک متن فارسی را مشخص نکنیم به صورت زیر در خروجی نمایش داده خواهد شد.

این یک متن آزمایشی است!

و یا اگر یک متن انگلیسی که جهت نمایش آن از چپ به راست است را تغییر دهیم به صورت زیر نمایش داده می شود.

this is a sample text.

همانطور که در دو مثال بالا مشاهده می کنید کاراکترهایی مثل علامت تعجب و نقطه که در آخر متن قرار می گیرند ناصحیح چیده می شوند.

dir یا direction؟

همانطور که در مقالات قبلی توضیح دادیم تگ های html دارای یک ویژگی به نام dir هستند که جهت عناصر می تواند از تغییر ویژگی dir در HTML نیز تعیین شود. و مقادیر این ویژگی نیز با مقادیر direction یکسان هستند.

<p dir="rtl">
  متن آزمایشی برای تعیین جهت نوشته.
</p>

سوالی که در اینجا پیش می آید این است که از کدام یک از این موارد استفاده کنیم ؟

اگر جهت چیدمان عناصر و متون را جزو موارد نمایشی و ظاهری صفحات وب در نظر بگیریم ( بر این اساس که کارهای نمایشی باید توسط CSS انجام گیرد) استفاده از direction در CSS منطقی تر می باشد اما باید به این نکته نیز توجه داشت که جهت صحیح نوشته جز موارد بنیادی یک صفحه وب می باشد.از طرف دیگر غیر از کاربرانی که به سایت ما مراجعه می کنند RSS Reader هایی نیز وجود دارند که نیاز به یک HTML صحیح و منظم دارند. پس با توجه به این نکته برای تعیین جهت عناصر بهتر است از ویژگی dir در HTML استفاده کنیم.

اگر در حال ساخت یک صفحه فارسی هستیم بهتر است این ویژگی را به تگ HTML بدهیم. در این صورت تمام عناصر صفحه این ویژگی را از عنصر ریشه یعنی همان HTML به ارث می برند و جهت آنها نیز بدرستی تعیین می شوند.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
	<head>
		<meta charset="utf-8"/>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<style>
			body{
				font-size:20px;
				font-weight:bold;
				color:red;
			}
		</style>
	</head>
	<body>
		<p>امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.</p>
	</body>
</html>

خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود.