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

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

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

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

الخطوة الأولى لتسهيل أقلمة موقعك الإلكتروني هي تحديد سمة اللغة 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>.
يُرجى إعادة المحاولة.

الموارد