أفضل طريقة لمواقع RTL مع ساس!

هناك العديد من الطرق لتطبيق RTL على موقع الويب الخاص بك على الإنترنت ، ولكن لا يمكن استخدام أي منها بسهولة.

لقد قمت بتطوير طريقة سهلة ومريحة لدعم الموقع متعدد اللغات ، والذي يتم دعم لغات RTL أيضًا.

مواقع RTL مع ساس

مفهوم

في اللغة الإنجليزية ، تبدأ محاذاة النص من اليسار وينتهي من اليمين ، ولكن في اللغات السامية ، يكون عكس النص من اليمين وينتهي عند اليسار.

دعنا نقول أننا بحاجة إلى الحشو في بداية العلامة

. في اللغة الإنجليزية ، يجب أن يكون الحشو يسارًا: 10px وباللغات السامية يجب أن يكون padding-right: 10px ، في كلتا هاتين الحالتين ، نحتاج إلى حشو في بداية السطر 10px.

ومن هنا نبدأ طريقة إنشاء نمط عالمي للبداية أو النهاية.

بطريقة مماثلة ، سوف نستخدمها في الموضع والعوامات والحشو والهامش والحدود وتحويل CSS.

كيف تبدأ؟

أولاً: قم بإنشاء ملفين للتكوين _direction-ltr.scss و _direction-rtl.scss.

في ملف LTR ، أدخل هذه المتغيرات:

/ *** مواقع LTR *** /
$ direction: ltr؛
$ الاتجاه المعاكس: rtl؛

$ start-direction: left
$ نهاية الاتجاه: يمين ؛

تحويل الاتجاه $: 1 ؛

في ملف RTL ، أدخل هذه المتغيرات:

/ *** مواقع RTL *** /
الاتجاه $: rtl ؛
$ الاتجاه المعاكس: ltr؛

$ start-direction: right؛
$ نهاية الاتجاه: يسار ؛

تحويل الاتجاه $: -1؛

ثانياً: قم بإنشاء / تحديث ملف SASS الرئيسي كملف داخلي ، على سبيل المثال _main.scss.

إشعار: الملف الرئيسي لا يستورد ملفات تهيئة الاتجاهات!

كيفية استيراد ملفات الاتجاهات؟

أضف ملفين رئيسيين جديدين في الدليل الجذر ، main-ltr.scss & main-rtl.scss.

في كل ملف رئيسي @ قم باستيراد ملف اتجاه التكوين الصحيح + ملف _main.scss الداخلي.

مثال (الرئيسي-ltr.scss):

import "config-direction / _direction-ltr.scss"؛
import "_main.scss"؛

مثال (الرئيسي-rtl.scss):

import "config-direction / _direction-rtl.scss"؛
import "_main.scss"؛

من هذا الملف ، ستقوم بتجميع الملفين الرئيسيين ، main-ltr.css & main-rtl.css

كيفية استخدام المتغيرات؟

اتجاهات CSS ومحاذاة النص:

فقط ضع المتغيرات في القيمة. يتم ترك اتجاه البدء $ للغات LTR ولغات Semitic (RTL) صحيحة. اتجاه اللغة الإنجليزية هو ltr ولغات السامية هو rtl.

الجسم{
  الاتجاه: الاتجاه $.
  محاذاة النص: $ start-direction ؛
}

وظائف CSS:

في الموضع ، ضع اليمين واليسار في المتغيرات وفقًا لاحتياجاتك.

مثال:

الموقف: مطلق ؛
# {$ start-direction}: 50٪؛

هوامش CSS / الحشوات / الحدود:

مثال:

الهامش - # {$ end-direction}: 10px؛
padding - # {$ start-direction}: 10px؛
border - # {$ end-direction} - عرض النطاق: 2 بكسل ؛

يطفو CSS:

تعويم: $ بداية الاتجاه ؛

تحويل CSS: translateX:

عند العمل مع التحويل ، تحتاج إلى تغيير الرقم من الموجب إلى السالب أو العكس.

دعنا نقول لدينا تحويل مربع: translateX (200px) باللغة الإنجليزية. نقوم بضربه في $ direction-direction (= 1) ، ستكون النتيجة باللغة الإنجليزية 200px (1 * 200px) ، لكن في rtl سيكون -200px (-1 * 200px).

مثال:

convert: translateX (200px * $ convert-direction) ؛

نتيجة

هذا هو! لقد صنعنا طريقة سهلة ومريحة لمواقع RTL.

مثال على الكود في _main.scss:

الجسم{
  الاتجاه: الاتجاه $.
  محاذاة النص: $ start-direction ؛
  padding - # {$ end-direction}: 10px؛
}

سيتم تجميعها في main-ltr.css:

الجسم{
  الاتجاه: لتر ؛
  محاذاة النص: اليسار ؛
  الحشوة اليمنى: 10 بكسل ؛
}

سيتم تجميعها في main-rtl.scss

الجسم{
  الاتجاه: rtl.
  محاذاة النص: اليمين ؛
  الحشوة اليسرى: 10px ؛
}

ملخص

هذا كل شيء ، لديك الآن طريقة سهلة لمواقع RTL.

أتمنى أن تكون قد استمتعت بهذا المقال وتعلمت من تجربتي.

إذا أعجبك هذا المقال ، فقد يعجبك أيضًا:
CSS الهندسة المعمارية لمواقع متعددة مع ساس

Elad Shechter ، مطور ويب متخصص في تصميم CSS و HTML والهندسة المعمارية ، والعمل في Investing.com.

يمكنك الاتصال أو متابعتي:
حساب التويتر الخاص بي
موقع التواصل الاجتماعي الفيسبوك
ينكدين

يمكنك أن تجدني في مجموعات Facebook الخاصة بي:
الماجستير المغلق
CSS Masters Israel