تصميم يناسب كل سوق

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

ينحصر الأمر في الغالب في قاعدة واحدة: دع إعدادات المنطقة الخاصة بالقارئ تحدد ذلك. متصفح الويب Intl واجهات برمجة التطبيقات، ومحرك التنسيق الخاص بإطار العمل، والبيانات الأساسية الثقافة تعرف اتفاقيات كل سوق؛ أما الكود الذي يُدخل إعدادات سوق معين بشكل ثابت فهو غير مناسب.

النصوص والجمل#

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

الجملة الواحدة تمثل رسالة واحدة. يختلف ترتيب الكلمات بين اللغات، لذا لا يمكن ترجمة الجملة المكونة من أجزاء. مرّر القيم كمكانات محجوزة واستخدم أشكال الجمع. أكواد: concatenated_text.

// Not world-ready: English word order and English plurals
'You have ' + count + ' new ' + (count === 1 ? 'message' : 'messages');

// World-ready: one ICU message
t('inbox.new', { count });
// "inbox.new": "{count, plural, one {You have # new message} other {You have # new messages}}"

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

الأرقام#

تكتب الأسواق نفس الرقم بطرق مختلفة: 1,234.5 في الولايات المتحدة، و1.234,5 في ألمانيا، و1 234,5 في السويد وفرنسا، وبأرقام مختلفة في بعض الأسواق العربية. قم بتنسيقه وفقًا لإعدادات المنطقة الخاصة بالقارئ. أكواد: locale_number.

new Intl.NumberFormat(locale).format(1234.5);
new Intl.NumberFormat(locale, { style: 'percent' }).format(0.25);

اقرأ الرقم الذي أدخله المستخدم بنفس إعدادات المنطقة، أو استخدم حقل إدخال رقمي يقوم المتصفح بتوحيد قيمته. parseFloat('1,5') هو 1، وليس واحد ونصف. أكواد: locale_parsing.

التواريخ والأوقات والمناطق الزمنية#

يختلف ترتيب التواريخ وفواصلها وأسماء الشهور ونظام الساعة (12 أو 24 ساعة) والتقويم نفسه. قم بتنسيقه وفقًا لإعدادات المنطقة الخاصة بالقارئ، وليس بنمط ثابت مثل MM/dd/yyyy. أكواد: locale_date.

new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }).format(when);

• خزّن اللحظات الزمنية بتنسيق UTC، على هيئة تنسيق ISO 8601 مع إزاحة زمنية، وقم بتنسيقها وفقًا لمنطقة القارئ الزمنية. احسب مفهوم «اليوم» وحدوده الزمنية في تلك المنطقة، وليس في منطقة الخادم.
• تبدأ الأسابيع في أيام مختلفة: يوم الأحد في الولايات المتحدة، ويوم الاثنين في معظم دول أوروبا، ويوم السبت في بعض مناطق الشرق الأوسط. تختلف عطلات نهاية الأسبوع أيضًا. استخدم إعدادات المنطقة لتحديد ذلك (new Intl.Locale(locale).getWeekInfo() عند توفرها، أو بيانات المنطقة الخاصة بمكتبة التواريخ لديك)، وليس قيمة ثابتة. أكواد: calendar_names.
• أسماء أيام الأسبوع والشهور تأتي من إعدادات المنطقة (Intl.DateTimeFormat(locale, { weekday: 'long' }))， وليس من قائمة موجودة في الكود. أكواد: calendar_names.
• التقاويم. تستخدم المملكة العربية السعودية وإسرائيل واليابان التقويم الميلادي إلى جانب تقويم أم القرى والعبري والياباني؛ بينما تستخدم تايلاند وإيران تقويم البوذيين والفارسي بشكل افتراضي. تُظهر الثقافة التقويم الذي تستخدمه كل سوق.

العملات#

قم بتنسيق المبالغ وفقًا للعملة وإعدادات المنطقة الخاصة بالقارئ، وليس بوضع رمز العملة بجانب الرقم. نفس المبلغ يُقرأ $1,234.50، 1.234,50 $ أو US$1,234.50 حسب القارئ، وتشارك العديد من الأسواق في نفس الرمز. أكواد: hardcoded_currency.

new Intl.NumberFormat(locale, { style: 'currency', currency }).format(1234.5);

العملة قرار تجاري وليس قرار تنسيق: تغيير إعدادات المنطقة الخاصة بالقارئ لا يجب أن يؤدي إلى تحويل الأسعار. تسجل الثقافة العملة التي يدفع بها كل سوق.

الفرز والمقارنة وحالة الأحرف#

تفرز كل لغة نصوصها بطريقتها الخاصة: تضع اللغة السويدية حروف å وä وö بعد حرف z، وتفرز اللغة الألمانية حرف ä مع حرف a، وتفرز اللغة الصينية حسب نظام بينيين أو عدد الضربات. قم بفرز النصوص التي يقرأها المستخدم وفقًا لإعدادات المنطقة الخاصة به. أكواد: ordinal_sort.

names.sort(new Intl.Collator(locale).compare);

تعتمد خرائط حالة الأحرف على اللغة أيضًا: في اللغة التركية، الحرف الكبير من حرف i هو İ. استخدم toLocaleUpperCase(locale) للنصوص التي يقرأها المستخدم. أكواد: case_mapping.

القوائم#

«آنا وبن وتشن» تُكتب بطرق مختلفة في كل لغة. قم بربط عناصر القائمة وفقًا لإعدادات المنطقة. أكواد: joined_list.

new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }).format(names);

الأسماء والعناوين والرموز البريدية وأرقام الهواتف#

• الأسماء. تكتب العديد من الأسواق اسم العائلة أولاً، ولدى الكثير من الأشخاص اسم واحد أو أكثر من اثنين. اقبل اسم الشخص في حقل واحد إلا إذا كانت السوق تحتاج إلى تقسيمه. قبول جميع أنواع الكتابة: Åsa وJosé و王 وМария كلها أسماء. أكواد: latin_only_input.
• العناوين. تختلف الحقول وترتيبها واسم كل منها: ولاية ورمز بريدي في الولايات المتحدة، ومحافظة في اليابان، ولا يوجد رمز بريدي في بعض الأسواق. تُظهر الثقافة عنوان كل سوق كما يكتبه مكتب البريد. لا تطلب حقولًا لا تستخدمها السوق.
• الرموز البريدية. احتفظ بها كنص وصِّلها وفقًا لكل دولة، أو لا تُصِلها أصلًا. نمط من خمس خانات يرفض معظم الدول في العالم. أكواد: postal_code_format.
• أرقام الهواتف. خزّنها بتنسيق E.164 (+46 8 123 456 78)، وقم بتنسيقها والتحقق من صحتها باستخدام مكتبة تعرف خطة الترقيم لكل دولة، مثل مكتبة libphonenumber. نمط مثل (555) 555-1234 ترفض كل الأرقام خارج أمريكا الشمالية. الرموز: phone_number_format.

الوحدات والورق#

يقيس معظم العالم المسافات بالكيلومترات، والكتل بالكيلوغرامات، ودرجات الحرارة بدرجة مئوية؛ بينما تستخدم الولايات المتحدة الأمريكية الأميال والأرطال ودرجات فهرنهايت؛ وتخلط المملكة المتحدة بين النظامين. يجب اختيار الوحدة حسب منطقة القارئ وتنسيقها وفقًا للإعدادات المحلية. الرموز: fixed_unit.

new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilometer' }).format(12);

يتبع الإخراج المطبوع وملفات PDF نوع الورق السائد في السوق: حجم Letter في أمريكا الشمالية، وحجم A4 في باقي أنحاء العالم. الرموز: paper_size.

طرق إدخال الخطوط#

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

onKeyDown={event => {
  if (event.key === 'Enter' && !event.nativeEvent.isComposing) submit();
}}

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

الاتجاه من اليمين إلى اليسار#

تُكتب اللغتان العربية والعبرية من اليمين إلى اليسار، وينعكس التخطيط بأكمله معهما: التنقل، والتنسيق، والرموز التي تشير إلى اتجاه معين، وترتيب الأعمدة.

• حدد dir="rtl" على العنصر الرئيسي لتلك اللغات، و lang لكل لغة.
• استخدم الخصائص المنطقية: margin-inline-start بدلاً من margin-left، padding-inline-end، inset-inline-start، text-align: start، float: inline-start، بالإضافة إلى الفئات المساعدة المنطقية في إطار عمل CSS الخاص بك (ms-4، pe-2، text-start). الرموز: physical_direction، unmirrored_layout.
• اعكس الرموز التي تظهر الاتجاه، مثل السهام والنقاط المائلة، ولكن ليس الرموز الأخرى، مثل ساعة أو زر تشغيل.
• تظل الأرقام والكود وعناوين URL وأسماء النصوص بالحروف اللاتينية من اليسار إلى اليمين داخل نص مكتوب من اليمين إلى اليسار. عزل النص عن الأشخاص أو البيانات في <bdi> حتى لا يعيد ترتيب ما حوله.

مساحة للنمو#

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

الـ الترجمة الوهمية تطيل كل سلسلة نصية بهذه المقادير، حتى تتمكن من رؤية المشكلة قبل أن يقوم المترجم بها:

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

قائمة تحقق لكل تغيير#

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

ذات صلة#

• فحص العولمة
• التوطين الوهمي
• الاستعداد العالمي والثقافة
• العولمة