التوطين · 9 دقائق قراءة · آخر تحديث 19 أغسطس 2026

لماذا يهم الدعم الكامل للعربية وRTL في مواقع الأعمال الإماراتية

لديك موقع بالفعل؟ احصل على تدقيق تقني مجاني:

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

كيف يبدو RTL المُرقَّع فعليًا

انعكاس شامل بـ direction: rtl يعكس كل شيء، بما في ذلك ما يجب ألا ينعكس أبدًا — أرقام الهواتف، وأسماء العلامات اللاتينية، وأمثلة الكود، والأرقام الغربية المضمّنة
نص عربي بخط لاتيني يصادف أنه يحتوي رموزًا عربية، بمقاس مضبوط على ارتفاع الحرف اللاتيني، فيبدو الخط العربي مضغوطًا
تخطيطات تتجاوز حدودها لأنها قيست على نصوص إنجليزية، والعربية تأتي بطول مختلف
نماذج وأدوات تاريخ وحقول عملة تبقى من اليسار إلى اليمين بينما انعكست الصفحة حولها

الخصائص المنطقية تؤدي معظم العمل

أكثر تغيير مردودًا هو التوقف عن كتابة CSS اتجاهي أصلًا. تصبح margin-left هي margin-inline-start، وتصبح padding-right هي padding-inline-end، ويصبح left: 0 هو inset-inline-start: 0، ويصبح text-align: left هو text-align: start. يحسم المتصفح معنى «البداية» وفق اتجاه العنصر نفسه، فيُعرض المكوّن الواحد بشكل صحيح في شجرتي اللغتين — دون ترميز مكرر، ودون ملف أنماط معكوس ينحرف عن أصله أول مرة يعدّل فيها أحدهم نسخة واحدة فقط.

CSS

/* اتجاهي — يحتاج نسخة معكوسة للعربية */
.card {
  margin-left: 24px;
  border-left: 2px solid;
  text-align: left;
}

/* منطقي — قاعدة واحدة، صحيحة في الاتجاهين */
.card {
  margin-inline-start: 24px;
  border-inline-start: 2px solid;
  text-align: start;
}

الأجزاء التي يجب ألا تنعكس

بعض المحتوى محايد اتجاهيًا في المصدر لكنه ليس كذلك في المعنى. رقم هاتف أو بريد إلكتروني أو اسم منتج لاتيني أو سعر بأرقام غربية داخل جملة عربية يأخذ اتجاهه من النص المحيط، وهكذا ينتهي ‎+971 4 123 4567 معروضًا وعلامة الجمع في الجهة الخطأ. الحل جزيرة صريحة لا قاعدة عامة، لأن الفقرة المحيطة يجب أن تبقى من اليمين إلى اليسار.

HTML

<!-- داخل فقرة RTL -->
<span dir="ltr">+971 4 123 4567</span>

خاصيتا lang وdir يجب أن تكونا حقيقيتين

مبدّل لغة يستبدل النصوص في المتصفح يترك كل صفحة عربية مخدومة بـ lang="en". تقرأ محركات البحث هذه الخاصية لتحديد السوق الذي تنتمي إليه الصفحة، وتختار قارئات الشاشة النطق والصوت منها، فالقيمة الخاطئة مشكلة في تحسين محركات البحث وفي إمكانية الوصول معًا. وفي App Router لدى Next.js لهذا أثر معماري يغفل عنه كثيرون: الجذر الواحد لا يمكنه إصدار أكثر من عنصر html واحد، فاختلاف lang وdir فعليًا بين اللغتين يعني جذرين متوازيين في مجموعتَي مسارات — لا خاصية تُمرَّر عبر تخطيط مشترك واحد.

بنية المسارات

app/
  (en)/layout.tsx   ->  <html lang="en" dir="ltr">
  (ar)/layout.tsx   ->  <html lang="ar" dir="rtl">

الخطوط والأرقام قراران منفصلان

معظم الخطوط اللاتينية إما تخلو من العربية تمامًا أو تأتي ببديل ضعيف، فاختر عائلة عربية عن قصد — Cairo وIBM Plex Sans Arabic وNoto Kufi Arabic نقاط انطلاق جيدة — واختبرها بالمقاسات التي تستخدمها فعلًا، لأن العربية تحتاج مساحة رأسية أكبر من اللاتينية عند المقاس الاسمي نفسه. ثم احسم مسألة الأرقام عمدًا: الأرقام الهندية والأرقام الغربية كلتاهما عربية صحيحة، لكن سياقات الأعمال في الإمارات تستخدم الأرقام الغربية في الأسعار وأرقام الهواتف والتواريخ حتى في محتوى عربي بالكامل. والخلط بينهما بلا اتساق عبر الموقع علامة على أن أحدًا لم يتخذ القرار.

العربية أقصر بالأحرف، لا بالمعنى

وهنا فخ لا يظهر إلا بالقياس. عند ترجمة أوصاف الميتا في هذا الموقع، حملت العربية المعنى نفسه بعدد أحرف أقل بنحو 15 إلى 20 بالمئة من الإنجليزية. النسخ الإنجليزية استقرت مرتاحة داخل حد الـ160 حرفًا، أما العربية فجاءت قصيرة إلى حد أن أداة تدقيق SEO صنّفتها «أقصر من اللازم» فاضطررنا إلى إطالتها. في أي موضع تفرض فيه ميزانية أحرف — وسوم الميتا، وأعمدة قواعد البيانات، وملخصات البطاقات التي تُقتطع — يكون الحد المضبوط للغة واحدة خاطئًا للأخرى. ضع ميزانية لكل لغة، وإلا أطلقت إحداهما مكسورة.

العطل الذي لا يحذّرك منه أحد: توليد الصور بلا خوارزمية اتجاه

هذا القسم وحده يستحق المقال، لأن الموقع يبدو مثاليًا بينما يقع الضرر خارجه. Satori — المحرّك خلف ImageResponse في Next.js وخلف عدد لا بأس به من خدمات صور OG المستضافة — لا ينفّذ خوارزمية الاتجاه ثنائي الاتجاه في يونيكود. فهو يشكّل الحروف العربية بشكل صحيح ويصلها كما ينبغي، ثم يضع الكلمات كاملةً من اليسار إلى اليمين. والنتيجة بطاقة اجتماعية عربية تُقرأ بالمقلوب في كل رابط يُشارَك على واتساب أو لينكدإن أو إكس، بينما الصفحة التي تشير إليها سليمة تمامًا. وضبط direction: rtl على الحاوية لا يغيّر شيئًا، لأن الخاصية غير منفّذة في محرك التخطيط ذاك أصلًا.

الحل العملي هو عكس ترتيب الكلمات قبل التوليد، فيلغي ذلك الوضع من اليسار إلى اليمين ويبقي النص المصدري في الكود عربيًا مقروءًا. ومهما فعلت، افتح الصورة المولَّدة وانظر إليها: لا مجموعة اختبارات تلتقط هذا، ولا أي قدر من فحص الصفحة نفسها.

JavaScript

// يلغي وضع الكلمات من اليسار إلى اليمين في Satori
const rtlWords = (line) => line.split(' ').reverse().join(' ')

ما الذي تتحقق منه قبل الإطلاق

كل رابط عربي يعيد lang="ar" وdir="rtl" في HTML المخدوم، لا بعد الترطيب — تحقق عبر مصدر الصفحة أو curl، لا عبر فاحص أدوات المطوّر الذي يعرض الحالة بعد تنفيذ جافاسكربت
أرقام الهواتف والبُرد الإلكترونية والأسماء اللاتينية داخل النص العربي تحمل dir="ltr" صريحة
البطاقة الاجتماعية العربية تُعرض بالترتيب الصحيح — افتح ملف الصورة فعليًا بدل الاكتفاء بأنها تولّدت
النماذج تقبل الإدخال العربي وترسله، بما في ذلك الأسماء المشكولة، ورسالة التأكيد مقروءة
الصفحات العربية موجودة في خريطة الموقع بعنقود hreflang مطابق تمامًا لما في الترميز — تتجاهل جوجل التعليقات التوضيحية عندما تتعارض بين الاثنين
الأرقام متسقة عبر الموقع كله، وأن يكون هذا الاتساق قرارًا لا صدفة موروثة

لست متأكدًا إن كانت طبقتك العربية تحتاج ترقيعًا أم إعادة بناء؟ التدقيق التقني المجاني يغطي هذا تحديدًا — أرسل الرابط وسنخبرك أيّهما.

تطوير المواقع →