الاتجاه من اليمين لليسار كما ينبغي
عكس التخطيط هو العشرة بالمئة السهلة. أما التسعون بالمئة التي تقرّر إن كانت الواجهة العربية تبدو أصيلة فهي معرفة أين يكون الانعكاس خطأً.
مدّة القراءة · ٨ دقائق
الانعكاس هو الوضع الافتراضي، لا الحل
اضبط `dir="rtl"` وسيقوم المتصفّح الحديث بالكثير مجانًا. النص يسير من اليمين لليسار، والعناصر الكتليّة تحاذي اليمين، وإن كانت أنماطك تستخدم الخصائص المنطقية — `margin-inline-start` بدل `margin-left`، و`padding-inline-end` بدل `padding-right` — فمعظم مسافاتك ستتبع دون أن تلمسها.
هذه هي العشرة بالمئة، وتستحق الأخذ. الخصائص المنطقية لا تكلّف شيئًا عند التبنّي وتزيل فئة كاملة من الأخطاء المستقبلية. وإن كانت ورقة أنماطك ما زالت تستخدم الخصائص الفيزيائية في كل مكان، فتحويلها أعلى عمل قيمةً تقدر تبدأ به.
أما التسعون بالمئة الباقية فسلسلة أحكام فردية على أشياء لا ينبغي أن تنعكس، ولا يوجد إعداد يضبطها.
ما الذي يجب ألّا ينعكس
الأرقام تسير من اليسار لليمين حتى داخل النص العربي. وكذلك الأسماء اللاتينية وعناوين البريد والروابط والشفرة ومسارات الملفات وأرقام الهواتف. وخوارزمية Unicode ثنائية الاتجاه تعالج معظم هذا وحدها بشكل صحيح، ثم تتعثّر عند الحواف: رقم هاتف ينتهي بقوس، أو سلسلة مختلطة مثل «iPhone 15 ‑ متوفر»، أو فقرة عربية تبدأ بكلمة لاتينية. هذه تحتاج عزلًا — `unicode-bidi: isolate` على العنصر السطري، أو علامتي `‎`/`‏` — لا أملًا.
والأيقونات تنقسم إلى مجموعتين والفرق مهم. الأيقونة التي تحمل اتجاهًا ينبغي أن تنعكس: أسهم الرجوع والتقدّم، والتراجع والإعادة، والإزاحة، وسهم الصفّ القابل للفتح، وسهم الإرسال. أما التي تصوّر شيئًا واقعيًا فلا: الساعة، والعدسة المكبّرة، والقفل، والطابعة، وفنجان القهوة. فعكس الساعة ينتج ساعة تدور عكسيًا، والقارئ يلاحظ ذلك دون أن يعرف تفسيره.
وأدوات التشغيل لا تنعكس. زر التشغيل والتقديم السريع وشريط التقدّم في مشغّل الفيديو أعراف موروثة من الشريط الفيزيائي، وتشير إلى الجهة نفسها في كل اللغات. وعكسها تصحيح زائد كلاسيكي.
المواضع التي تنكسر فعلًا
أشرطة التقدّم والخطوات وكل ما له اتجاه سير يحتاج قرارًا. شريط التقدّم بالعربية ينبغي أن يمتلئ من اليمين، والنموذج متعدّد الخطوات ينبغي أن يتقدّم نحو اليسار. ومعظم مكتبات العناصر تخطئ في الشريط لأن الامتلاء مُنفَّذ كعرض من الحافة اليسرى لا من بداية السطر.
والعروض الدوّارة وإيماءات السحب هي حيث تكتشف الفرق المشكلة في الاختبار لا في التصميم. فإن كان السحب لليسار يتقدّم بالإنجليزية، فالمكافئ العربي هو السحب لليمين — وإن كانت مكتبة العرض الدوّار تثبّت اتجاه الفهرس في شفرتها فستجد نفسك تصارعها.
والظلال والزخارف غير المتماثلة أهدأ. البطاقة التي لها ظلّ مزاح نحو أسفل اليمين وحدّ لوني على اليسار تبدو مقصودة بالإنجليزية ومكسورة قليلًا بالعربية. وهل للضوء اتجاه في نظام تصميمك سؤال حقيقي يستحق إجابة مرة واحدة.
والطباعة هي ما تستهين به الفرق أكثر من غيره. العربية ليس فيها حروف كبيرة، فكل حيلة تدرّج مبنية على الأحرف الكبيرة — العناوين الفرعية الصغيرة، وأزرار السمول كابس، والتنقّل متباعد الحروف — ببساطة ليس لها مكافئ عربي ويجب استبدالها بالوزن أو الحجم أو اللون. كما أن الحروف العربية تجلس في السطر بشكل مختلف: الحجم النقطي نفسه يُقرأ أصغر ويحتاج ارتفاع سطر أكبر. ومجموعة الخطوط التي تبدو متوازنة بالإنجليزية تحتاج عادةً ضبطًا منفصلًا لوجهها العربي.
قائمة تستحق المرور عليها قبل الإطلاق
- هل تستخدم ورقة الأنماط خصائص منطقية، أم فيزيائية ستحتاج تجاوزًا معكوسًا؟
- هل تبقى الأرقام والأسماء اللاتينية وأرقام الهواتف من اليسار لليمين داخل الأسطر العربية، حتى في بداية الفقرة ونهايتها؟
- هل صُنّفت كل أيقونة: اتجاهية أم تصويرية؟
- هل تمتلئ أشرطة التقدّم من بداية السطر، وهل تتقدّم الخطوات في اتجاه القراءة؟
- هل يتبع السحب وأسهم لوحة المفاتيح اتجاه القراءة؟
- هل ضُبط الوجه العربي حجمًا وتباعدًا بشكل منفصل بدل أن يرث قيم اللاتيني؟
- هل استخدم البناءَ فعلًا شخصٌ يقرأ العربية، على الهاتف؟
أسئلة متكرّرة
ألا تكفي إضافة CSS تعكس التخطيط؟
ستتولّى الانعكاس، وهو الجزء الذي يفعله المتصفّح عنك أصلًا في معظمه. لكنها لا تستطيع تمييز الأيقونة الاتجاهية من التصويرية، ولن تصلح الطباعة، وهي حيث تبدو الواجهات العربية خاطئة أكثر من أي شيء آخر.
هل تكفي قاعدة شفرة واحدة أم نحتاج اثنتين؟
واحدة، في كل الحالات تقريبًا. فالقاعدتان تتباعدان، والعربية دائمًا هي التي تتأخّر. ما تحتاجه قاعدة واحدة يُعبَّر عن تخطيطها بمصطلحات منطقية وتُضبط طباعتها العربية عن قصد.
كم تكلّف الإضافة اللاحقة مقارنةً بالبدء ثنائي اللغة؟
أكثر بكثير، لأنها تمسّ التخطيط والأيقونات وإدخال النص والصياغة والنص دفعةً واحدة بدل أن تكون قرارًا يُتخذ لكل عنصر أثناء البناء. ولهذا نحدّد نطاق ثنائية اللغة في أسبوع الاستراتيجية بدل معاملتها كمرحلة لاحقة.
أدلّة ذات صلة
تشتغل على شيء من هذا؟
احكِ لنا ما الذي تبنيه. نردّ بصفحة واحدة فيها النطاق والمدّة ورقم تقدر تخطّط عليه.
أرسل لنا ملخّصًا