עיצוב עבור כל שוק

תכונה מוכנה לשימוש ברחבי העולם כשהיא פועלת בכל שפה ועומדת בכל הכללים של הקורא מבלי צורך בשינויים בקוד. דף זה עוקב אחר הנחיות מיקרוסופט. רשימת בדיקה לבינלאומיות: כל פרק מפרט את ההבדלים בין השווקים, כיצד לכתוב קוד שיפעל נכון, ואת בדיקת גלובליזציה קוד שמסמן את ההרגל שגוי.

ברוב המקרים הדבר מסתכם בכלל אחד: לאפשר לנתוני המקום של הקורא להכריע. ממשקי ה- Intl API, מנגנון העיבוד של המסגרת והנתונים שמאחוריהם תרבות מכירה את הכללים של כל שוק; קוד שמקבע כללים של שוק אחד אינו מתאים.

טקסט ומשפטים#

כל טקסט שהמשתמש קורא נמצא בקטלוג המקור, תחת מפתח מסוים, ומוצג באמצעות פונקציית התרגום של הפרויקט. זה כולל תוויות, כותרות, כפתורים, הודעות, שגיאות המוצגות למשתמש, תוויות תחליף, 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.
• יש לשקף סמלים המציגים כיוון, כגון חצים וקווים משוננים, אך לא סמלים אחרים כמו שעון או כפתור ניגון.
• מספרים, קודים, כתובות אינטרנט ושמות בכתב לטיני נשארים מימין לשמאל בתוך טקסט בכתיבה מימין לשמאל. יש לבודד טקסט מאנשים או נתונים ב- <bdi> כדי שלא ישנה את סדר הסביבה שלו.

מקום לצמיחה#

תרגומים לרוב ארוכים יותר מאנגלית, ותוויות קצרות מתארכות יותר: המילה הגרמנית "OK" יכולה להפוך למילה שלמה, ותווית בת עשרה תווים יכולה להכפיל את אורכה. יש להקצות מקום לטקסט: לאפשר לו לעבור שורה, לאפשר לכפתורים ולכרטיסיות להתרחב עם התוויות שלהם, ולהימנע מרוחב וגובה קבועים עבור טקסט. אל תקצרו תוויות שהמשתמש זקוק להן כדי לבצע פעולה. קודים: clipped_text.

ה- תרגום צוללת מאריך כל מחרוזת בכמויות האלה, כך שתוכלו לראות את הבעיה לפני שהמתרגם ניגש אליה:

סינית, יפנית וקוריאנית בדרך כלל קצרות יותר אך דורשות שורות גבוהות יותר.

רשימת בדיקה לכל שינוי#

• הטקסט שאנשים קוראים מגיע מהקטלוג, וכל משפט הוא הודעה אחת.
• מספרים, תאריכים, שעות, כסף, יחידות ורשימות עוברים דרך הלוקליזציה של הקורא.
• מיון ומיפוי אותיות משתמשים בלוקליזציה של הקורא.
• שמות, כתובות, קודי דואר ומספרי טלפון מקבלים את כל השווקים.
• Enter אינו שולח טופס כל עוד המילה נמצאת בתהליך הרכישה.
• הפריסה משתמשת בתכונות לוגיות ומקצה מקום לטקסט ארוך יותר.

קשורים#

• בדיקת גלובליזציה
• לוקליזציה צוללת
• מוכנות עולמית ותרבות
• גלובליזציה