التدويل والأقلمة

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

التأكّد من عمل النموذج بلغات مختلفة

لنرى كيف يمكنك التأكّد من أنّ النموذج يعمل بلغات مختلفة.

لكي يصبح أقلمة موقعك الإلكتروني جاهزًا، يجب أولاً تحديد سمة اللغة lang في العنصر <html>. تتيح هذه السمة لبرامج قراءة الشاشة استدعاء اللفظ الصحيح، ومساعدة المتصفحات في تقديم ترجمة للصفحة إذا لم تكن اللغة المحددة هي لغة المتصفح التلقائية.

<html lang="en-us">

مزيد من المعلومات حول السمة lang

لنفترض أنك ترجمت نموذجًا إلى الألمانية. كيف يمكنك التأكّد من أنّ محرّكات البحث والمتصفّحات تعرف النسخة المترجَمة؟ يمكنك إضافة عناصر <link> في <head> على موقعك الإلكتروني تصف الإصدارات البديلة.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

مساعدة المستخدمين الذين يتحدثون لغة أخرى على استخدام نموذجك

لا يمكنك ترجمة النموذج إلى كل اللغات، ولكن يمكنك التأكد من أن أدوات الترجمة يمكنها ترجمتها لك.

لضمان ترجمة كل النص في النموذج باستخدام أدوات الترجمة، تأكّد من تحديد كل النص بلغة HTML ورؤيته. تعمل بعض الأدوات أيضًا مع المحتوى المحدّد في JavaScript، ولكن لتحسين التوافق، حاوِل تضمين أكبر قدر ممكن من النص في HTML.

التأكّد من أنّ نموذجك يعمل مع أنظمة الكتابة المختلفة

تستخدم اللغات المختلفة أنظمة كتابة ومجموعات أحرف مختلفة. تمت كتابة بعض النصوص البرمجية من اليسار إلى اليمين، والبعض الآخر من اليمين إلى اليسار.

جعل التباعد مستقلاً عن أنظمة الكتابة

للتأكد من أن نموذجك يعمل مع أنظمة الكتابة المختلفة، يمكنك استخدام الخصائص المنطقية في CSS.

ويبلغ سُمك الحد 1px من جميع الجوانب، ما عدا على الجانب الأيسر حيث يكون الحد 4px سُمكًا. يمكنك الآن تعديل CodePen وتغيير نظام الكتابة من اليمين إلى اليسار من خلال إضافة dir="rtl" إلى العنصر <main>.

الحد السميك الآن على الجانب الأيمن. وهذا لأننا عرّفنا الحدود باستخدام خاصية منطقية.

input {
  border-inline-start-width: 4px;
}

اطّلِع على مزيد من المعلومات عن الخصائص المنطقية.

التأكّد من أنّ نموذجك يمكنه التعامل مع تنسيقات الأسماء المختلفة

لنفترض أن لديك نموذجًا يجب على المستخدم ملء اسمه. كيف يمكنك إضافة الحقل إلى النموذج؟

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

إدخال الأسماء بسرعة وسهولة — وللتأكد من إمكانية إدخال الجميع لأسمائهم، أيًا كان التنسيق — استخدم حقلاً واحدًا للأسماء حيثما أمكن ذلك.

تعرَّف على مزيد من المعلومات عن الأسماء الشخصية.

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

السماح بمجموعة متنوعة من تنسيقات العناوين

يَجْرِي شَرِكَةْ Google فِي الْمَرْكَزِ التَّالِي 1600 Amphitheatre Parkway، Mountain View، CA 94043، United States.

ويشمل هذا العنوان رقم الشارع والشارع والمدينة والولاية والرمز البريدي والبلد. في بلدك، قد يكون تنسيق العنوان مختلفًا تمامًا. كيف يمكنك التأكد من أنه يمكن للجميع إدخال عنوانهم في نموذجك؟

إحدى الطرق هي استخدام المدخلات العامة.

تعرَّف على مزيد من المعلومات حول الطرق الأخرى للتعامل مع حقول العناوين الدولية.

التحقّق من استيعابك

اختبر معلوماتك حول التدويل والأقلمة

كيف تستدعي اللفظ الصحيح لقارئات الشاشة؟

باستخدام السمة lang
🎉
باستخدام السمة hreflang
يُرجى اختيار إجابة أخرى.
إضافة وصف مع اللغة المستخدمة.
يُرجى اختيار إجابة أخرى.
باستخدام السمة language
يُرجى اختيار إجابة أخرى.

كيف يمكنك تغيير نظام الكتابة على موقعك الإلكتروني؟

باستخدام السمة direction
يُرجى اختيار إجابة أخرى.
باستخدام السمة dir
🎉
استخدام خصائص CSS المنطقية.
يُرجى اختيار إجابة أخرى.
استخدام العنصر <link>
يُرجى اختيار إجابة أخرى.

المراجِع