אם אתם קוראים את ההודעה, אתם משתמשים ברשת האינטרנט. ייתכן שאנשים שדוברים שפות שונות משתמשים בטפסים שלך, אנשים ממדינות שונות ואנשים מרקעים תרבותיים שונים. איך מכינים את הטופס ללוקליזציה ולהתאמה לשוק המקומי.
מוודאים שהטופס פועל בשפות שונות
בואו נראה איך לוודא שהטופס פועל בשפות שונות.
כדי לוודא שהאתר מוכן להתאמה לשוק המקומי, בשלב הראשון צריך להגדיר את מאפיין השפה lang
ברכיב <html>
.
המאפיין הזה מאפשר לקוראי מסך להפעיל את ההגייה הנכונה,
היא גם עוזרת לדפדפנים להציע תרגום של הדף אם השפה שהוגדרה אינה שפת ברירת המחדל של הדפדפן.
<html lang="en-us">
נניח שתרגמתם טופס לגרמנית.
איך אפשר לוודא שמנועי החיפוש והדפדפנים ידעו על הגרסה המתורגמת?
אפשר להוסיף רכיבי <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
בטפסים מסוימים. אחרי ש
צורות build, הקפידו לאפשר את כל התווים האפשריים - ואל תניח ששם כולל רק
של תווים לטיניים.
מאפשרים מגוון פורמטים של כתובות
המשרדים הראשיים של Google נמצאים בכתובת 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.
הכתובת הזו כוללת את מספר הבית, הרחוב, העיר, המדינה, המיקוד והמדינה. במדינה שלכם, פורמט הכתובת עשוי להיות שונה לגמרי. איך תוכלו להבטיח שכולם יוכלו להזין את הכתובת שלהם בטופס?
אחת הדרכים היא להשתמש בנתוני קלט כלליים.
מידע נוסף על דרכים אחרות לעבוד עם שדות כתובת בינלאומיים.
בדיקת ההבנה
בוחנים את הידע שלכם בנושא בינלאומי ולוקליזציה
איך מפעילים את ההגייה הנכונה לקוראי מסך?
hreflang
.language
.lang
.איך אפשר לשנות את מערכת הכתיבה באתר?
dir
.direction
.<link>
.משאבים
- מאמרים ומדריכים בנושא בינלאומי של W3C
- המדריך הכפולה של פרנק בנושא כתובות למשלוח דואר מספק קישורים שימושיים והנחיות מקיפות לפורמטים של כתובות ביותר מ-200 מדינות.
- DataHub.io הוא כלי להורדת קודי ושמות של מדינות.