ما الذي ينكسر فعلاً عند بناء موقع بالعربية

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

لماذا ينكسر تخطيطي عند التبديل إلى العربية؟

لأن direction: rtl يعكس تدفق النص فقط، ومعظم التخطيط ليس تدفق نص. هو يقلب بشكل صحيح ترتيب قراءة المحتوى السطري والمحاذاة الافتراضية للكتل. ولا يفعل شيئاً البتة لعنصر موضوع بـ left: 5px، أو صورة مقصوصة بـ object-position، أو إطار مفتاحي يزيح بنسبة سالبة، أو أيقونة مرسومة تشير يميناً. كل واحد من هذه يحتفظ باتجاهه الفيزيائي بينما ينعكس كل ما حوله، فتنتهي الصفحة متناقضة داخلياً لا مكسورة ظاهرياً. ولهذا تنجو هذه العلل من المراجعة: لقطة الشاشة تبدو سليمة، ولا يلاحظ أحد أن زر التبديل يقف تحت الخيار الخاطئ إلا من يقرأ العربية.

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

لماذا تظهر أرقامي معكوسة بالعربية؟

خوارزمية Unicode ثنائية الاتجاه تعيد ترتيبها، وهي تفعل تماماً ما صُمّمت له. في فقرة تجري من اليمين إلى اليسار، تكون علامة الزائد أو النسبة اللاحقة محرفاً محايداً، فتحسم الخوارزمية موضعه من الاتجاه المحيط لا من ترتيب كتابتك. فتظهر ‎100+‎ على هيئة ‎+100‎، و‎50%‎ على هيئة ‎%50‎. الأرقام نفسها تبقى بترتيبها الصحيح؛ الرمز الملحق وحده هو الذي يتحرك. والعلاج أن تخبر الخوارزمية أن الرقم جزيرة صغيرة قائمة بذاتها، عبر direction: ltr و unicode-bidi: isolate على العنصر الحاوي له. وأضف إليهما font-variant-numeric: tabular-nums إذا كانت القيمة تتصاعد، وإلا اهتزت الأرقام مع تغير عرضها.

هل أعكس الأيقونات أيضاً؟

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

لماذا ينزلق الشريط المتحرك خارج الشاشة بالعربية؟

لأن الإطار المفتاحي يحركه في اتجاه ثابت بينما صار التخطيط يبدأ من الحافة المقابلة. شريط الشعارات المتحرك يتحرك عادةً إلى translate3d(-50%): يبدأ المسار من الحافة اليسرى ويسير يساراً، ونصف مكرر يبقي الحلقة سلسة. اقلب المستند فيصير المسار يبدأ من الحافة اليمنى، لكن الحركة ما زالت تجري يساراً، فيبتعد عن إطار العرض ويترك خلفه فجوة تتسع. والنسب المئوية داخل transform تُحسب على صندوق العنصر نفسه لا على اتجاه الكتابة، فلا يصل إليها شيء من الانقلاب البتة. تحتاج إطاراً مفتاحياً ثانياً ينتهي عند ‎+50‎ بالمئة، وقاعدة تختاره في حالة اليمين إلى اليسار وحدها.

لماذا يخرج الشخص من كادر صورتي بالعربية؟

لأن object-position يحرك نافذة القص لا الشخص، والاثنان يسيران في اتجاهين متعاكسين. وهذه المسألة مخالفة للحدس بما يكفي لتُقال صراحة: كي تُدخل شخصاً يقف يمين المركز أكثر داخل الكادر، ترفع قيمة X، فتتحرك النافذة يميناً وتحمل الشخص من ثمّ يساراً. والتخطيط المعكوس يريد عادةً القيمة المعاكسة لتلك التي نجحت من اليسار إلى اليمين. ولأن صورة شخصية مزاحة قليلاً تبقى مقروءة كصورة شخصية، فهذا هو العطل الأرجح وصولاً إلى الإنتاج دون انتباه. افحص القص في كل صورة فيها شخص لا نقش، وافحصه في اللغة الفعلية بدل تخيّل الانقلاب.

ما خصائص CSS التي ينبغي استعمالها بدلاً من ذلك؟

استعمل الخصائص المنطقية، فهي تُحسم على اتجاه الكتابة لا على الشاشة. وبهذه الطريقة ينقلب معظم التخطيط بشكل صحيح دون أي CSS خاص بالاتجاه، وهذا هو الهدف الحقيقي: لا ورقة أنماط ثانية، بل ورقة واحدة لم تكن معتمدة على الاتجاه من الأساس. واحتفظ بقائمة بالخصائص التي لا مقابل منطقي لها، لأنها تحديداً ما سيحتاج تجاوزاً يدوياً لاحقاً. فـ transform و object-position و background-position وزوايا التدرجات وكل ما تقوده الإطارات المفتاحية يبقى فيزيائياً، ولهذا كانت كل مشكلة سبقت في هذا المقال من تلك الفئة لا من الهوامش والحشو.

• ‏margin-left تصبح margin-inline-start، و margin-right تصبح margin-inline-end.
• ‏padding-left و padding-right تصبحان padding-inline-start و padding-inline-end.
• ‏left و right تصبحان inset-inline-start و inset-inline-end.
• ‏text-align: left تصبح text-align: start، و float: right تصبح float: inline-end.
• لا مقابل منطقي لـ transform أو object-position أو background-position أو زوايا التدرجات. هذه تحتاج قاعدة صريحة لليمين إلى اليسار.

هل تحتاج العربية خطاً مختلفاً؟

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

كيف تختبر فعلياً بناءً من اليمين إلى اليسار؟

اقرأه باللغة الفعلية، على جهاز فعلي، مع شخص يقرأ اللغة. وكل ما دون ذلك فحص جزئي. فمقارنة لقطات الشاشة لن تلتقط شعاراً معكوساً، لأن الشعار المعكوس يبقى جسماً بهيئة شعار في حيّز بهيئة شعار. ومجموعة اختبارات الانحدار البصري لن تلتقط رقماً يظهر ‎+100‎، لأن تلك ثلاثة محارف صحيحة في ترتيب معقول. والأدوات الآلية تستحق مكانها في النصف الميكانيكي من العمل، بالتقاط الخصائص الفيزيائية المكتوبة يدوياً في ورقة الأنماط قبل نشرها. أما الأعطال التي تنجو إلى الإنتاج فدلالية، ومن يقرأ العربية يجدها في دقيقة. اجعل تلك المراجعة بنداً في خطة البناء لا معروفاً تطلبه بعد الانتهاء.