cssblog.ir logo
P

direction

نحوه جهت دادن راست به چپ متن در زبان CSS

مشخصه direction می‌تواند جهت متن را که بصورت پیشفرض از چپ به راست است را تغییر داده و همچنین روی چیدمان عناصر inline و inline-block تاثیر بگذارد

همانطور که می دانید زبان‌هایی مانند فارسی و عربی یک تفاوت اصلی با زبان انگلیسی که زبان پایه دنیای کامپیوتر بوده،‌ دارند و آن هم جهت متفاوت خواندن‌ و نوشتن متون است که این جهت نه تنها فقط روی متون بلکه روی طرح و ترتیب وبسایت‌های دارای زبان راست به چپ (rtl) تاثیر می‌گذارد و هرجا که بحث ظاهر و نحوه نمایش باشد قطعا پای CSS در میان است. با استفاده از مشخصه direction می توانیم جهت محتوا را بجای چپ به راست (پیشفرض)‌ به «راست به چپ یا rtl» تغییر دهیم. 

direction چه تاثیری دارد؟

با استفاده از این مشخصه جهت محتوا در عناصری که حالت نمایش بلوکی (block) دارند تغییر می‌کند که این تغییر جهت باعث می‌شود تا متن‌ها، عناصر inline و inline-block که داخل آن عنصر قرار دارند نیز تحت تاثیر این تغییر جهت قرار بگیرند. همچنین مدنظر داشته باشید که با تغییر جهت به راست به چپ alignment پیشفرض عناصر نیز به راست (right) تغییر پیدا خواهد کرد و متن‌های داخل جداول نیز از این قاعده مستثنی نیستند. 

خصلت dir یا همان dir Attribute

در HTML نیز خصلتی بنام dir وجود دارد که می‌توانیم برای تغییر جهت از آن استفاده کنیم. به مانند مشخصه CSS این خصلت نیز توسط عناصر فرزند به ارث برده خواهد شد. مزیت استفاده از این خصلت این است که اگر به هر دلیلی جهت تعیین شده در CSS اعمال نشود این مشخصه عمل خواهد کرد و کار خود را انجام می دهد. 

تگ bdo

گاهی اوقات ما تنها می خواهیم جهت قسمتی از یک متن را تغییر دهیم، در چنین مواقعی معمولا چنین کاری انجام می‌شود:

<p>Left to right text.</p>
<p><bdo dir="rtl">متن فارسی که جهت راست به چپ دارد.</bdo></p>

در بین تگ‌های HTML تگی بنامbdo (مخفف bidirectional override element)‌ وجود دارد که بهتر است از آن در مواقعی که قصد تغییر جهت متن را داریم استفاده کنیم چرا که استاندارد بوده و دوما معنا و خاصیت خاصی ندارد.

معمولا در مرورگرها این تگ دارای خصلت‌های زیر است:

bdo {
    unicode-bidi: bidi-override;
}

کاری که این CSS انجام می دهد این است که امکان نقض direction را به آن تگ می دهد. برای کسب اطلاعات بیشتر درباره مشخصه unicode-bidi اینجا را بخوانید. 

تاثیر بر Grid وبسایت

معمولا در حالتی که بخواهیم از flex برای ساخت کنارهم قرار دادن عناصر استفاده نکنیم، دو راه اصلی در پیش روی ما قرار دارد: استفاده از float و inline-block.

یک ویژگی که inline-block به نسبتfloat دارد این است که با تغییرdirection عناصری که اینdispaly را داشته باشند نیز به ترتیب معکوس چیده خواهند شد که درfloat چنین نیست وfloat همیشه تحت تاثیر جهت خودش (rightیاleft) است.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند