نصائح لتطوير واجهات مواقع ويب عربية أو ثنائية الاتجاه

أغسطس 7, 2009 كتبه Fahad

هل أردت يوما أن تعرب أحد سمات (ثيمات ) ووردبرس أو جملة أو دروبال أو أي مجلة أخرى ، ولكن شعرت بالحيرة من أين أبدأ ؟؟
 لا عليك فمع هذا المستند الذي أنشيء ماراثون البرمجة الذي خلال الأيام من 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 صفحات مع أمثلة وتمارين ) تفضل بتنزيله من هذه الوصلة.

الوصلة الدائمة