انتقل إلى المحتوى

بالتفصيل

تعريب تطبيق SaaS من اليوم الأول: تسع لغات واتجاه من اليمين إلى اليسار

نُشر في · قراءة في 3 دقائق· Anton Shubin

باختصار

  • التطبيق ولوحة الإدارة والموقع والرسائل البريدية في Seed متاحة بتسع لغات، منها العربية، وفي كل لغة نحو 3,900 رسالة.
  • يُفشل اختبارٌ البناءَ إذا نقصت رسالة أو تقادمت أو فقدت متغيّرًا. ويرفض اختبار آخر أي هامش «يسار» أو «يمين» لن ينقلب في العربية.
  • اللغة إعداد خاص بكل شخص يُحفظ على الخادم، ومستقل عن تنسيق التاريخ والمنطقة الزمنية ونظام الساعة.
  • إضافة لغة عاشرة تعني سطرًا في قائمة، وملفًا لكل فهرس، وبضعة أسطر للتحميل.

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

هذا المقال لمؤسسي المنتجات والمطوّرين الذين يعرفون أن «سنترجم لاحقًا» تعني في الغالب «لن نترجم أبدًا». سأريك أين تعيش النصوص، وما الذي تكتشفه الاختبارات، وكم يكلّف دعم الاتجاه من اليمين إلى اليسار فعلًا.

لماذا من اليوم الأول؟

لأن الترجمة لاحقًا تعني المرور على كل شاشة مرتين. عليك أن تجد كل نص مكتوب داخل الشيفرة، وكل تاريخ مركّب يدويًا، وكل margin-left، في شيفرة امتلأت بالميزات. أما إذا ترجمت من البداية، فكل شاشة جديدة تُترجم أثناء بنائها، والكلفة دقائق لا مشروع كامل يتجنّبه الجميع.

وهناك سبب أبسط: معظم الناس على الإنترنت لا يقرؤون بالإنجليزية أولًا. والمنتج الذي يخاطبهم بلغتهم يبدأ متقدّمًا.

أين تعيش النصوص؟

كل كلمة تظهر في شاشات Seed موجودة في فهرس: ملف TypeScript لكل قسم ولغة، مثل i18n/app/ar.ts و i18n/site/ja.ts. وهناك خمسة أقسام: التطبيق، ولوحة الإدارة، والموقع، والرسائل البريدية، ورسائل أخطاء الواجهة البرمجية. الإنجليزية هي المصدر، وبقية الملفات تحمل المفاتيح نفسها.

القسم عدد الرسائل لكل لغة
التطبيق 1,503
لوحة الإدارة 1,487
الموقع 682
رموز الأخطاء 164
الرسائل البريدية 79

أي نحو 3,900 رسالة في كل لغة، بحسب عدّ أُجري في 2 نوفمبر 2026. وتجلب مكوّنات preact-components فهارسها الخاصة فوق ذلك.

يحمّل التطبيق لغتك وحدها، في ملف صغير مستقل: من يقرأ بالعربية لا ينزّل اليابانية.

ما الذي يمنع الترجمة من التقادم؟

اختبار واحد، i18n/i18n.test.ts. يفشل عندما:

  • تنقص رسالة في أي لغة، أو تبقى رسالة لم تعد موجودة في الإنجليزية؛
  • يتغيّر النص الإنجليزي بعد ترجمته (لكل لغة ملف قفل يسجّل النسخة الإنجليزية التي تُرجمت منها)؛
  • تفقد الترجمة متغيّرًا مثل {count} أو وسمًا يحيط برابط، أو تكتبه خطأً؛
  • تنقص صيغة جمع تحتاجها اللغة. وللعربية ست صيغ: صفر، ومفرد، ومثنى، وقلة، وكثرة، وغير ذلك؛
  • لم تعد أي شيفرة تستخدم رسالة إنجليزية.

لذا لن يصل إلى المستخدمين زر مكتوب عليه Notes.create، ولا شاشة عربية متأخرة أسبوعًا عن الإنجليزية.

ما الكلفة الحقيقية للكتابة من اليمين إلى اليسار؟

أقل مما يخشاه الناس، بشرط ألا يقول التصميم «يسار» أو «يمين» أبدًا. تستخدم أنماط Seed جوانب منطقية: «البداية» و«النهاية». في صفحة من اليسار إلى اليمين تكون البداية على اليسار، وفي العربية على اليمين. والمتصفح هو من يقلب الاتجاه.

ويجعل اختبارٌ ذلك قاعدة لا أمنية: يمرّ tests/spacing.test.ts على كل التطبيقات ويفشل عند أي صنف تباعد يسمّي جانبًا فعليًا. وتضبط الصفحة السمة dir حسب اللغة: الموقع على الخادم، والتطبيق لحظة تبديل اللغة.

وتفصيلان آخران يؤلمان متأخرًا إن تجاهلتهما:

  • الأسماء داخل الجمل. جملة مثل «دعتك Anna إلى مجموعة Team» تخلط اتجاهين، وقد يسحب الاسم اللاتيني علامات الترقيم إلى الجهة الخطأ. لذلك توضع قيم المستخدمين داخل <bdi>، فيبقى اتجاهها معزولًا عن النص المحيط.
  • التواريخ والأرقام والأوقات. يمرّ كل تاريخ في كل شاشة عبر منسّق واحد. ويفشل اختبار آخر، tests/no-direct-date-format.test.ts، عند أي استدعاء مباشر لـ toLocaleString().

اللغة والتنسيق والساعة ثلاثة إعدادات

تُحفظ اللغة على الخادم مع الملف الشخصي، فتبقى نفسها على كل أجهزتك وفي كل رسالة بريدية. أما تنسيق المنطقة والمنطقة الزمنية ونظام الساعة (12 أو 24) فهي إعدادات منفصلة. قارئ عربي يعيش في برلين يريد الواجهة بالعربية والوقت بتوقيت برلين. ومهندس ألماني يعمل في دبي يريد الواجهة بالألمانية والوقت بتوقيت دبي. ربط هذه الإعدادات معًا طريق مضمون لعرض تاريخ خاطئ لنصف المستخدمين.

في الموقع تظهر اللغة في العنوان (/ar/pricing)، دون أي تحويل تلقائي حسب المتصفح أو عنوان IP، وكل صفحة تخبر محركات البحث بالنسخ اللغوية المتاحة منها.

من يترجم؟

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

إضافة لغة عاشرة

سطر في قائمة اللغات، وملف فهرس لكل قسم، وبضعة أسطر في كل تطبيق لتحميلها. بعدها تسرد الاختبارات كل رسالة تنقص اللغة الجديدة، وتبقى حمراء حتى تكتمل.

جرّبه بنفسك

افتح النسخة التجريبية، وادخل إلى ملفك الشخصي واختر العربية. ستنقلب الواجهة كلها لتُقرأ من اليمين. هذا المقال متاح أيضًا باللغات التسع كلها، والشيفرة مفتوحة بترخيص MIT.

تلقَّ المقال التالي عبر البريد

رسالة قصيرة حين يُنشر مقال جديد أو يُطلق شيء جديد. تؤكد اشتراكك مرة واحدة عبر البريد، وتلغيه بنقرة واحدة.

كل المقالات