שיעור 4: RTL ו-PWA — UI שעובד בעברית ובאנגלית, ומותקן כאפליקציה

פינטק ישראלי ידוע: אפליקציה יפה — אבל מספרים מיושרים שמאלה, כפתורים גולשים ב-iOS, וגופן אנגלי על תוכן עברי. ארבעה bugs ב-screenshot אחד. כולם נמנעים עם CSS logical properties.

CSS logical property הוא כמו הוראה שמבינה כיוון טקסט. במקום 'הוסף רווח משמאל', היא אומרת 'הוסף רווח בצד ההתחלה'. ב-RTL, 'התחלה' הוא ימין. ב-LTR, 'התחלה' הוא שמאל.

CSS logical properties: מאפייני CSS שמתייחסים לכיוון הטקסט ('start', 'end') במקום לכיוון פיזי ('left', 'right'). עובדים נכון גם ב-RTL וגם ב-LTR.
PWA (Progressive Web App): אפליקציית ווב שניתן להתקין על מסך הבית של iOS/Android, עובדת offline, ומראה ללא address bar כמו native app.
BiDi (Bidirectional text): טקסט שמשלב כיוונים — עברית עם מספרים לועזיים, שמות מותגים באנגלית בתוך משפט עברי. HTML ‎`<bdi>`‎ ו-CSS ‎`unicode-bidi`‎ מטפלים בזה.