(TailwindCSS) نصائح لدعم الأتجاهات في التصميم

Mohanad Alrwaihy

May 28, 2023

295

يعد التعرف على تصميم RTL مفيدًا عند العمل على موقع ويب متعدد اللغات مع اتجاهات مختلفة لتطبيق أفضل خصائص CSS الممكنة بحيث يبدو نمط الموقع رائعًا في كلا الاتجاهات.

8 دقائق للقراءة

تتم كتابة معظم اللغات في العالم من اليسار إلى اليمين ( LTR ) وهذا يشمل جميع اللغات التي تستخدم الأبجدية اللاتينية مثل الإنجليزية ولهذا السبب يتم تعيين اتجاه الصفحة الافتراضي في جميع المتصفحات على LTR.

ما المقصود بالRTL؟

بعض اللغات مكتوبة من اليمين إلى اليسار مثل العربية ، العبرية و الفارسية. لإنشاء مواقع ويب بهذه اللغات ، نحتاج إلى تغيير الاتجاه الافتراضي للعناصر لتكون من اليمين إلى اليسار وإذا كنا بحاجة إلى إنشاء مواقع ويب على سبيل المثال بأستخدام لغتين مثل الإنجليزية و العربية سوف تحتاج إلى كتابة الكثير من الCSS لعرض المحتوى بشكل صحيح لكل لغة لأن لكل منهما اتجاهات مختلفة.

اتجاه HTML الافتراضي

يتم تعيين السمة الافتراضية للاتجاه (dir) في عنصر html إلى ltr لتعيين اتجاه الصفحة من اليسار إلى اليمين 👇

CSHTML

<html lang="en" dir="ltr"></html>

اذا قمنا بتغيير dir في عنصر html إلى rtl ، فسيتم تبديل كل المحتوى في الصفحة من اليسار إلى اليمين ليكون في اليمين إلى اليسار 👇

CSHTML

<html lang="ar" dir="rtl"></html>

Icon نصيحة

هناك قيمة dir أخرى مفيدة وهيا "dir = "auto عند استخدامها ستدع المتصفح يقرر الاتجاه الذي يجب استخدامه بناءً على المحتوى داخل العنصر.

ماذا سيتغير؟

عند تغيير الاتجاه إلى rtl ستلاحظ حدوث هذه التغييرات في الصفحة:

انعكاس اتجاه النص.
شريط التمرير سيتغير الى الجهة الأخرى (Scrollbar).
العناصر داخل الFlex أو Grid ستبدء من الأتجاه المعاكس.

دعونا نلقي نظرة على هذه الاختلافات 👇

اتجاه LTR

اتجاه RTL

اختلافات الأتجاهات 👇

دعم TailwindCSS RTL - رابط

في Tailwind CSS ، يمكننا استخدام المعدلات المحددة مسبقًا لاتجاه العنصر الذي توفره Tailwind CSS لإضافة نمط مشروط اعتمادًا على اللغة.

لدينا معدلين هما 👇

ltr - لتطبيق الstyle عندما يكون اتجاه الصفحة/العنصر من اليسار إلى اليمين
rtl - لتطبيق الstyle عندما يكون اتجاه الصفحة/العنصر من اليمين إلى اليسار

يمكننا على سبيل المثال تغيير نمط النص الإنجليزي عندما يتم تعيين الاتجاه على ltr ونمط النص العربي عند تعيين الاتجاه على rtl 👇

CSHTML

<p class="ltr:text-green-600 ltr:after:content-['✅']">
This is a text in English
</p>

<p class="rtl:text-green-600 rtl:after:content-['✅']">
هذا النص مكتوب باللغة العربية
</p>

حاول تغيير اللغة لتغيير الاتجاه لترى نفسك 👇

باستخدام هذه المعدلات (ltr, rtl) يمكننا تغيير نمط أي عنصر في الصفحة مثل أضافة Margin على اليسار عندما يكون الأتجاه على LTR أو Margin إلى اليمين عندما يكون الأتجاه على RTL👇

ltr: ml-3 - سيؤدي ذلك إلى تعيين القيمة اليسرى لل Margin فقط عندما يكون الاتجاه من اليسار إلى اليمين.
rtl: mr-3 - تعيين قيمة ال Margin الأيمن عندما يكون الاتجاه من اليمين إلى اليسار.

اتجاه النص

لدينا طرق متعددة لتحديد اتجاه النص لعنصر.

ضع سمات dir مباشرة على العنصر واختر بين ltr أو rtl أو auto 👇

CSHTML

<p dir='ltr'>This is a text in English</p>

<p dir='rtl'>هذا النص مكتوب باللغة العربية</p>

<p dir='auto'>المزج بين ال English والعربي في الجملة</p>

Icon تحذير

يجب استخدام dir مباشرة على عنصر فقط عندما يتم التأكد من بقاء محتوى العنصر على لغة واحدة طوال الوقت أو عندما يمكن أن يكون المحتوى مزيج من الكلمات بين لغتين ( استخدم "dir = "auto) أو المحتوى نفسه لا يمكن معرفة بأي لغة سيكون حتى إذا تم تعيين اللغة على الموقع.

تغيير اتجاه النص باستخدام كلاسات TailwindCSS 👇
1. text-left - اضبط على الجانب الأيسر من الحاوية طوال الوقت.
2. text-right - يتم ضبطه على الجانب الأيمن من الحاوية طوال الوقت
3. text-start - سيكون النص في موضع البدء اعتمادًا على قيمة dir.
4. text-end - سيكون النص في الموضع النهائي اعتمادًا على قيمة dir.

مثال على اتجاه النص

دعونا نلقي نظرة على هذا المثال 👇

CSHTML

<h3 class="ltr:text-green-600 ltr:after:content-['✅']">
This is a text in English
</h3>

<p class="text-gray-600 font-normal text-sm my-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perspiciatis esse necessitatibus consequatur reiciendis? Cumque
excepturi natus, quis illum numquam alias.
</p>

<h3 class="rtl:text-green-600 rtl:after:content-['✅']">
هذا النص مكتوب باللغة العربية
</h3>

<p class="text-gray-600 font-normal text-sm my-2">
لوريم ايبسوم دولار سيت أميت ,كونسيكتيتور أدايبا يسكينج أليايت,سيت
دو أيوسمود تيمبور أنكايديديونتيوت لابوري ات دولار ماجنا أليكيوا .
يوت انيم أد مينيم فينايم,كيواس نوستريد أكسير سيتاشن يللأمكو
لابورأس نيسي يت أليكيوب أكس أيا كوممودو كونسيكيوات . ديواس أيوتي
</p>

سأبدأ بالطريقة الأولى وهي تعيين سمات dir للرؤوس لتتناسب مع اللغة و "dir = "auto للفقرات 👇

CSHTML

<h3 dir="ltr" class="---">English</h3>

<p dir="auto" class="---">English</p>

<h3 dir="rtl" class="---">عربي</h3>

<p dir="auto" class="---">عربي</p>

سيتم عرض اتجاهات النص بشكل صحيح الآن بغض النظر عن اتجاه الصفحة!

يمكننا أيضًا استخدام كلاسات TailwindCSS لإصلاح هذه المشكلة أيضًا من خلال وضع text-left إلى الإنجليزية و text-right إلى العربية أو rtl:text-end للغة الإنجليزية و ltr:text-end للعربية لتغيير الاتجاه الى الموضع النهائي عندما يكون الاتجاه عكس ذلك.

CSHTML

<h3 class="--- text-left">English</h3>

<p class="--- rtl:text-end">English</p>

<h3 class="--- text-right">عربي</h3>

<p class="--- ltr:text-end">عربي</p>

تباعد الحروف - رابط

أحد الاختلافات بين الإنجليزية والعربية هو أنه في اللغة الإنجليزية يمكنك إضافة letter-spacing أو تباعد بين الحروف ولكن في اللغة العربية هذا غير ممكن لأن الكلمات من المفروض أن تكون متصلة ببعضهم البعض لتشكيل كلمة.

إضافة تباعد الرسائل إلى حاوية div 👇

CSHTML

  <div class="py-5 tracking-widest">
	<h3 class="---">English</h3>
	<p class="---">English Lorem</p>
	<h3 class="---">عربي</h3>
	<p class="---">عربي لوريم</p>
  </div>

انظر إلى هذا المثال عند تطبيق تباعد الحروف على الdiv بالكامل 👇

تباعد الحروف في العربية غير صحيح ويجب علينا فقط تطبيق التباعد على الأتجاه LTR 👇

CSHTML

<div class="py-5 ltr:tracking-widest">
	<h3 class="---">English</h3>
	<p class="---">English Lorem</p>
	<h3 class="---">عربي</h3>
	<p class="---">عربي لوريم</p>
</div>

Icon نصيحة

إذا تم تعيين المحتوى الموجود في الحاوية ليكون باللغة الإنجليزية عند "dir = "ltr وباللغة العربية عند "dir = "rtl ستعمل التعديلات المذكورة أعلاه بشكل مثالي ولا نحتاج إلى تعديل أي شيء

نظرًا لأن المحتوى الموجود داخل عنصر div يحتوي على انجليزي و عربي يمكننا إصلاح هذه المشكلة عن طريق إضافة التباعد فقط على العناصر الأنجليزية فقط 👇

CSHTML

<div class="py-5">
	<h3 class="--- tracking-widest">English</h3>
	<p class="--- tracking-widest">English Lorem</p>
	<h3 class="---">عربي</h3>
	<p class="---">عربي لوريم</p>
</div>

انظر إلى المثال 👇

ارتفاع الخط - رابط

عند تصميم ارتفاع الخط لـ LTR ، يمكنك تحديد ارتفاع الخط الذي يعمل بشكل رائع باللغة الإنجليزية ولكن تأكد من أن ارتفاع الخط يعمل على الRTL أو زيادته إذا لزم الأمر ، انظر إلى هذا المثال لإضافة leadgin-5 إلى كلتا الفقرتين الذي يضيف line-height بقيمة 1.25rem 👇

قد يبدو هذا جيدًا في الإنجليزية ولكن يبدو ان الأرتفاع غير مناسب في العربية لذا علينا زيادة ارتفاع الخط للفقرة العربية أكثر 👇

CSHTML

<p class="--- leading-5 rtl:leading-6">
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Perspiciatis esse necessitatibus consequatur reiciendis? Cumque
  excepturi natus, quis illum numquam alias.
</p>
<p class="--- leading-6">
  لوريم ايبسوم دولار سيت أميت ,كونسيكتيتور أدايبا يسكينج أليايت,سيت
  دو أيوسمود تيمبور أنكايديديونتيوت لابوري ات دولار ماجنا أليكيوا .
  يوت انيم أد مينيم فينايم,كيواس نوستريد أكسير سيتاشن يللأمكو
  لابورأس نيسي يت أليكيوب أكس أيا كوممودو كونسيكيوات . ديواس أيوتي
</p>

فاصل الكلمات - رابط

كن حذرًا عند استخدام فئات الأدوات المساعدة لـ Word Break وتأكد أن الكلمات لا تنكسر في نهاية السطر في اللغة العربية ، انظر لهذا المثال لتطبيق فاصل الكلمات 👇

CSHTML

   <div class="py-5">
	<p class="--- break-all">
	  Be careful when using the break-all utility class because
	  it leads to break words at the end
	  of the sentence no matter and instead use the utility class break-words that tries to preserve the word
	  and only break it if necessary
	</p>
	<p dir='auto' class="--- break-all">
	انتبه من أستخدام خاصية ال break-all  في TailwindCSS 
	مع اللغة العربية لأنه من الممكن أن تلاحظ ان الكلمة تنقطع في نهاية السطر 
	وهذا لا يتناسب مع اللغة العربية بحيث أنه يجب ان ينتهي السطر بنهاية الكلمة
	وبدء كلمة جديدة دائما في بداية الصف وبدلا من ذلك أستخدم خاصية الbreak-keep او خاصية الbreak-normal 
	والتي ستاعد في حل هذه المشكلة
	</p>
  </div>

سيؤدي الكلاس break-all المستخدمة في الفقرات أعلاه إلى كسر الكلمات على الفور دون محاولة الحفاظ على الكلمات في النهاية.

لإصلاح هذه المشكلة ، يمكننا استخدام break-words لـ الأنجليزية التي ستحاول الحفاظ على الكلمات قبل كسرها و للعربية يمكننا استخدام إما break-normal أو break-keep الذي يتصرف مثل الحالة الطبيعية وكسر الكلمات عند نقاط الاستراحة العادية.

CSHTML

<div class="py-5">
	<p class="--- break-words">
	  Be careful when using the break-all utility class because
	  it leads to break words at the end
	  of the sentence no matter and instead use the utility class break-words that tries to preserve the word
	  and only break it if necessary
	</p>
	<p dir='auto' class="--- break-keep">
	انتبه من أستخدام خاصية ال break-all  في TailwindCSS 
	مع اللغة العربية لأنه من الممكن أن تلاحظ ان الكلمة تنقطع في نهاية السطر 
	وهذا لا يتناسب مع اللغة العربية بحيث أنه يجب ان ينتهي السطر بنهاية الكلمة
	وبدء كلمة جديدة دائما في بداية الصف وبدلا من ذلك أستخدم خاصية الbreak-keep او خاصية الbreak-normal 
	والتي ستاعد في حل هذه المشكلة
	</p>
</div>

الخصائص المنطقية

تدعم TailwindCSS عددًا جيدا من فئات الأدوات المساعدة للخصائص المنطقية التي تجعل تصميم موقع ويب يدعم لغات متعددة أسهل.

محاذاة النص ( رابط )

لقد تحدثنا عن الخصائص المنطقية للنص في قسم اتجاه النص وأظهرنا الفرق بين الخصائص الاتجاهية والخصائص المنطقية.

اتجاهي:

text-left - تعيين النص على الاتجاه الأيسر.
text-right - تعيين النص على الاتجاه الأيمن.

منطقي:

text-start - تعيين النص على اتجاه البدء.
text-end - تعيين النص على الاتجاه النهائي.

الهامش (Margin) - الرابط

يعد تطبيق الMargin مع الخصائص المنطقية مفيدًا جدًا عندما نريد إضافة مسافة في بداية الحاوية أو في النهاية عند عكس الاتجاه ، يمكن استخدامه لإضافة Margin عند نهاية الأيقونة في شريط الإدخال على سبيل المثال 👇

CSHTML

  <!-- Search Icon -->
  <div class="w-5 h-5 me-4">
	    <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
	<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
    </svg>
  </div>

اتجاهي:

ml-1 - أضف Margin بقيمة 0.25rem ( 4px ) إلى اليسار.
mr-1 - أضف Margin بقيمة 0.25rem ( 4px ) إلى اليمين.

منطقي:

ms-1 - أضف Margin بقيمة 0.25rem ( 4px ) في البداية.
me-1 - أضف Margin بقيمة 0.25rem ( 4px ) في النهاية.

الحشوة (Padding) - الرابط

تطبيق Padding إضافي في البداية أو النهاية حسب الاتجاه. يمكن استخدامه مثل الMargin لإضافة Padding إضافي في بداية أو نهاية عنصر.

اتجاهي:

pl-1 - أضف Padding بقيمة 0.25rem ( 4px ) إلى اليسار.
pr-1 - أضف Padding بقيمة 0.25rem ( 4px ) إلى اليمين.

منطقي:

ps-1 - أضف Padding بقيمة 0.25rem ( 4px ) في البداية.
pe-1 - أضف Padding بقيمة 0.25rem ( 4px ) في النهاية.

الحدود (Border) - الرابط

يعد استخدام الخصائص المنطقية للحدود مفيدًا عند محاولة إظهار حد في اليسار أو اليمين اعتمادًا على اتجاه الصفحة مثل هذا 👇

CSHTML

 <nav>
  <ul class="flex flex-col gap-2 font-light p-2 my-5">
    <li class="border-s-4 ps-2 inline-block bg-purple-400/20 border-purple-600">item 1</li>
    <li class="hover:border-s-4 ps-2 inline-block hover:bg-purple-400/20 border-purple-600">item 2</li>
    <li class="hover:border-s-4 ps-2 inline-block hover:bg-purple-400/20 border-purple-600">item 3</li>
  </ul>
</nav>
<nav dir='rtl'>
  <ul class="flex flex-col gap-2 font-light p-2 my-5">
    <li class="border-s-4 ps-2 inline-block bg-purple-400/20 border-purple-600">العنصر 1</li>
    <li class="hover:border-s-4 ps-2 inline-block hover:bg-purple-400/20 border-purple-600">العنصر 2</li>
    <li class="hover:border-s-4 ps-2 inline-block hover:bg-purple-400/20 border-purple-600">العنصر 3</li>
  </ul>
</nav>

لقد قمنا بدمج الPadding والخصائص المنطقية للBorder في هذا المثال ps-2 , border-s-4 لإضافة Padding إضافي قبل نص العنصر ووجود الBorder في الأتجاه البدائي 👍

اتجاهي:

border-l - إضافة حد 1 بكسل على اليسار.
border-r - أضف حد 1 بكسل إلى اليمين.
منطقي:
border-s - إضافة حد 1 بكسل في البداية.
border-e - إضافة حد 1 بكسل في النهاية.

نصف قطر الحد (Border Radius) - رابط

تعتبر الخاصية المنطقية للBorder Radius مفيدة أيضًا لإضافة على سبيل المثال حافة مستديرة لصورة في جانب واحد وعكس الحافة المستديرة عند تغيير الاتجاه 👇

CSHTML

 <div class="rounded-md font-light flex items-center gap-10 font-normal">
        <img class="my-5 rounded-s-2xl" src="https://picsum.photos/id/110/200" alt="Picture Example">
        <div>
          <h3 class="font-bold text-2xl mb-2">---</h3>
          <p class="font-light text-sm">---</p>
        </div>
      </div>
      <div dir='rtl' class="rounded-md font-light flex items-center gap-10 font-normal">
        <img class="my-5 rounded-s-2xl" src="https://picsum.photos/id/110/200" alt="Picture Example">
        <div>
          <h3 class="font-bold text-2xl mb-2">---</h3>
          <p class="font-light text-sm">---</p>    
         </div>
      </div>

بمجرد إضافة rounded-s-2xl ، أضفنا هاتين الخاصيتين:

border-start-start-radius: 1rem;
border-end-start-radius: 1rem;

اتجاهي:

rounded-tl - إضافة Border Radius بقيمة 0.25rem (4px) للزاوية اليسار في الأعلى
rounded-br - إضافة Border Radius بقيمة 0.25rem (4px) للزاوية اليمنى السفلية

منطقي:

border-ss - إضافة Border Radius بقيمة 0.25rem (4px)
- LTR = > أعلى اليسار
- RTL = > أعلى اليمين
border-ee - إضافة Border Radius بقيمة 0.25rem (4px)
- LTR = > أسفل اليمين
- RTL = > أسفل اليسار

(TailwindCSS) نصائح لدعم الأتجاهات في التصميم

Mohanad Alrwaihy

يعد التعرف على تصميم RTL مفيدًا عند العمل على موقع ويب متعدد اللغات مع اتجاهات مختلفة لتطبيق أفضل خصائص CSS الممكنة بحيث يبدو نمط الموقع رائعًا في كلا الاتجاهات.

ما المقصود بالRTL؟

اتجاه HTML الافتراضي

ماذا سيتغير؟

اتجاه LTR

اتجاه RTL

اختلافات الأتجاهات 👇

دعم TailwindCSS RTL - رابط

اتجاه النص

مثال على اتجاه النص

تباعد الحروف - رابط

ارتفاع الخط - رابط

فاصل الكلمات - رابط

الخصائص المنطقية

محاذاة النص ( رابط )

الهامش (Margin) - الرابط

الحشوة (Padding) - الرابط

الحدود (Border) - الرابط

نصف قطر الحد (Border Radius) - رابط

المراجع