خمسة أخطاء تكسر المواقع العربية — ولماذا تتكرر في كل مشروع تقريباً
أغلب أدوات بناء الويب صُمِّمت للإنجليزية، ثم أُضيف دعم العربية إليها لاحقاً. الفرق بين «مصمَّم للعربية» و«يدعم العربية» يظهر في التفاصيل التي يلاحظها المستخدم السعودي فوراً، ولا يلاحظها المطوّر الذي يختبر بالإنجليزية.
هذه خمسة أخطاء تتكرر في كل مشروع عربي تقريباً، مع سبب حدوثها وطريقة تجنّبها.
1. استخدام left وright بدل الخصائص المنطقية
الخطأ الأكثر شيوعاً. حين تكتب margin-left: 16px فأنت تثبّت الاتجاه، ولن ينعكس تلقائياً عند تبديل dir إلى rtl.
/* يكسر في RTL */
.card { margin-left: 1rem; padding-right: 2rem; }
/* ينعكس تلقائياً */
.card { margin-inline-start: 1rem; padding-inline-end: 2rem; }نفس القاعدة تنطبق على text-align: left مقابل text-align: start، وعلى border-left مقابل border-inline-start. الخصائص المنطقية مدعومة في كل المتصفحات الحديثة، ولا سبب لتجنّبها.
2. وضع dir="rtl" على عنصر داخلي بدل
الاتجاه يُورَّث. وضعه على
lang="ar" — الأخير مهم لقارئات الشاشة لتنطق المحتوى بالعربية لا بالإنجليزية.3. الأيقونات التي لا يجب أن تنعكس
الانعكاس التلقائي للأيقونات خطأ متكرر في الاتجاهين. سهم «التالي» يجب أن ينعكس ليشير يساراً في RTL. لكن أيقونة التشغيل (▶) وشعار العلامة التجارية وأيقونات وسائل التواصل لا يجب أن تنعكس — سهم التشغيل المعكوس يعني «رجوع» لا «تشغيل».
القاعدة: اعكس ما يدل على اتجاه القراءة أو التقدّم، واترك ما يدل على معنى ثابت.
4. الأرقام والتواريخ وخلط الاتجاهات
النص العربي يُقرأ من اليمين، لكن الأرقام تُكتب من اليسار. حين يختلط الاثنان — رقم هاتف داخل جملة عربية مثلاً — يتشوّش ترتيب العرض.
الحل عزل الجزء المختلف الاتجاه:
اتصل بنا على +966 54 291 7263 في أي وقت.
بدون العزل قد يظهر الرقم بترتيب مختلف تماماً عمّا كتبته، خصوصاً إن احتوى على + أو أقواس.
5. الخطوط التي لا تدعم التشكيل والمحارف العربية
خط لاتيني جميل لن ينفع للعربية. والأسوأ أن يبدو «شبه صحيح»: المحارف موجودة لكن الوصلات بين الحروف مكسورة أو التشكيل يقفز فوق الحروف. اختبر دائماً بنص فيه تشكيل (مُبَرمِج) وبأسماء فيها لام-ألف وهمزات، لا بكلمة «مرحبا» وحدها.
وانتبه إلى أن تحميل عدة أوزان من خط عربي أثقل بكثير من نظيره اللاتيني — ملف الوزن الواحد قد يقارب 35 كيلوبايت مقابل 14 للاتيني. احذف الأوزان التي لا تستخدمها فعلاً.
الأصل أن تُبنى عربية من البداية
كل ما سبق قابل للإصلاح، لكن إصلاحه بعد البناء يعني مراجعة كل مكوّن يدوياً — وهو ما يستهلك وقتاً أكثر من بناء الواجهة بالاتجاه الصحيح من الأساس.
هذا بالضبط ما تعالجه منصة مُبَرمِج، وهي منصة سعودية تولّد المواقع بالذكاء الاصطناعي من وصف عربي، وتُخرج الترميز بدعم RTL أصيل بدل إضافته لاحقاً. تصف ما تريده بالعربية فتحصل على موقع بـTailwind CSS جاهز، دون أن تصلح الاتجاه يدوياً بعد كل توليد.
سواء استخدمت أداة أو بنيت بنفسك، القاعدة واحدة: العربية ليست ترجمة تُضاف في النهاية، بل قرار معماري يُتخذ في البداية.
