شرح الإتجاه في بلوجر - Direction Blogger
لاشك في أن أي مبرمج للقوالب يطمح في أن يكون القالب الخاص به متوافق مع الـ RTL و LTR في آن واحد. ماذا إن قلت لك أننا في هذا المقال سنتطرق لهذا الأمر ونشرحه بالتفصيل.
ما هي خاصية direction أو الإتجاه؟
طبعا الكثير منا وخاصة المبتدئين في المجال لا يعرفون معنى الخاصية direction مما يتوجب علينا توضيحها. الخاصية direction تظبط إتجاه النص بحيث نستخدم RTL للإشارة إلى اللغات التي تكتب من اليمين إلى اليسار و LTR للغات التي تكتب من اليسار إلى اليمين كـ اللغة الإنجليزية وذلك باستخدام الخاصية dir على العنصر HTML.
في قوالب بلوجر
يمكننا توليد الوضعية RTL و LTR تلقائيا حسب اللغة المستخدمة في المدونة بحيث: يتم توليد الوضعية RTL للعربي أما LTR للأجنبي مما يسمح للمصمم ضبط المسار المناسب لكل وضعية كيفما يشاء.
يمكننا إضافة السمة dir بحيث تكون معدة تلقائيا وتتغير بتغير اللغة وذلك بإضافة expr:dir='data:blog.languageDirection' داخل الوسم <html>. قم بتركيب هذه السمة في المكان المطلوب كما لا ننسى أننا قد استعملنا هذه السمة في شرحنا عن أكواد الميتا تاج.
بعد تركيب السمة لاحظ من خلال فتح مصدر الصفحة عند عنصر الـ HTML ستجد من بين التعاريف السمة dir='rtl' وهذا في حال كانت اللغة عربية. أما لو انتقلت للغة الأجنبية من إعدادات اللغة أو ببساطة قمت بإضافة ?hl=en في آخر الرابط ستلاحظ أن السمة تغيرت إلى dir='ltr' وهذا هو المطلوب.
طريقة التخصيص بمثال عملي
من أجل تطبيق هذا المثال يتوجب علينا إضافة كلاس - class يتغير بتغير إتجاه عرض المدونة. اتبع الشرح التالي حتى تتمكن من إضافته:
- التوجه إلى بلوجر ثم المظهر - اضغط على تعديل HTML
- البحث عن وسم الفتح
<body> - يمكن إضافتها بطريقتين بسيطتين
الطريقة الأولى:
أضف السمة التالية مباشرة في الـ <body>:
expr:class='data:blog.languageDirection'بحيث تكون بالشكل التالي:
<body expr:class='data:blog.languageDirection'>الطريقة الثانية:
والتي سنستعمل فيها العلامة <b:class> التي تسمح لنا بإضافة قيمة في السمة class مفردة.
لإضافتها فقط نقوم بإضافة العلامة:
<b:class expr:name='data:blog.languageDirection'/>تحت وسم فتح <body> مباشرة بحيث تكون بالشكل التالي:
<body>
<b:class expr:name='data:blog.languageDirection'/>
</body>تطبيق عملي
لنفترض أن عندنا عنصر ما نعمل عليه ونريد أن نجعله متوافق مع لغتي العرض. وليكن زر تحميل مثلا، وهو الذي يظهر أمامك في المعاينة أسفله و class الخاص به هو .mtec-btn. إذا كانت لغة العرض عربية RTL نضع الزر في الجهة اليمنى فالكود الخاص بها سيكون بالشكل التالي:
.rtl .mtec-btn {
float: right;
}
أما إذا كنا في لغة العرض الإنجليزية مثلا LTR نقوم بوضع الزر في الجهة اليسرى ويكون الكود بهذا الشكل:
.ltr .mtec-btn {
float: left;
}
أتمنى أن تكون الفكرة واضحة. في نظري الشرح بسيط ومفهوم يتطلب فقط بعض التركيز. الخلاصة: في كل مرة نصمم أداة نقوم باستخدام الكلاس المناسب لذلك الإتجاه. وطبعا في مدونتنا نضع بلوجر أول إهتماماتنا ونسعى جاهدين في سبيل تطويره أكثر.
