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

RTL ليست مجرد direction: rtl

الخطأ الأول الذي يرتكبه كل مطور: تطبيق direction: rtl على حاوية والانتهاء. يُصلح محاذاة النص. يكسر تقريبًا كل شيء آخر.

الهوامش والمساحات الداخلية لا تنقلب تلقائيًا. margin-left يبقى على اليسار. إذا كنت تقصد “بداية اتجاه القراءة”، استخدم margin-inline-start. هذا صياغة الخصائص المنطقية، وهو التجريد الصحيح. وهو مدعوم في كل متصفح حديث.

/* الطريقة الخاطئة */
.card { padding-left: 1.5rem; }

/* الصحيح — يعمل في LTR و RTL */
.card { padding-inline-start: 1.5rem; }

اتجاه Flexbox لا ينعكس تلقائيًا. flex-direction: row في RTL لا يزال يعرض العناصر من اليسار إلى اليمين ما لم يتم ضبط direction: rtl على العنصر. هذا يفاجئ المطورين في المكونات المتداخلة.

الموضع المطلق لا يراعي الاتجاه. left: 0 يعني دائمًا الحافة المادية اليسرى، وليس البداية المنطقية. استخدم inset-inline-start للتخطيط الذي يحتاج إلى احترام الاتجاه.

الطباعة العربية تخصص مستقل بذاته

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

Cairo (خطوط Google) هو خطنا العربي الافتراضي عبر جميع المنتجات. إنه grotesque نظيف وحديث مع مجموعة أحرف عربية كاملة، وtinting جيد، وأحجام ملفات معقولة. لديه مجموعة أحرف لاتينية مرافقة، مما يساعد إذا كنت تمزج اللغات.

تجنب letter-spacing مع العربية. تباعد الأحرف يكسر الحروف المتصلة. ما يجعل النص اللاتيني يبدو أنيقًا ومهويًا سيجعل النص العربي يبدو مكسورًا وخاطئًا. إذا كنت تطبق التباعد لأسباب تصميمية، خصصه للنص اللاتيني تحديدًا.

ارتفاع السطر للعربية مختلف. الحروف العربية تجلس على الخط الأساسي وتحته بشكل مختلف عن اللاتينية. ما يبدو مريحًا لنص النص اللاتيني (1.5×) غالبًا يبدو ضيقًا للعربية. نستخدم 1.7-1.8 لنص النص العربي.

توجيه i18n في Astro

اخترنا Astro لهذا الموقع تحديدًا بسبب مخرجاته الثابتة ومرونته في التوجيه. إعدادنا:

  • بادئة /en/ للمسارات الإنجليزية
  • بادئة /ar/ للمسارات العربية
  • lang وdir مضبوطان على <html> لكل صفحة
  • تخطيط مشترك يقبل lang كـ prop ويستنتج سلوك RTL
---
const { lang } = Astro.props;
const isRTL = lang === 'ar';
---
<html lang={lang} dir={isRTL ? 'rtl' : 'ltr'}>

بدائل hreflang ضرورية لـ SEO:

<link rel="alternate" hreflang="en" href="https://alsheikhmedia.com/en/..." />
<link rel="alternate" hreflang="ar" href="https://alsheikhmedia.com/ar/..." />
<link rel="alternate" hreflang="x-default" href="https://alsheikhmedia.com/" />

إغفال هذه يعني أن Google يُفهرس كلتا الصفحتين بشكل مستقل وقد لا يعرض الإصدار الصحيح للمستخدمين الناطقين بالعربية.

قرار اللغة الافتراضية

مسارنا الجذر (/) يُعيد التوجيه إلى /en/ عبر ملف index.astro واحد يستخدم Astro.redirect. اخترنا الإنجليزية كافتراضي بناءً على تحليلاتنا التي تظهر حوالي 60% من حركة المرور المبكرة من مصطلحات البحث الإنجليزية، لكن هذا قرار تحتاج اتخاذه بناءً على جمهورك.

بديل آخر هو الكشف القائم على الموقع الجغرافي عبر Cloudflare Workers: فحص CF-IPCountry وإعادة التوجيه إلى /ar/ لدول الخليج. هذا أنيق لكنه يضيف زمن وصول للزوار الأوائل ويخلق تعقيدات للروابط المشتركة والزواحف. لم ننفذه بعد.

اختبار RTL بدون فريق QA ناطق بالعربية

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

  1. اختبار RTL الإجباري في Chrome DevTools. أضف مؤقتًا html { direction: rtl !important; } في DevTools وتصفح كل صفحة. ستلاحظ فورًا الأيقونات المكسورة، والقوائم المنسدلة غير المحاذاة، وإعادة التدفق في التخطيط.

  2. فحص التعكيس. التخطيط RTL المنفذ بشكل صحيح هو تقريبًا صورة معكوسة لتخطيط LTR. إذا كانت بعض العناصر لا تنعكس، فعلى الأرجح يجب أن تفعل.

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

ما كنا سنفعله بشكل مختلف

استخدام خصائص CSS المنطقية من اليوم الأول. لا تنتظر حتى تكون RTL “في النطاق” لاستخدام inline-start بدلًا من left. إنها نفس كمية الكتابة، وإعادة هيكلة 300 قاعدة CSS لاحقًا أمر مروّع.

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

أخيرًا: اختبر على أجهزة حقيقية في المنطقة. مستخدمو الإمارات يميلون بشكل كبير للموبايل، مع مزيج من iOS و Android. إذا كنت تختبر فقط على MacBook مكتبي في Safari، فأنت تفوّت تجربة جزء كبير من جمهورك الفعلية.

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

AstroRTLثنائي اللغةالإماراتتطوير الويبi18n