تصميم المواقع العربية يعني البناء للقراءة من اليمين إلى اليسار (RTL) منذ البداية، عكس التخطيط والتنقّل، واختيار خطوط مصنوعة للحرف العربي، والتعامل مع النص ثنائي الاتجاه والأرقام بشكل صحيح، واستخدام خصائص CSS المنطقية. عند إتقانه، يبدو الموقع العربي أصيلًا بدلًا من صفحة إنجليزية مقلوبة، وهو ما يؤثر مباشرةً في الثقة وسهولة الاستخدام.
أبرز النقاط
- تُقرأ العربية من اليمين إلى اليسار، لذا ينبغي عكس التخطيطات لا مجرد ترجمتها.
- استخدم dir=rtl وlang=ar، وفضّل خصائص CSS المنطقية على قواعد اليمين واليسار.
- اختر خطوطًا مصمَّمة للحرف العربي؛ فالخطوط اللاتينية تعرض العربية بشكل رديء.
- تعامل مع النص ثنائي الاتجاه والسلاسل المختلطة بالإنجليزية والعربية والأرقام بشكل متعمّد.
- إمكانية الوصول والمراجعة من ناطق أصلي تحوّلان صفحة RTL تقنيًا إلى تجربة عربية حقيقية.
ما الذي يتطلبه تصميم المواقع العربية فعليًا؟
يتطلب تصميم المواقع العربية التصميم للقراءة من اليمين إلى اليسار منذ البداية تمامًا، لا ترجمة صفحة إنجليزية وقلبها. في العربية، تتحرك العين من اليمين إلى اليسار، لذا فإن نقطة انطلاق التخطيط الطبيعية والتنقّل وموضع الشعار والتدفق البصري كلها تنزاح. يتغير تبعًا لذلك ترتيب القراءة والمحاذاة واتجاه مؤشرات التقدّم والعروض المتحركة.
هذا قرار تصميمي قبل أن يكون قرارًا برمجيًا. الموقع العربي الذي يعكس تخطيطًا إنجليزيًا آليًا فحسب كثيرًا ما يبدو خاطئًا بمهارة، الأيقونات تشير في الاتجاه الخطأ، والتباعد يبدو غير سليم، والمحتوى مختلط اللغات يتصادم. التصميم للعربية من البداية ينتج صفحة تبدو أصيلة لقارئ في أبو ظبي بدلًا من كونها مُكيَّفة.
هدف تصميم المواقع العربية هو ألّا يلاحظ القارئ الناطق أصلًا الآليات قط، بل تبدو الصفحة ببساطة مصنوعة له، لأنها كذلك.
كيف تنفّذ تخطيط اليمين إلى اليسار (RTL) بشكل صحيح؟
يبدأ تنفيذ تخطيط اليمين إلى اليسار بشكل صحيح من الأساسيات: عيّن dir=rtl على عنصر html أو حاوية وlang=ar كي تتعامل المتصفحات والتقنيات المساعِدة مع الاتجاه واللغة بشكل سليم. من هناك، النهج الحديث هو خصائص CSS المنطقية، margin-inline-start بدلًا من margin-left، وpadding-inline-end بدلًا من padding-right، كي يتكيّف التخطيط مع الاتجاه تلقائيًا بدلًا من ترميز اليمين واليسار بشكل ثابت.
الـ RTL الصحيح يعني أيضًا عكس الأشياء الصحيحة وعدم عكس غيرها. ينبغي عكس التنقّل والمحاذاة والتدفق؛ أما شعارات العلامة وبعض الأيقونات وأدوات التحكم في تشغيل الوسائط والأرقام فلا ينبغي عكسها عمومًا. إتقان هذا العكس الانتقائي هو ما يفصل الموقع العربي الاحترافي عن المقلوب آليًا.
- عيّن dir=rtl وlang=ar على المستوى المناسب.
- استخدم خصائص CSS المنطقية (inline-start/inline-end) بدلًا من اليمين/اليسار.
- اعكس التخطيط والتنقّل؛ وأبقِ الشعارات وبعض الأيقونات والأرقام دون عكس.
- اختبر بمحتوى عربي حقيقي، لا نص وهمي، لالتقاط مشكلات التباعد والفيض.
ما الذي يجعل الخطوط العربية مختلفة على الويب؟
الخطوط العربية مختلفة على الويب لأن الحرف العربي متصل ومترابط ومعبّر رأسيًا بطرق لا يماثلها الحرف اللاتيني. تتغير أشكال الحروف تبعًا لموضعها في الكلمة، وتجلس التشكيلات فوق خط الأساس وتحته، وارتفاع السطر الذي يصلح للنص اللاتيني كثيرًا ما يزحم العربية. استخدام خط مصمَّم للعربية، مثل عائلات مبنية خصيصًا للحرف، أمر أساسي؛ فالخط اللاتيني مع خط احتياطي يعرض العربية بشكل رديء.
الخطوط العربية الجيدة تعني أيضًا ارتفاع سطر سخيًا، وأحجام خط مناسبة (تحتاج العربية غالبًا إلى مساحة رأسية أكبر قليلًا)، واقترانًا دقيقًا عندما تظهر الإنجليزية والعربية معًا. بالنسبة لعلامة في أبو ظبي، الاستثمار في خطوط عربية سليمة هو أحد أوضح إشارات الجودة والاحترام للجمهور.
كيف تتعامل مع النص ثنائي الاتجاه والأرقام؟
التعامل مع النص ثنائي الاتجاه والأرقام هو أحد أصعب أجزاء تصميم المواقع العربية. يخلط المحتوى الحقيقي الاتجاهات باستمرار، جملة عربية تحتوي على اسم علامة إنجليزي، أو رقم هاتف، أو عنوان URL، أو سعر. تطبّق المتصفحات خوارزمية Unicode ثنائية الاتجاه، لكن الحالات المعقدة لا تزال تحتاج إلى تعامل صريح بالترميز وCSS كي لا يُعاد ترتيب النص بشكل مربك.
تتطلب الأرقام اختيارًا متعمّدًا. قد يستخدم المحتوى العربي الأرقام العربية الهندية أو الأرقام الغربية تبعًا للجمهور والسياق، وينبغي تنسيق التواريخ والعملات وأرقام الهواتف باتساق للسوق المستهدَف. تحديد هذه القواعد مسبقًا، واختبارها بمحتوى مختلط حقيقي، يمنع الأعطال الصغيرة التي تجعل الصفحة العربية تبدو غير مكتملة.
كيف تنطبق أفضل ممارسات إمكانية الوصول وتجربة الاستخدام على المواقع العربية؟
تنطبق أفضل ممارسات إمكانية الوصول وتجربة الاستخدام بالكامل على المواقع العربية وهي ما يرفع صفحة RTL صحيحة تقنيًا إلى تجربة جيدة حقًا. اتّباع إرشادات WCAG، تباين لون كافٍ، وتنقّل بلوحة المفاتيح، وتسميات ذات معنى، وسمات لغة صحيحة كي تنطق قارئات الشاشة العربية بشكل سليم، يجعل الموقع قابلًا للاستخدام للجميع ويعزّز الجودة.
تشمل أفضل ممارسات تجربة الاستخدام للعربية الاختبار مع ناطقين أصليين، وضمان أن النماذج ورسائل التحقق تُقرأ بشكل طبيعي، والتأكد من أن المُبدّل ثنائي اللغة يحفظ السياق بدلًا من إلقاء المستخدمين على صفحة رئيسية. بالنسبة لمؤسسة في أبو ظبي، تلتقط مراجعة من ناطق أصلي في النهاية الفروق الدقيقة التي لا يلتقطها أي فحص آلي، محوّلةً موقعًا عربيًا مقبولًا إلى موقع يبدو سلسًا.
تصميم المواقع العربية: قائمة تنفيذ RTL
| العنصر | أفضل ممارسة | الخطأ الشائع |
|---|---|---|
| الاتجاه | عيّن dir=rtl وlang=ar | ترك dir=ltr والقلب بصريًا |
| التباعد | استخدم خصائص CSS المنطقية | هوامش يمين/يسار مرمّزة بشكل ثابت |
| الخطوط | استخدم خطوطًا مبنية للحرف العربي | خط لاتيني مع احتياطي عربي |
| الأيقونات | اعكس الأيقونات الاتجاهية فقط | عكس الشعارات وكل الأيقونات |
| الأرقام | اختر نظام أرقام متسقًا | خلط الأنظمة دون اتساق |
| المراجعة | فحص عربي أصيل وإمكانية وصول | الاعتماد على الترجمة الآلية فقط |
“يمكنك أن تعرف خلال ثوانٍ ما إذا كان الموقع العربي مصمَّمًا أم مقلوبًا فحسب. المواقع المصمَّمة تعكس التخطيط لكنها تُبقي الشعارات والأرقام ثابتة، وتستخدم خطوطًا عربية حقيقية بارتفاع سطر سليم، وتتعامل مع النص المختلط بالإنجليزية والعربية بنظافة. تلك الحرفية هي ما يكسب ثقة القارئ الناطق أصلًا، ولا يمكن أتمتتها بعيدًا.”
الأسئلة الشائعة
هل تصميم الويب العربي مجرد قلب التخطيط إلى اليمين؟
لا. القلب جزء منه فقط. تصميم الويب العربي السليم يعكس التخطيط والتنقّل مع إبقاء الشعارات وبعض الأيقونات والأرقام دون عكس، ويستخدم خطوطًا مبنية للحرف العربي، ويتعامل مع النص ثنائي الاتجاه، ويتّبع معايير إمكانية الوصول. الصفحة الإنجليزية المقلوبة آليًا كثيرًا ما تبدو خاطئة بمهارة للقرّاء العرب الأصليين.
هل يمكنني استخدام خطي الإنجليزي للنص العربي؟
عمومًا لا. تعرض معظم الخطوط اللاتينية العربية بشكل رديء أو لا تعرضها إطلاقًا، فترتد إلى خط افتراضي يتعارض مع تصميمك. الحرف العربي متصل ومترابط، لذا يحتاج إلى خط مصمَّم له خصيصًا. اختيار خط عربي سليم، بارتفاع سطر سخي، أمر أساسي لنتيجة احترافية.
ما خصائص CSS المنطقية ولماذا تهمّ لـ RTL؟
خصائص CSS المنطقية مثل margin-inline-start وpadding-inline-end تصف التباعد بالنسبة إلى اتجاه القراءة بدلًا من اليمين واليسار الماديين. تهمّ لـ RTL لأن مجموعة واحدة من القواعد تتكيّف عندها تلقائيًا مع العربية والإنجليزية، متجنّبةً أوراق أنماط مكرّرة والأخطاء الناجمة عن قيم اليمين واليسار المرمّزة بشكل ثابت.
هل ينبغي أن تستخدم المواقع العربية الأرقام العربية الهندية أم الغربية؟
يعتمد ذلك على جمهورك وسياقك. كلاهما مستخدَم في أنحاء العالم العربي. المهم أن تختار بشكل متعمّد، وتطبّقه باتساق عبر التواريخ والأسعار وأرقام الهواتف، وتختبر بمحتوى مختلط حقيقي بالإنجليزية والعربية. أنظمة الأرقام غير المتسقة علامة شائعة على بناء عربي متعجّل.
