هل أردت يوما أن تعرب أحد سمات (ثيمات ) ووردبرس أو جملة أو دروبال أو أي مجلة أخرى ، ولكن شعرت بالحيرة من أين أبدأ ؟؟
لا عليك فمع هذا المستند الذي أنشيء ماراثون البرمجة الذي خلال الأيام من 20 إلى 24 مايو 2009، بهدف توفير دليل مرجعي لمصممي مواقع ويب المشتغلين على تصميم المواقع العربية أو المواقع ثنائية الاتجاه.
سيصبح عملا أسهل بكثير ، وسيوفر عليك الكثير من الجهد في سبر أغوار CSS و اللغة العربية. المستند من كتابة الأستاذ محمد سعيد احجيوج وهو تحت رخصة FDL.
مقدمة المستند:
عادة تظهر الكثير من المشاكل في تصميم واجهات المواقع العربية، خاصة عند نقل التصميم المصمم أصل بنظام كتابة من اليسار إلى اليمين .LTR
في هذا الدليل السريع سنتعرف على التقنيات (أو الأساليب) الثلاث المعتمدة في نقل تصاميم LTRإلى RTLأو تصميم مواقع ثنائية الاتجاه، مع إدراج نماذج عملية لكل أسلوب. لن نتطرق هنا لشرح أمور خاصة بـ ،CSS
نفترض أنك تملك الحد الأدنى من المعرفة بكيفية تصميم مواقع ويب تسمح لك بالتعامل بسهولة مع .CSS و XHTML
عامة لا يختلف التصميم لـ LTRعن التصميم لـ RTLفيما يخص جزئية التنسيق CSSسوى باختلافات طفيفة تتحدد أساسا في:
- محاذاة النصوص ((text-align
• قيم الهوامش الخارجية جهتي اليمين واليسار ((margin-right & margin-left
• قيم الهوامش الداخلية جهتي اليمين واليسار ((padding-right & padding-left
• محاذاة الصور في الخلفية )(background-position
•محاذاة عناصر الصفحة ((float
•تحديد جهة خطوط الإطارات ((Border-left / Border-right
•تحديد بداية احتساب التموضع الفقي في حالة استخدام خاصية ( ،(position: absoluteأي التغيير بين leftو .right
وبالنسبة لصفحات HTMLلا يختلف الأمر سوى في قيمة إتجاه الصفحة ( .(dir=rtl /dir=ltrداخل الوسم الرئيسي للصفحة < .<htmlيمكن أيضا استخدام خاصية الإتجاه في ملفات CSSنفسها بإدراج الخاصية .directionوهذا هو الخيار الأفضل في حالة إنجاز تصميم من الصفر.
أحيانا يمكن أن نحتاج إلى تحويل الصور، بقلبها أفقيا.
أيضا يمكن أن نحتاج إلى تغيير نوع الخطوط ( .(font-familyوفي هذه الحالة قد نضطر إلى تغيير حجم الكتابة ليناسب الخط المختار. مما يعني ضرورة مراجعة التصميم للتأكد من أن تغيير حجم الكتابة لم يؤثر على تموضع عناصر الصفحة. في حالة التأثير يمكن حل المشكلة بالتعديل على قيم الهوامش أو تعديل قيمة العرض width للعناصر.
سنتعرف من خلال هذا الدليل على ثلاثة أساليب يمكن اعتمادها في إنجاز التصاميم:
- نقل كامل التصميم: في هذه الحالة يتم تصميم ملف تنسيق كامل مستقل لكل اتجاه كتابة.
- إبطال الخصائص: في هذه الحالة يتم استخدام ملف تنسيق واحد لكل الخصائص للاتجاه الافتراضي، ثم إضافة ملف تنسيق آخر لإبطال خصائص الاتجاه في الملف الأول وإعادة تحديدها لتناسب الاتجاه الآخر.
- ثلاث ملفات: في هذه الحالة يتم استخدام ملفين مستقلين لكل اتجاه، يحدد كل منهما الخصائص المحددة للاتجاه فقط. مع استخدام ملف ثالث لتحديد خواص التنسيق المتبقية.
لقراءة المستند ( 10 صفحات مع أمثلة وتمارين ) تفضل بتنزيله من هذه الوصلة.