שיעור 8: קומפוננטות RTL — לבנות לשני הכיוונים
האפליקציה נראית מצוין באנגלית. מחליפים לעברית — ופתאום המרווחים בצד הלא-נכון, הטקסט מיושר שמאלה, וחץ ה'חזרה' מצביע לכיוון ההפוך. השיעור הזה מלמד לבנות קומפוננטות עם `logical properties` — `ms-4` במקום `ml-4` — שמתהפכות לבד תחת `dir="rtl"`, כך שאותו קוד עובד בעברית ובאנגלית.
מאפיין לוגי הוא כמו לומר 'היד שאתה כותב בה' במקום 'יד ימין' — זה נכון בין אם אתה ימני או שמאלי. `ms-4` אומר 'מרווח בצד ההתחלה', אז הוא נוחת בצד הנכון גם בעברית וגם באנגלית.
- מאפיין לוגי
- מאפיין שמתייחס ל'התחלה' ו'סוף' לפי כיוון הכתיבה (`ms`, `me`, `ps`, `text-start`) במקום ל'שמאל' ו'ימין' — לכן הוא מתהפך לבד ב-RTL.
- מאפיין פיזי
- מאפיין שקושר ערך לצד קבוע במסך (`ml`, `mr`, `text-left`). הוא לא מודע לכיוון, אז הוא נשאר באותו צד גם כשהממשק עובר ל-RTL — ושובר את הפריסה.
- תכונת dir
- התכונה `dir="rtl"` או `dir="ltr"` (לרוב על `<html>`) שקובעת את כיוון הכתיבה. מאפיינים לוגיים מסתמכים עליה כדי לדעת לאן 'start' מצביע.
- שיקוף אייקונים
- היפוך אופקי של אייקונים כיווניים (חץ חזרה, chevron) ב-RTL, כדי שיצביעו נכון. אייקונים לא-כיווניים (לוגו, נגן מדיה) לא משוקפים.
