١٢ قاعدة لتصميم الويب العربي (RTL) تهم فعلاً في 2026
معظم المواقع "العربية" ليست عربية. هي مواقع إنجليزية تُرجم نصها وأُلصق بها dir="rtl". القارئ العربي الأصيل يكتشف ذلك في ثلاث ثوانٍ ويغادر. الثقة التي خسرتها للتو استغرقت سنوات لبنائها.
هذه 12 قاعدة نطبّقها في كل مشروع ثنائي اللغة في كلاود توبيا. ليست آراء — بل الفرق بين موقع يقرأه العميل بطبيعية وآخر يقرأه كترجمة مستعجلة.
القواعد الـ12
1. استخدم خطوطًا عربية أولية، لا أي خط "يدعم العربية"
الجميع يلجأ إلى Cairo، لكنها ليست مثالية لكل سياق. للنصوص الطويلة IBM Plex Arabic وNoto Sans Arabic أكثر راحة. للأدبي Amiri أو Noto Naskh Arabic أطبَع. Changa ممتاز للواجهات الحديثة. Cairo للعناوين، لا للفقرات الطويلة.
2. اعكس التخطيط، لا النص فقط
RTL ليس خاصية نص بل خاصية تخطيط. التنقل، الأشرطة الجانبية، تسميات النماذج، الأيقونات، المؤشرات — كلها تنعكس. استخدم خصائص CSS المنطقية (margin-inline-start بدل margin-left). في Tailwind استخدم ms-4/me-4.
3. اعكس الأيقونات الاتجاهية فقط
الأسهم وأزرار الرجوع/التقدم تنعكس. لا تنعكس: سلة التسوق، التقويم، الشعارات، زرّ تشغيل الفيديو. القاعدة: اعكس ما يدل على اتجاه حركة، واترك ما يدل على أشياء.
4. استخدم الأرقام العربية-الهندية حيث تُتوقّع
- الأسعار: عادةً أرقام غربية (0-9) — المتسوّقون الخليجيون بارعون في الاثنين ويفضلون الأرقام الغربية.
- التواريخ (سياق هجري): العربية-الهندية أطبَع.
- أرقام الهاتف: غربية، لأنها تطابق لوحات المفاتيح.
5. محاذاة إلى اليمين افتراضيًا، مع استثناءات
النصوص والتسميات والأزرار — يمين. الجداول: أعمدة النص يمين، أعمدة الأرقام يمين (العربية والإنجليزية متفقتان). لا تمركز الفقرات الطويلة.
6. النماذج: التسميات فوق لا يسار
تسميات فوق الحقل أطبَع في العربية من انعكاسها إلى اليمين.
7. ارتفاع السطر أعلى للعربية
حروف العربية لها صواعد ونوازل قوية. استخدم 1.7–1.9 لـ[lang="ar"] بدل 1.4 للّاتينية.
8. المحتوى LTR داخل RTL يحتاج عزلاً Unicode
عناوين URL، الأسماء الإنجليزية، الكود، أرقام الهاتف بـ+ — جزر LTR داخل نص RTL. لفّها في <bdi> أو استخدم unicode-bidi: isolate.
9. التواريخ: أظهر الميلادي والهجري عند الحاجة
للجمهور السعودي — خصوصًا الحكومي والديني — إظهار التقويمين يحترم القارئ. ٢٤ أبريل ٢٠٢٦ (٦ ذو القعدة ١٤٤٧). للتجارة والـSaaS الميلادي وحده كافٍ.
10. تنسيق العملة يطابق التقاليد العربية
250 ريال أو 250 ر.س — الرمز بعد الرقم. تبنّى ما تستخدمه سلة وزد وأمازون.سا — النمط الذي يعرفه المستخدم.
11. الأزرار والCTA: ترجم المعنى لا الكلمات
"اضغط هنا" ترجمة حرفية تبدو غريبة. اكتب CTA عربيًا من الصفر: ابدأ الآن، تواصل معنا، احجز الآن.
12. اختبر مع مستخدمين عرب حقيقيين
الترجمة الآلية تحسّنت لكنها تنتج عبارات لا يستخدمها ناطق أصلي. قبل الإطلاق، اطلب من ناطق أصلي — الأفضل من دولة الخليج المستهدفة — قراءة كل صفحة.
ما نراه عند تدقيق المواقع العربية
| الموقع | جودة RTL | الطباعة | النماذج | المحتوى | الإجمالي |
|---|---|---|---|---|---|
ما نبنيه RTL من اليوم الأول، طباعة عربية أصيلة، أيقونات معكوسة، أرقام عربية-هندية حيث يناسب، نماذج مبنية يمينًا، محتوى بقلم كاتب خليجي. | أصيل | IBM Plex + Cairo | أصيل | أصيل | ★★★★★ |
WordPress مع إضافة عربية dir='rtl' مطبّق لكن القالب مكسور في مواضع. الأيقونات غير معكوسة غالبًا. المحتوى مترجَم آليًا. | على مستوى الإضافة | افتراضي | نص فقط | مترجَم | ★★ |
Shopify بقالب 'جاهز للعربية' القالب يعمل غالبًا لكن الدفع والبريد ينكسران. الطباعة متوسطة. | جزئي | افتراضي | مكسور في الدفع | مترجَم | ★★★ |
Wix / Squarespace بـRTL RTL سطحي فقط. طباعة ضعيفة، أيقونات غير معكوسة، نماذج رديئة. | سطحي | ضعيف | ضعيف | مترجَم | ★ |
الأخطاء الثلاثة الأسوأ
- نفس ارتفاع السطر للعربية والإنجليزية: الحروف العربية تبدو مكدّسة. الحل:
line-height: 1.8لـ[lang="ar"]. - اسم علامة إنجليزي يُعرض RTL داخل نص عربي: "Apple Pay" يصبح "yaP elppA". الحل:
<bdi>أوunicode-bidi: isolate. - محتوى عربي يقرأ كترجمة شعارات تسويق إنجليزية: "أطلق إمكاناتك" حرفيًا محرج. الحل: اكتب عربيًا أصيلاً.
قائمة التحقّق للمطوّرين
- [ ]
dirعلى<html>لا<body> - [ ] خصائص CSS منطقية (
margin-inline-start) - [ ]
font-familyمُسكَّن لـ[lang="ar"] - [ ]
line-heightأعلى للعربية - [ ] انعكاس الأيقونات بفئة (
.rtl-flip) للاتجاهية فقط - [ ]
<bdi>أوunicode-bidi: isolateللمحتوى المختلط - [ ] تسميات النماذج فوق الحقل
- [ ] تنسيق عملة مراجَع من ناطق أصلي
- [ ] إعادة بناء قوالب البريد والفواتير PDF بـRTL
في Next.js App Router راجع تحسين SEO متعدد اللغات.
أسئلة شائعة حول تصميم الويب العربي RTL
Cairo ممتاز للعناوين لكنه زخرفي للنصوص الطويلة. استخدم IBM Plex Arabic أو Noto Sans Arabic للمتن؛ Amiri للأدبي الطويل.
الخلاصة
الموقع العربي ليس ترجمة — بل تصميم موازٍ. نفس هندسة المعلومات، تخطيط مرآة، طباعة مختلفة، نبرة مختلفة، أعراف رقمية مختلفة. الفرق بين ارتداد سريع وتحويل ناجح.
إذا كنت تضيف العربية إلى موقع إنجليزي قائم، خصّص 25–35% من تكلفة التصميم والتطوير الأصلية للطبقة العربية.
