التباعد بين الأحرف: الخطأ الذي يقطع الكلمات العربية

يكتب الخط العربي متصلاً: كل حرف يلتحم بجاره وفق موضعه في الكلمة. خاصية letter-spacing في CSS تضيف فراغاً بعد كل حرف، وبما أنها لا تعرف شكل الاتصال، ينتج نص مقطّع يُقرأ حرفاً حرفاً. يظهر هذا الخطأ غالباً في العناوين عندما تُعاد أنماط التصاميم اللاتينية كما هي على النسخة العربية.

الإصلاح بسيط: اجعل letter-spacing يساوي normal أو صفراً على النصوص العربية، واستخدم word-spacing إن أردت توسعة العناوين دون كسر الاتصال. أبقِ التباعد بين الأحرف حصراً على المحتوى اللاتيني داخل الصفحة. في سمو رقمي نزيل هذا التباعد من العناوين العربية بوصفه خطوة قياسية في كل مشروع.

  • letter-spacing: normal أو letter-spacing: 0 على العناصر العربية.
  • word-spacing لتباعد أكبر بين الكلمات دون كسر اتصال الحروف.
  • أبقِ قيم letter-spacing الموجبة للمحتوى اللاتيني فقط.

اتجاه النص المختلط: لماذا تنقلب الأرقام والعلامات اللاتينية

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

الضبط يبدأ من الجذر: أضف dir=rtl وlang=ar إلى وسم html في كل صفحة. داخل النص، اعزل كل عبارة لاتينية بعنصر يحمل dir=ltr أو بعنصر bdi، واستعمل dir=auto للحقول التي يكتبها الزبون. تنصح W3C بالخصائص المنطقية مثل margin-inline-start بدل القيم الثابتة يمين ويسار، ولا تعتمد على direction في CSS وحدها لأن الأنماط قد تُعطَّل أو تُفقَد عند النسخ.

  • dir=rtl على وسم html في كل صفحة عربية، حتى صفحات الخطأ.
  • عزل العبارات اللاتينية بـ span dir=ltr أو bdi.
  • dir=auto في حقول الإدخال التي تستقبل أسماء الزبائن.
  • خصائص منطقية (inline-start وinline-end) بدل right وleft الثابتة.

قفزة التخطيط عند تبديل الخط: المقاييس وsize-adjust بلغة بسيطة

عند تحميل خط ويب عربي مع font-display: swap يعرض المتصفح أولاً خطاً احتياطياً ثم يستبدله بخط الويب. إن اختلفت مقاييس الخطين — عرض الحروف وارتفاعها — يتحرك النص وتقفز الصفحة، ويظهر ذلك جلياً على الهاتف حيث تُقاس هذه القفزات.

المعالجة في ثلاث قطع بسيطة: size-adjust عدسة تكبير وتصغير تُطبَّق على الخط الاحتياطي كي تشغل حروفه المساحة نفسها التي سيشغلها خط الويب؛ وascent-override وdescent-override وline-gap-override تثبّت الارتفاعات العمودية فتبقى الأسطر ثابتة مهما تبدل الخط. نطبّق في سمو رقمي خطاً احتياطياً مضبوط المقاييس مع تعديل بنسبة مئوية بسيطة، ونقيس النتيجة على عرض شاشة هاتف فعلي لا على شاشة سطح المكتب.

  • أعلن خطاً احتياطياً محلياً داخل @font-face بدل ترك النظام يختار.
  • اضبط size-adjust على نسبة تجعل الاحتياطي بمقاس خط الويب.
  • ثبّت ascent وdescent وline-gap بقيم override للخط الاحتياطي.
  • قِس القفزة بعرض هاتف فعلي، لأن قياسات سطح المكتب تخفي التحولات.

ارتفاع السطر: العربية تحتاج مساحة أكبر من اللاتينية

تحمل العربية علامات تشكيل فوق الحروف وتحتها، وحروفاً هابطة أعمق وحروفاً صاعدة أعلى. ارتفاع السطر الموروث من تصاميم لاتينية — قيمة قريبة من 1.2 أو 1.4 — يقطع التشكيل أو يلصق الأسطر ببعضها ويصعّب القراءة.

استعمل قيمة بلا وحدة مثل 1.7 على النص الطويل فتتضاعف حسب حجم الخط في كل سياق، وارفعها أكثر في العناوين المشكولة. تفقّد أيضاً أن خاصية overflow بقيمة hidden لا تقصّ الحروف الهابطة أو علامات التشكيل، وأن بطاقات الخدمات لا تفرض ارتفاعاً ثابتاً على نص عربي متشكل.

  • line-height بقيمة بلا وحدة على النص العربي.
  • قيمة أعلى للعناوين المشكولة وللعناوين الكبيرة.
  • تجنب الارتفاعات الثابتة بالبكسل في البطاقات والأزرار.

الأيقونات المعكوسة ونصوص SVG: ما يُعكس وما لا يُعكس

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

الحل العملي: طبّق transform: scaleX(-1) على الأيقونات الاتجاهية داخل المحدد [dir=rtl] فقط، أو صدّر نسختين من الرسم. وفي SVG، أضف direction=rtl إلى وسم svg، ولتغيير الاتجاه داخل عنصر tspan أضف unicode-bidi بقيمة embed، كما توثق W3C في درسها الخاص بإنشاء صفحات SVG عربية.

  • اعكس الاتجاهية فقط: أسهم التنقل، الرجوع، المشاركة، التراجع.
  • لا تعكس المحايدة: الساعة، البحث، الكاميرا، الموقع.
  • scaleX(-1) تحت [dir=rtl] بدل تعديل ملفات الأيقونات يدوياً.
  • direction=rtl في وسم svg وunicode-bidi: embed في tspan للنصوص العربية داخل الرسومات.

قائمة التحقق قبل إطلاق الموقع العربي

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

  • وسم html يحمل lang=ar وdir=rtl في كل صفحة، حتى صفحات الخطأ.
  • لا يوجد تباعد موجب بين الأحرف على أي نص عربي.
  • كل رقم هاتف أو اسم لاتيني أو رابط داخل جملة عربية معزول باتجاه صحيح.
  • الخط الاحتياطي مضبوط المقاييس والقفزة مقاسة على عرض هاتف فعلي.
  • ارتفاع السطر على النص العربي لا يقل عن 1.7 بلا وحدة، ولا قصّ للتشكيل.
  • الأيقونات الاتجاهية معكوسة تحت RTL والمحايدة سليمة.
  • نصوص SVG تحمل direction=rtl.
  • تجربة كاملة مع تعطيل خط الويب مؤقتاً لرؤية حالة الاحتياطي.