حتما می دونید افزودن استایل های جدید (مانند: styles_rtl.css) به قالب با افزایش تعداد درخواست ها HTTP همره است و اجرای صفحات سایت شما را کند می کند. شاید با فشرده سازی کمی از بار پهنای باند استایل های اضافی کاسته شود اما همچنان تعداد در خواست های HTTP را نمی توان کاهش داد. در این مقاله سعی داریم با یک روش خیلی ساده این مشکل رو حل کنیم.
کد HTML:
ابتدا دوست دارم شمارو با یک تگ HTML آشنا کنم که گرچه فارسی زبان هستیم اما خیلی هم ازشون استفاده نمی کنیم. به کمک این تگ می تونیم مشخص کنیم هر قسمت از صفحه ما چه جهت متنی رو داره و توسط CSS هم می تونیم به اون بخش ها استایل بدیم مثلا بخش های RTL همه سبز باشن و بخش های LTR همه آبی و…
تگ <bdo>
این تگ برای مشخص کردن جهت متن هستش (راست به چپ یا چپ به راست) به کد زیر توجه کنید تا متوجه بشید:
<p>This text will go left to right.</p> <p><bdo dir="ltr">This text will go left to right.</bdo></p> <p><bdo dir="rtl">This text will go right to left.</bdo></p>
در زبان HTML یک راه دیگر هم برای این کار وجود داره به کد زیر توجه کنید:
<body dir="rtl">
حالا تمام متون داخل body راست به چپ خواهند شد.
استفاده از کد CSS و راه حل مشکل
به کمک کد زیر می تونید مشخص کنید هر تگ مورد نظر از HTML در حالت RTL یا LTR چه استایلی داشته باشه
p {
padding: 0 0 0 1em;
}
html[dir='rtl'] p {
padding: 0 1em 0 0;
}
در واقع من بعد از نوشتن نام تگ (مثلا Span) مشخص می کنم در حالت راست به چپ یه استایلی داشته باشه. همون طور که می بینید به این روش می تونم کد های استایل راست به چپ (در اصطلاح راستچین) رو در کنار کد ها اصلی استایل داخل یه فایل CSS (مانند: styles.css) بنویسم. خوب البته برای پروژه های خیلی برزگ کارایی این روش کم تر هست و همون استفاده از دو فایل جداگانه توصیه میشه.
(بیشتر بدانیم) معرفی ویژگی unicode-bidi
فرض کنید من کد زیر به کد های HTML که در ابتدا نوشتم اعمال کنم. حالا به کد زیر توجه کنید:
bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
bdo[dir="rtl"] { direction: rtl; unicode-bidi: embed; }
همون طور که می بنید من دارم از یه ویژگی CSS استفاده می کنم اما کارش چیه؟ عملکردش خیلی سادس، unicode-bidi وقتی بکار میاد که ما داخل یک صفحه هم متن فارسی (RTL) و هم انگلیسی (LTR) داشته باشیم. این ویژگی به مرورگر اطلاع میده در مورد یک تگ خاص، استایل جهت متن که از سطح والد اعمال میشه، اعمال بشه یا نادیده گرفته بشه؟
برای مثال در خط ابتدایی به مرورگر اطلاع دادیم اگر جهت متن داخل تگ bdo چپ چین در نظر گرفته شده بدون توجه به جهت اصلی و کلی صفحه و با توجه به جهت ویژگی direction داخل همان خط (که LTR است) متن را حروف چینی کند (برای این مثال از چپ به راست حروف می نویسد).
در خط بعدی به مرورگر اطلاع دادیم اگر جهت متن داخل تگ bdo راست چین در نظر گرفته شده بدون توجه به جهت اصلی و کلی صفحه و با توجه به جهت ویژگی direction داخل همان خط (که RTL است) متن کلمه به کلمه ترتیب بندی کند (برای این مثال از راست به چپ می نویسد).
به انواع دلایل این ویژگی تقریبا اصلا استفاده نمی شه 😉
حالت های مختلف رو اینجا تست کنید
و باز هم بیشتر بدانیم:
بدون دیدگاه