הרשת העולמית זמינה לכל אחד בעולם - היא נמצאת שם בשם! המשמעות היא שהאתר שלכם יכול להיות זמין לכל מי שיש לו גישה לאינטרנט, לא משנה איפה הם נמצאים, באיזה מכשיר הם משתמשים או באילו שפות הם מדברים.
המטרה של עיצוב רספונסיבי היא להפוך את התוכן שלכם לזמין לכולם. יישום אותה פילוסופיה על שפות אנושיות הוא הכוח המניע מאחורי הבינלאומיות - הכנת התוכן והעיצובים שלכם לקהל בינלאומי.
תכונות לוגיות
אנגלית נכתבת משמאל לימין ומלמעלה למטה, אבל לא כל השפות נכתבות כך. בשפות מסוימות, כמו ערבית ועברית, הטקסט נכתב מימין לשמאל, ובחלק מהגופנים היפניים נכתבים בפורמט אנכי ולא אופקי. כדי להתאים למצבי הכתיבה האלה, הושגו מאפיינים לוגיים ב-CSS.
אם אתם כותבים CSS, ייתכן שהשתמשתם במילות מפתח בכיוון מסוים כמו "left" , "right" , "top" ו-"bottom". מילות מפתח אלו מתייחסות לפריסה הפיזית של המכשיר של המשתמש.
מצד שני, מאפיינים לוגיים מתייחסים לקצוות של תיבה בהקשר של זרימת התוכן. אם מצב הכתיבה משתנה, CSS שנכתב עם מאפיינים לוגיים יתעדכן בהתאם. זה לא המקרה עם מאפיינים כיווניים.
בעוד שהמאפיין הכיווני margin-left מתייחס תמיד לשוליים השמאליים של תיבת תוכן,
המאפיין הלוגי margin-inline-start מתייחס לשוליים השמאליים של תיבת תוכן בשפה שנכתבת משמאל לימין,
ולשוליים שמימין לתיבת התוכן בשפה שנכתבת מימין לשמאל.
כדאי להימנע ממאפייני כיווניות כדי שהעיצובים יתאימו למצבי כתיבה שונים. במקום זאת, אפשר להשתמש במאפיינים לוגיים.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
כשיש ל-CSS ערך כיווני ספציפי כמו left או right,
יש מאפיין לוגי תואם. מה שהיה פעם margin-left, ועכשיו יש לנו גם margin-inline-start.
בשפה כמו אנגלית, שבה הטקסט עובר משמאל לימין,
inline-start תואם ל-"left" ו-inline-end תואם ל-"right".
בדומה לכך, בשפה כמו אנגלית, שבה הטקסט נכתב מלמעלה למטה,
block-start תואם ל "למעלה" ו-block-end תואם ל "תחתון".
אם אתם משתמשים במאפיינים לוגיים ב-CSS, תוכלו להשתמש באותו גיליון סגנונות לתרגומים של הדפים שלכם. גם אם הדפים שלכם מתורגמים לשפות שנכתבות מימין לשמאל או מלמטה למעלה, העיצוב יותאם בהתאם. אין צורך ליצור עיצובים נפרדים לכל שפה. אם משתמשים במאפיינים לוגיים, העיצוב מגיב לכל מצב כתיבה. פירוש הדבר הוא שהעיצוב שלכם יכול להגיע ליותר אנשים בלי שתצטרכו לבזבז זמן ביצירת עיצובים נפרדים לכל שפה.
כברירת מחדל, טכניקות מודרניות של פריסת CSS כמו רשת ו-flexbox משתמשות במאפיינים לוגיים.
אם תחשבו על inline-start ועל block-start במקום על left ו-top,
קל יותר להבין את הטכניקות המודרניות האלה.
עליך להשתמש בדפוס נפוץ, כמו סמל לצד טקסט או תווית לצד שדה טופס. במקום לחשוב "לתווית צריכים להיות שוליים בצד ימין", אפשר לחשוב ש "לתווית צריך להיות שוליים בסוף הציר המוטבע".
label {
margin-right: 0.5em;
}
label {
margin-inline-end: 0.5em;
}
אם הדף מתורגם לשפה מימין לשמאל, אין צורך לעדכן את הסגנונות.
אפשר לחקות את ההשפעה של הצגת הדפים בשפה שנכתבת מימין לשמאל באמצעות המאפיין dir ברכיב html.
המשמעות של הערך ltr היא 'משמאל לימין'. המשמעות של ערך "rtl" היא "מימין לשמאל".
אם תרצו להתנסות בכל השינויים של הנחיות המסמך (ציר הבלוקים) ומצבי הכתיבה (הציר המוטבע), הנה הדגמה אינטראקטיבית.
זיהוי שפת הדף
כדאי לזהות את השפה של הדף באמצעות המאפיין lang ברכיב html.
<html lang="en">
הדוגמה הזו היא של דף באנגלית. תוכל להיות עוד יותר ספציפי. כך אתם מצהירים שדף מסוים כתוב באנגלית ארה"ב:
<html lang="en-us">
הצהרת שפת המסמך שימושית למנועי חיפוש. ההגדרה הזו שימושית גם לטכנולוגיות מסייעות כמו קוראי מסך ועוזרים קוליים. כשאתם מספקים מטא-נתונים של שפה, אתם עוזרים למכשירי סינתיסייזר כאלה לבטא את התוכן שלכם בצורה נכונה.
המאפיין lang יכול להופיע בכל רכיב HTML, ולא רק ב-html. אם החלפת שפה בדף האינטרנט, יש לציין זאת.
במקרה הזה, מילה אחת היא בגרמנית:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
זיהוי השפה של מסמך מקושר
יש מאפיין נוסף בשם hreflang שאפשר להשתמש בו בקישורים.
המאפיין hreflang מקבל את אותו סימון קוד שפה כמו המאפיין lang ומתאר את שפת המסמך המקושר.
אם יש תרגום זמין של כל הדף שלך בגרמנית, עליך ליצור אליו קישור כך:
<a href="/path/to/german/version" hreflang="de">German version</a>
אם משתמשים בטקסט בגרמנית כדי לתאר את הקישור לגרסה בגרמנית, צריך להשתמש גם ב-hreflang וגם ב-lang.
כאן, הטקסט "גרסת Deutsche" מסומן כשפה הגרמנית, וקישור היעד מסומן גם הוא בגרמנית:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
אפשר גם להשתמש במאפיין hreflang ברכיב link. הערך הזה מופיע בhead של המסמך:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
עם זאת, בניגוד למאפיין lang, שיכול להופיע בכל רכיב, ניתן להחיל את hreflang רק על רכיבי a ו-link.
לשלב בין העיצוב של המודעה לבינלאומיות
כשאתם מעצבים אתרים שיתורגמו לשפות אחרות ולמצבי כתיבה אחרים, כדאי להביא בחשבון את הגורמים הבאים:
- בשפות מסוימות, כמו גרמנית, יש מילים ארוכות. הממשק שלך צריך להתאים את עצמו למילים האלו, לכן הימנע מעיצוב עמודות צרות. אפשר גם להשתמש ב-CSS כדי להוסיף מקפים.
- חשוב לוודא שהערכים של
line-heightיכולים לכלול תווים כמו הטעמות וסימנים דיאקריטיים אחרים. ייתכן ששורות טקסט שנראות טוב באנגלית חופפות בשפה אחרת. - אם אתם משתמשים בגופן אינטרנט, כדאי לוודא שהוא כולל טווח תווים רחב מספיק כך שיכסה את השפות שאליהן אתם מתרגמים.
- אין ליצור תמונות שמכילות טקסט. אם תבחרו לעשות זאת, תצטרכו ליצור תמונות נפרדות לכל שפה. במקום זאת, יש להפריד בין הטקסט לתמונה ולהשתמש ב-CSS כדי ליצור שכבת-על של הטקסט בתמונה.
לחשוב באופן בינלאומי
מאפיינים כמו lang ו-hreflang הופכים את ה-HTML למשמעותי יותר לבינלאומי.
כמו כן, מאפיינים לוגיים משפרים את ההתאמה של שירות ה-CSS.
אם אתם רגילים לחשוב במונחים של top, bottom, left וגם right,
ייתכן שתתקשו להתחיל לחשוב על block start, על block end, על inline start ועל inline end במקום זאת.
אבל זה שווה את זה. מאפיינים לוגיים הם המפתח ליצירת פריסות עם יכולת תגובה נכונה.
בדיקת ההבנה
בחינת הידע שלכם בבינלאומיות.
באנגלית, מהו הצד הלוגי right של תיבה, האם זה הגיוני?
block-starttopblock-endbottominline-startleftinline-endאיזה מאפיין צריך להוסיף ל-HTML כדי שיהיה משמעותי יותר לבינלאומיות?
englishlanglanguagei18nבשלב הבא תלמדו איך לגשת לפריסות ברמת הדף, שנקראות גם פריסות מאקרו.