הרשת העולמית זמינה לכל אחד בעולם - היא נמצאת שם בשם! המשמעות היא שהאתר שלכם יכול להיות זמין לכל מי שיש לו גישה לאינטרנט, לא משנה איפה הם נמצאים, באיזה מכשיר הם משתמשים או באילו שפות הם מדברים.
המטרה של עיצוב רספונסיבי היא להפוך את התוכן שלכם לזמין לכולם. יישום אותה פילוסופיה על שפות אנושיות הוא הכוח המניע מאחורי הבינלאומיות - הכנת התוכן והעיצובים שלכם לקהל בינלאומי.
תכונות לוגיות
אנגלית נכתבת משמאל לימין ומלמעלה למטה, אבל לא כל השפות נכתבות כך. בשפות מסוימות, כמו ערבית ועברית, הטקסט נכתב מימין לשמאל, ובחלק מהגופנים היפניים נכתבים בפורמט אנכי ולא אופקי. כדי להתאים למצבי הכתיבה האלה, הושגו מאפיינים לוגיים ב-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-start
top
block-end
bottom
inline-start
left
inline-end
איזה מאפיין צריך להוסיף ל-HTML כדי שיהיה משמעותי יותר לבינלאומיות?
english
lang
language
i18n
בשלב הבא תלמדו איך לגשת לפריסות ברמת הדף, שנקראות גם פריסות מאקרו.