تخطي إلى المحتوى
Design

تصميم موقع عربي وإنجليزي: قائمة تحقق عملية للاتجاه من اليمين

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

بقلم Mahmoud Zoubi19 أكتوبر 2026

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

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

1. اعكس التصميم كله، لا النص وحده

الاتجاه من اليمين إلى اليسار هو اتجاه الصفحة كلها، وليس مجرد محاذاة للنص. القارئ العربي يبدأ من أعلى اليمين، لذلك يجب أن تنعكس الصفحة كما في المرآة:

  • ينتقل الشعار والقائمة الرئيسية إلى اليمين، والعناصر الثانوية إلى اليسار.
  • تتبادل الأعمدة الجانبية وصفوف الصورة والنص وشبكات البطاقات أماكنها.
  • تسير مسارات التنقل ومؤشرات الخطوات والعروض المتحركة من اليمين إلى اليسار.
  • يشير زر «التالي» إلى اليسار، وزر «رجوع» إلى اليمين.

للمطوّر: اضبط اتجاه الصفحة العربية على rtl في عنصر html، واستخدم المسافات المنطقية (البداية والنهاية بدل اليسار واليمين) كي ينعكس التصميم تلقائيًا.

أي الأيقونات تنعكس وأيها تبقى

اعكس الأيقونات التي تدل على اتجاه الحركة داخل المحتوى:

  • أسهم التالي والسابق والرجوع و«اقرأ المزيد»
  • الأسهم الجانبية الصغيرة في القوائم والعروض المتحركة
  • أشرطة التقدم وخطوط المراحل
  • الأيقونات التي تمثل أسطر النص، مثل أيقونة القائمة أو محاذاة الفقرة

واترك هذه كما هي تمامًا:

  • التشغيل والإيقاف المؤقت والتقديم السريع، فأزرار الوسائط تتبع زمن المقطع لا اتجاه القراءة.
  • شعارك وأي علامة تجارية
  • علامة الصح والساعة وأيقونات الأشياء الحقيقية مثل الهاتف أو الظرف
  • الصور، فالصورة المعكوسة تقلب أي كتابة فيها

2. اختر خطًا عربيًا حقيقيًا

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

اختر خطًا عربيًا:

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

من الخيارات المجانية التي تستحق التجربة: IBM Plex Sans Arabic وTajawal وNoto Sans Arabic.

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

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

3. احمِ الأرقام والأسعار وأرقام الهواتف

الأرقام هي أكثر مكان ينكسر فيه النص المختلط الاتجاه.

  • اختر شكلًا واحدًا للأرقام. نحن نستخدم الأرقام الغربية (1، 2، 3) في النص العربي، لأنها تطابق ما يكتبه الناس في النماذج وما يرونه على الإيصالات. الأرقام المشرقية خيار سليم أيضًا، أما الخلط بين الشكلين في الموقع نفسه فليس كذلك.
  • احمِ الأسعار. سعر مثل ₪1,500 داخل جملة عربية قد يتحرك من مكانه، فتقع علامة الشيكل في الجهة الخطأ أو ينفصل الرقم عن الكلمات حوله.
  • احمِ أرقام الهواتف. الرقم الدولي قد يظهر بشكل «972+» وتنقلب مجموعات أرقامه.

للمطوّر: ضع الأسعار وأرقام الهواتف وأي جزء يُقرأ من اليسار إلى اليمين داخل عنصر معزول باتجاه ltr (عبر CSS unicode-bidi: isolate)، واجعل أرقام الهواتف روابط تتصل عند الضغط عليها.

4. اكتب العربية، لا تترجمها

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

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

5. اضبط النماذج والتواريخ والأوقات

  • العناوين والحقول ورسائل الخطأ محاذاة إلى اليمين ومكتوبة بالعربية.
  • حقول البريد الإلكتروني والموقع والهاتف تبقى من اليسار إلى اليمين حتى في الصفحة العربية، كي يتصرف المؤشر والنص المكتوب كما هو متوقع.
  • التحقق من الحقول يقبل الحروف العربية في الأسماء. النموذج الذي يرفض اسمًا عربيًا صرف للتو عميلًا محتملًا.
  • اكتب اسم الشهر بالحروف، مثل «15 أكتوبر 2026»، كي لا يتساءل أحد هل 10/12 تعني أكتوبر أم ديسمبر.
  • اختر أسماء الأشهر التي يستخدمها قراؤك. في بلاد الشام يقول كثيرون «تشرين الأول» ويقول آخرون «أكتوبر». اختر واحدًا والتزم به في كل مكان.
  • اذكر المنطقة الزمنية بجانب أي موعد حجز أو فعالية، وتأكد أن منتقي التاريخ يسير من اليمين إلى اليسار في العربية.

6. أعطِ كل لغة عنوانها الخاص

إذا تشاركت العربية والإنجليزية رابطًا واحدًا وتبدلت اللغة عبر ملف تعريف ارتباط أو سكربت، فغالبًا لن يفهرس Google إلا إحداهما. يجب أن يكون لكل لغة عنوانها، مثل /ar/services و/en/services.

للمطوّر:

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

7. دع الزائر يبدّل اللغة في الصفحة نفسها

  • ضع مبدّل اللغة في رأس الصفحة، حيث يبحث عنه الناس.
  • اكتب اسم كل لغة بحروفها: «العربية» و«English». وتجنّب الأعلام، فالأعلام تمثل دولًا لا لغات.
  • يجب أن يبقى الزائر في الصفحة نفسها عند التبديل. من يقرأ /en/services ينتقل إلى /ar/services، لا إلى الصفحة الرئيسية.

8. اختبر على هواتف حقيقية

الأرجح أن زوارك يقرؤون على الهاتف، فهناك يجب أن يكون الفحص الأخير. على هاتف iPhone وهاتف Android واحد على الأقل:

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

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

كيف نبني المواقع ثنائية اللغة

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

تخطط لموقع ثنائي اللغة أو تريد إصلاح موقعك الحالي؟ احجز مكالمة مجانية لمدة 30 دقيقة ونراجع القائمة معًا.

كل المقالات
جاهزون متى كنت جاهزًا

ابدأ بمكالمة مجانية لمدة 30 دقيقة.

أخبرنا أين أنت وما الذي تحتاجه. تحصل على نصيحة صريحة في المكالمة وعرض سعر ثابت خلال 48 ساعة.