اليوميّات · الخطّ والاتّجاه

العربيّة والعبريّة على الويب، بلا تنازلات.

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

زمن القراءة
7
بقلم
غيد قواسمي
نُشر في
٢ أبريل ٢٠٢٦

١. dir موقف، لا علم

ضبط dir="rtl" على الجذر بداية لا نهاية. يجب فحص كلّ مكوّن — تنقّل، فتات الخبز، نموذج، جدول، تذييل — لاستخدام الخصائص المنطقيّة (margin-inline-start, padding-inline-end, inset-inline-start) بدل left/right. إن فاجأك الانعكاس، فالمصدر مكتوب بصورة صلبة؛ أعد كتابته منطقيّاً.

٢. اقرن خطّاً عربيّاً وعبريّاً حقيقيّين

لا تعتمد على الحروف العربيّة أو العبريّة الموجودة داخل عائلة لاتينيّة. اقرن عائلة عربيّة مخصّصة (Tajawal، IBM Plex Sans Arabic، RH Zak) وعائلة عبريّة مخصّصة (Heebo، Frank Ruhl Libre) مع عائلة العرض والنصّ اللاتينيّة. وافِق بين ارتفاع الحرف والوزن ليُقرَأ النصّ نفسه بثلاث لغات باللون نفسه.

اختبر بنصّ حقيقيّ لا لوريم إيبسوم. إيقاع العربيّة والعبريّة يُشكّل طول السطر بصورة مختلفة — مقاس مريح بالإنكليزيّة قد يبدو متناثراً بالعربيّة.

٣. الأرقام والترقيم والمحاذاة

قرّر مرّة وطبّق في كلّ مكان: أرقام عربيّة شرقيّة أم غربيّة؟ استخدم نظام الأرقام نفسه عبر فهارس التنقّل والتواريخ والتعليقات. تنعكس علامات الترقيم تلقائيّاً مع dir="rtl" — الاقتباسات والأقواس والفواصل — لكن تأكّد أنّ خطوطك تحمل الأشكال المناسبة للنمطين.

تُحاذى العناوين إلى بداية السطر. في الاتّجاه من اليمين إلى اليسار، البداية هي الحافّة اليمنى. لا تفرض المحاذاة باليمين بصنف؛ ثِق بـ text-align: start.

٤. اعكس التخطيط، لا المعنى

الأيقونات التي تشير إلى الأمام (الأسهم، فتات الخبز، أزرار الكاروسيل) يجب أن تنعكس في RTL. الأيقونات التي تحمل معنى (الشعارات، القلوب، أزرار التشغيل) لا تنعكس. الاختبار: هل سيتعرّف قارئ أصليّ على الأيقونة لو عكستها؟ إن نعم، فاعكس؛ وإلّا، فاتركها.

ثمن إتقان هذا غير مرئيّ — لا يلاحظ القرّاء RTL الجيّد لأنّه يُقرَأ فحسب. يلاحظون السيّئ في السطر الأوّل.