האינטרנט זמין לכולם בעולם – זה בדיוק מה שמשתמע מהשם שלו! המשמעות היא שהאתר שלכם זמין לכל מי שיש לו גישה לאינטרנט, בלי קשר למיקום שלו, למכשיר שבו הוא משתמש או לשפות שהוא מדבר.
המטרה של עיצוב רספונסיבי היא להפוך את התוכן שלכם לזמין לכולם. הפילוסופיה הזו היא הכוח המניע מאחורי תהליך הלוקליזציה – הכנת התוכן והעיצובים שלכם לקהל בינלאומי.
מאפיינים לוגיים
אנגלית נכתבת משמאל לימין ומלמעלה למטה, אבל לא כל השפות נכתבות כך. יש שפות כמו ערבית ועברית שקוראים אותן מימין לשמאל, ויש גופנים יפניים שקוראים אותם מלמעלה למטה ולא משמאל לימין. כדי להתאים את עצמם למצבי הכתיבה האלה, הוספנו ל-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 מתאים ל'שמאל' ו-inline-end מתאים ל'ימין'.
באופן דומה, בשפה כמו אנגלית שבה הטקסט נכתב מלמעלה למטה, block-start מתאים ל'למעלה' ו-block-end מתאים ל'למטה'.
אם אתם משתמשים במאפיינים לוגיים ב-CSS, אתם יכולים להשתמש באותו גיליון סגנונות לתרגומים של הדפים. גם אם הדפים שלכם מתורגמים לשפות שנכתבות מימין לשמאל או מלמטה למעלה, העיצוב יותאם בהתאם. לא צריך ליצור עיצובים נפרדים לכל שפה. שימוש במאפיינים לוגיים מאפשר לעיצוב להגיב לכל מצב כתיבה. המשמעות היא שהעיצוב שלכם יכול להגיע ליותר אנשים בלי שתצטרכו להשקיע זמן ביצירת עיצובים נפרדים לכל שפה.
טכניקות מודרניות של פריסת CSS, כמו grid ו-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 Version מסומן כשפה גרמנית, וגם קישור היעד מסומן כשפה גרמנית:
<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בשלב הבא נסביר איך לגשת לפריסות ברמת הדף, שנקראות גם פריסות מאקרו.