آموزش ویژگی direction در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی direction در CSS با من همراه باشید.

آموزش ویژگی direction در CSS

Free-Learn

ویژگی direction در CSS

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

مثلا اگه از متن فارسی درون یک پاراگراف استفاده کردیم برای نمایش هرچه بهتر اون متن / محتوا در مرورگرها ، باید جهت نوشتاریش رو با استفاده از این ویژگی و مقدار rtl مشخص نماییم.

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

اگر میخواهید متن / کلمه ای را بصورت برعکس شده یا معکوس شده به نمایش درآورید پیشنهاد میکنم از تگ bdo استفاده نمایید.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی direction را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده در تگ های H2 و P

امتحان کنید

مثال شماره ۲ : استفاده در تگ Body برای مشخص کردن جهت نوشتاری تمامی تگ های موجود در صفحه

امتحان کنید

مثال شماره ۳ : تنظیم جهت نوشتاری متن با استفاده از صفت dir در HTML

امتحان کنید

Free-Learn

جدول مشخصات ویژگی direction در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض ltr
قابل ارث بری دارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS2
نحوه استفاده در جاوااسکریپت object.style.direction=”rtl”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی direction در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
direction ۲٫۰ ۱٫۰ ۹٫۲ ۱٫۳ ۵٫۵

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی direction در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
ltr پیش فرض – جهت نوشتاری متن از چپ به راست ( مناسب زبان انگلیسی )
rtl جهت نوشتاری متن از راست به چپ ( مناسب زبان های فارسی ، عربی )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

همونطور که در ابتدای این آموزش اشاره کردم ، یک صفت در HTML داریم به اسم صفت dir که با استفاده از این صفت نیز میتوانیم جهت نوشتاری متن یک عنصر را مشخص نماییم. ( پس در کل صفت dir با ویژگی direction یکی هستن )

بهتره و پیشنهاد میشه که همیشه از این ویژگی یا اگه خواستید از صفت dir استفاده نمایید، حتما در تگ body استفاده نمایید که تمامی عناصر موجود در صفحه راست چین شوند.

اگر میخواستید قالب یا صفحه وبی را راست چین نمایید، در اولین قدم باید از همین ویژگی استفاده نمایید.

معمولا و بیشتر از ویژگی direction برای مشخص کردن جهت نوشتاری، عناصر / تگ های سطح بلاکی ( Block ) استفاده میشه ولی خب میتونیم برای عناصر / تگ های درون خطی ( Inline ) هم استفاده نماییم.

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

بفرض مثلا من از یه کلمه انگلیسی درون یک متن فارسی استفاده میکنم خب بصورت پیشفرض در خروجی جهت متن ها بهم میریزه و اینجوری اصلا مناسب نیست، در نتیجه با استفاده از تگ bdi میتونیم این مشکل رو حل کنیم.

مثال : نحوه استفاده از تگ bdi

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب