لاشك في أن أي مبرمج للقوالب يطمح في أن يكون القالب الخاص به متوافق مع الـ rtl و ltr في آن واحد , ماذا إن قلت لك أننا في هذا المقال سنتطرق لهذا الأمر ونشرحه بالتفصيل .
ماهي خاصية direction أو الإتجاه :
طبعا الكثير منا وخاصة المبتدءين في المجال لايعرفون معنى الخاصية direction مما يتوجب علينا توضيحها .. الخاصية direction تظبط إتجاه النص بحيث نستخدم rtl للإشارة إلى اللغات التي تكتب من اليمين إلى اليسار و ltr للغات التي تكتب من اليسار الى اليمين كـ اللغة الإنجليزية وذالك بإستخدام الخاصية dir على العنصر html .
في قوالب بلوجر يمكننا توليد الوضيعة rtl و ltr تلقائيا حسب اللغة المستخدمة في المدونة بحيث : يتم توليد الوضعية rtl للعربي أما ltr للأجنبي مما يسمح للمصمم ضبط المسار المناسب لكل وضعية كيفما يشاء .
يمكننا إضافة السمة dir
بحيث تكون معدة تلقائيا وتتغير بتغير اللغة وذالك بإضافة
بعد تركيب السمة لاحظ من خلال فتح مصدر الصفحة عند عنصر الـ html ستجد من بين التعاريف السمة dir='rtl' وهذا في حال كانت اللغة عربية أما لو إنتقلت للغة الأجنبية من إعدادات اللغة أو ببساطة قمت بإضافة
حسنا , المفروض الآن الفكرة تكون قد وصلت لكم لذالك فل نتحدث عن طريقة التخصيص بـ مثال عملي :
من أجل تطبيق هذا المثال يتوجب علينا إضافة كلاس - class يتغير بتغير إتجاه عرض المدونة , إتبع الشرح التالي حتى تتمكن من إضافته :
1 - توجه إلى بلوجر ثم المظهر - إضغط على تعديل
2 - إبحث عن وسم الفتح
3 - يمكن إضافتها بطريقتين بسيطتين :
بحيث تكون بالشكل التالي :
والتي سـ نستعمل فيها العلامة
- لإضافتها فقط نقوم بإضافة العلامة
تحت وسم فتح
بعد إضافتها ستلاحظ من خلال فتح المصدر إضافة كلاس يتغير بتغير لغة العرض .
الآن هيا نفترض أن عندنا عنصر ما نعمل عليه ونريد أن نجعله متوافق مع لغتي العرض .. وليكن زر تحميل مثلا , وهو الذي يظهر أمامك في المعاينة أسفله و class الخاص به هو
-
.rtl .mtec-btn {
float: right;
} - زر rtl
أما إذا كنا في لغة العرض الإنجليزية مثلا ltr نقوم بوضع الزر في الجهة اليسرى ويكون الكود بهذا الشكل :
-
.ltr .mtec-btn {
float: left;
} - زر ltr