تصميم المواقع العربية: ما الذي يتغير فعلاً في RTL

تصميم المواقع العربية مسألة تخطيط لا مسألة ترجمة. ترتيب القراءة والتنقل ومحاذاة النماذج والأيقونات الاتجاهية تنعكس، والأرقام والشعارات وأزرار الوسائط والرسوم البيانية الزمنية لا تنعكس. أغلب المواقع العربية التي تبدو «غير صحيحة» بطريقة يصعب تحديدها بُنيت بترجمة النص وإضافة dir="rtl" ثم نشر ما أنتجه المتصفح. هذا الدليل يغطي ما يجب أن يتغير فعلاً.

لماذا يُنفَّذ التصميم العربي بشكل سيئ غالباً؟

لأن الإعدادات الافتراضية للويب بُنيت من اليسار إلى اليمين، والاختصار يبدو وكأنه يعمل. بيانات W3Techs لشهر أغسطس 2026 تضع العربية عند 0.6% فقط من المواقع التي تُعرف لغة محتواها — حصة ضئيلة من الويب للغة يتحدثها مئات الملايين. النتيجة أن أغلب أنظمة التصميم ومكتبات المكونات والقوالب لم تُختبر جدياً في RTL، فتظهر أخطاؤها في مشروعك لا في مستودعها.

ما الذي ينعكس، وما الذي لا ينعكس؟

القاعدة: كل ما يعبّر عن اتجاه القراءة ينعكس، وكل ما يعبّر عن واقع مادي أو هوية علامة تجارية لا ينعكس.

العنصر	ينعكس في RTL؟	السبب
تخطيط الصفحة والأعمدة والأشرطة الجانبية	نعم	القراءة تبدأ من الحافة اليمنى، فيبدأ التسلسل البصري منها أيضاً.
ترتيب عناصر التنقل	نعم	العنصر الأول في القائمة مكانه اليمين.
تسميات النماذج ومحاذاة الحقول	نعم	محاذاة النص تتبع اللغة، بما فيها النص التوضيحي ورسائل التحقق.
أسهم التالي والسابق والرجوع	نعم	«التالي» يشير إلى اليسار في العربية؛ السهم المتجه يميناً يُقرأ كرجوع.
الأرقام	لا	الأرقام تُقرأ من اليسار إلى اليمين حتى داخل النص العربي.
أرقام الهواتف والتواريخ والأسعار والكود	لا	للسبب نفسه: مقاطع من اليسار إلى اليمين داخل محتوى من اليمين إلى اليسار.
الشعارات وأسماء العلامات اللاتينية	لا	الشعار هوية لا اتجاه، وعكسه يشوّهه.
أزرار تشغيل الوسائط	لا	التشغيل والتقديم يتبعان عرفاً مادياً لا اتجاه القراءة.
الرسوم البيانية بمحور زمني	لا	عرف الزمن من اليسار إلى اليمين عالمي تقريباً، وعكسه يقلب المعنى.
علامات الصح ومؤشرات التحميل والأيقونات المحايدة	لا	لا تحمل اتجاهاً لتعكسه.

أين تنكسر التصاميم العربية عادةً؟

في خمسة أماكن، في كل مرة تقريباً. لا شيء منها غريب؛ هي فقط غير مرئية حتى يقرأ أحد الصفحة بالعربية.

• الطباعة وارتفاع الأسطر. الخط العربي أطول في الصعود والنزول ولا حروف كبيرة فيه. ارتفاعات الأسطر المضبوطة للاتينية تبدو مضغوطة، والخطوط التي لا تحمل وجهاً عربياً حقيقياً تسقط إلى خط بديل رديء. اختر الخط العربي عن قصد ولا تترك المتصفح يختار.
• تغير طول النص. العربية غالباً أقصر من الإنجليزية لكنها أطول ارتفاعاً. الأزرار وعناصر التنقل ذات العرض الثابت بالبكسل تبدو فارغة أو تنكسر أسطرها. اجعل الحجم يتبع المحتوى لا رقماً ثابتاً.
• النصوص مختلطة الاتجاه. «احجز مكالمة على ‎+971 4 123 4567» تحتوي مقطعاً من اليسار إلى اليمين داخل نص عربي. دون ترميز صحيح تقع علامات الترقيم في الجهة الخطأ، وهذا أكثر الأخطاء الظاهرة شيوعاً في المواقع العربية.
• المسافات المكتوبة يدوياً. أي margin-left أو padding-left في ملف التنسيق يبقى بعد عكس الاتجاه ويدفع العناصر في الاتجاه الخطأ. الخصائص المنطقية مثل margin-inline-start تنعكس تلقائياً وهي الحل.
• أيقونات تبدو محايدة فقط. فقاعات المحادثة ذات الذيل، والأقلام، وأسهم الإرسال، ومنحنيات التراجع، وعربات التسوق كلها تحمل اتجاهاً. كل منها يحتاج قراراً لا عكساً شاملاً.

«لا يمكنك اختبار موقع عربي بالإنجليزية. كل خطأ تخطيط شحنته في RTL كان غير مرئي حتى نظر إليه قارئ عربي وقال: الجملة تبدأ من المكان الخطأ.» — Shaheer Malik، مصمم منتجات ومطور Framer

موقع ثنائي اللغة أم عربي فقط؟

ابنِ موقعاً ثنائي اللغة إذا كان جمهورك تجارياً في الخليج، وعربياً فقط إذا كنت تخاطب مستهلكين في سوق واحدة. أغلب شركات الخليج تحتاج الاثنين، لأن المشترين يتنقلون بين اللغتين حسب السياق: الإنجليزية لوثائق المشتريات، والعربية لكل ما عداها. الموقع ثنائي اللغة يكلف أكثر من لغة واحدة وأقل من موقعين، لأن البنية مشتركة وما يتغير هو طبقة الاتجاه فقط.

وإذا اخترت ثنائية اللغة، فقرر مسبقاً كيف ينتقل الزائر بين اللغتين وماذا يحدث لموقعه في الصفحة. مبدّل لغة يعيد الجميع إلى الصفحة الرئيسية هو أسرع طريقة لخسارة قارئ كان في منتصف صفحة الأسعار.

كم يكلف بناء موقع عربي؟

توقع زيادة معتدلة على موقع بلغة واحدة لا مضاعفة التكلفة — العمل الإضافي في التخطيط والطباعة لا في تصميم ثانٍ. ما يرفع التكلفة فعلاً هو التحويل اللاحق: أخذ موقع إنجليزي منتهٍ وإجباره على RTL أغلى باستمرار من تصميم الاتجاهين من البداية، لأن كل قرار مسافات مكتوب يدوياً يجب إيجاده وإلغاؤه.

أبني المواقع العربية وRTL كقرار هيكلي من أول تخطيط. ولأكون واضحاً في تقسيم العمل: أنت أو مترجمك تزوّدون النص العربي، وأنا أتولى البنية والطباعة والتسلسل البصري التي تجعله يُقرأ بشكل صحيح. لا أكتب العربية بنفسي، ومن يخبرك أن مصممه سيكتبها يصف خدمة ترجمة لا خدمة تصميم.

ماذا تفعل الآن؟

افتح موقعك الحالي، وانتقل إلى العربية، واقرأ الشاشة الأولى بصوت عالٍ من اليمين. إذا وقعت عينك في أي مكان غير أعلى اليمين، فالتخطيط يعاكس اللغة. هذا الاختبار وحده يكشف أغلب المشكلات. وإذا أردت رأياً ثانياً، أرسل لي الرابط.