طلب منا عميل «إضافة العربية» إلى منصة بُنيت على مدى عامين. وكان العرض 40% من كلفة البناء الأصلية. ظنّ أننا انتهازيون، ولم نكن — فقد كان في التطبيق مئة موضع اتُّخذ فيها قرار عابر بالإنجليزية ووجب حلّه.
التطوير العربي أولاً ليس ترجمة نصوص، بل مجموعة خيارات معمارية رخيصة في اليوم الأول ومكلفة في اليوم الأربعمئة.
التطوير العربي أولاً: قرارات الأسبوع الأول
ترتيب قاعدة البيانات
اختر ترتيب Unicode يفرز العربية بشكل منطقي، واضبطه قبل كتابة أول صف. فتغيير الترتيب على جدول إنتاجي ممتلئ يعني توقفاً وترحيلاً وفترة يختلف فيها الفرز بصمت بين البيئات.
اختبره بأسماء عربية حقيقية، بما فيها أدوات التعريف. فالقائمة التي يُفرز فيها كل اسم يبدأ بـال تحت حرف واحد مشكلة ترتيب، ويلاحظها المستخدمون فوراً.
خزّن النص كنص لا كتنسيق
لا تخزّن أبداً سلاسل منسّقة مسبقاً تفترض اتجاهاً — لا دمج مثل "الاسم: " + القيمة سيُقرأ معكوساً بالعربية. خزّن الأجزاء، ونسّق عند العرض، ودع القالب يتولى الاتجاه.
احسم سياسة الأرقام مرة واحدة
أرقام هندية (٠١٢٣) أم غربية (0123)؟ في الأردن، الأرقام الغربية هي المعيار في التجارة والمالية، بينما تظهر الهندية في السياقات الرسمية والدينية. اختر واحدة لواجهتك وطبّقها في كل مكان، وانتبه إلى أن خلطهما في جدول يجعل الأعمدة غير قابلة للمسح البصري.
وأياً كان اختيارك، خزّن القيمة كرقم. فالتنسيق شأن عرض، والرقم المخزَّن كنص سيُفرز أبجدياً يوماً ما وينتج هراءً.
التخطيط: خصائص منطقية لا فيزيائية
هذا التغيير وحده يزيل معظم عمل الاتجاه من اليمين لليسار. فـCSS الحديث يملك خصائص واعية بالاتجاه تنقلب تلقائياً.
margin-inline-startبدلmargin-leftpadding-inline-endبدلpadding-rightinset-inline-startبدلlefttext-align: startبدلtext-align: left
التطوير العربي أولاً يعني كتابة هذه من البداية، فيصبح التخطيط العربي شبه مجاني. أما تداركها في ورقة أنماط ناضجة فسيكلّفك أسابيع، لأن كل تجاوز يجب إيجاده والتحقق منه.
وتحذير تعلّمناه بالطريقة الصعبة: inset-inline-start: 50% مع translateX(-50%) لا يوسّط في الاتجاه العربي. فهو يقابل right، فيخرج العنصر عن الشاشة. وللتوسيط الحقيقي، استخدم left: 50% الفيزيائية أو حاوية مرنة.
تمدد النص حقيقي
العربية أقصر غالباً من الإنجليزية بالمحارف لكنها أطول ارتفاعاً عند العرض، بسبب التشكيل والنزلات. والعناصر المقاسة لتلائم النص الإنجليزي تماماً ستقتطع.
اختبر كل مكوّن بأطول نص عربي واقعي لديك، لا بنص نائب. والأزرار ورؤوس الجداول وعناصر التنقل هي أول ما ينكسر.
الخطوط، ومشكلة اختلاط الحروف
الخطوط اللاتينية بلا رموز عربية، ومعظم الخطوط العربية ضعيفة في اللاتينية. والمجموعة التي تسمّي واحداً فقط تترك الحرف الآخر يسقط إلى ما يوفّره نظام التشغيل — ولهذا تبدو كثير من التطبيقات ثنائية اللغة غير متسقة.
سمِّ الخطين في مجموعة واحدة، بالترتيب الذي تريد اختيارهما به:
font-family: "Inter", "Cairo", system-ui, sans-serif;يأخذ المتصفح كل رمز من أول خط يملكه، فتُعرض اللاتينية بـInter والعربية بـCairo دون أي تبديل لغة. وحمّل الأوزان نفسها للخطين، وإلا وَلَّد المتصفح الوزن المفقود وظهر التفاوت.
ما لا يمكن تداركه بثمن معقول فعلاً
- ترتيب قاعدة البيانات — يتطلب ترحيلاً وتوقفاً.
- سلاسل العرض المدموجة — متناثرة في الشيفرة، وكل منها يحتاج مراجعة فردية.
- CSS الفيزيائي المكتوب يدوياً — مئات الخصائص، ولكل منها احتمال انحدار.
- المكوّنات ثابتة العرض — تغيير في نظام التصميم لا في الشيفرة.
- الصور المضمّنة نصاً إنجليزياً — كل أصل يحتاج إعادة صنع.
الحد الأدنى العملي من التطوير العربي أولاً
إن كنت لا تبني اللغتين الآن لكنك تتوقع ذلك لاحقاً، فافعل هذه الخمسة على أي حال. فهي لا تكلّف شيئاً تقريباً اليوم.
- اضبط ترتيب Unicode على قاعدة البيانات.
- استخدم خصائص CSS المنطقية في كل مكان.
- ضع كل نص يراه المستخدم في ملف ترجمة، ولو بلغة واحدة.
- لا تدمج نص العرض في الشيفرة أبداً.
- أبقِ النص خارج الصور.
هذا ربما يومان من الانضباط أثناء البناء. وهو الفارق بين إضافة العربية لاحقاً بكلفة ترجمة، وإضافتها بكلفة 40% من المشروع الأصلي.
