אחד הדברים שמפתיעים מעצבים שמגיעים משמאל לימין הוא כמה ימין לשמאל הוא לא רק "להפוך הכל". זו טעות שאני רואה שוב ושוב: מישהו לוקח ממשק אנגלי, מחליף את הText לעברית, מוסיף dir="ltr" — ומצMouth שהכל יסתדר. It's not עובד ככה. ימין לשמאל הוא פרדיגמה שונה, לא רק כיוון שונה.
עבדתי על עשרות Projects בעברית, ועל כמה גם בערבית. ואני יכול לאמר בביטחון: עיצוב ימין לשמאל Correct דורש חשיבה שונה מהשורש, לא רק שיLineף. בArticle הזה אני הולך לChapter את כל מה שNeed to know.
What's Really Different About Right-to-Left Design?
Many people think right-to-left design is just text direction. That's a small part of the picture. It affects:
- Layout Direction: What's on the left in left-to-right design moves to the right in right-to-left design
- Visual Hierarchy: The user's eye starts from the right — primary elements belong on the right
- Navigation and Navigation Patterns
- Icons and Illustrations
- פורמטים של תאריך, מBook Phone, כיוון גלילה
- Typography ותוכן מעורב
מה לשנות — ומה לא לשנות
זה אחד הדברים שהכי בלבלו Letterי בGetting Started. לא כל דבר בעיצוב ימין לשמאל צריך להתהפך. הנה הRule הLarge:
הפכו: אלמנטים שקשורים לכיוון Reading ואינטראקציה
- תפריט צדדי — מצד שמאל בשמאל לימין, מצד ימין בימין לשמאל
- כפQueue חזרה — חץ שמאלה בשמאל לימין, חץ ימינה בימין לשמאל
- סליידרים ופסי התקדמות — מתחילים מימין בעיצוב ימין לשמאל
- יישור Text — ימין בעיצוב ימין לשמאל
- תוויות טפסים — מצד ימין בעיצוב ימין לשמאל
- Navigation ארוז — מימין לשמאל בעיצוב ימין לשמאל
אל תהפכו: אלמנטים אוניברסליים
- Logoאים — לרוב נשארים זהים (אלא אם הLogo עצמו כתוב בשMouth)
- מBookים — תמיד שמאל לימין, גם בתוך הConnection ימין לשמאל
- כפQueueי play/pause — אוניברסליים, לא מתהפכים
- שעון ומצפן — אוניברסליים
- גרפים ותרשימים — בדרך Rule לא מתהפכים (תלוי בהConnection)
אתגר הTypography: תוכן מעורב
אחד הChallenges הקשים ביותר בעיצוב ימין לשמאל הוא Typography עם תוכן מעורב — עברית ואנגלית (או ערבית ואנגלית) בLetterו Sentence. הדפדפן מחיל Unicode Bidirectional Algorithm (BiDi) כדי לקבוע את כיוון כל חלק בText, אבל לפעמים הוא מחליט לא Correct.
Example לבעיה נפוצה: "התחברו עם Facebook" — הWord Facebook תוצג בצד שמאל. It's not מה שרצינו — רצינו שהSentence יזרום ימין לשמאל עם Facebook מוטבע.
הפתרון ב-CSS: שימוש ב-unicode-bidi ו-direction בזהירות, ובמיוחד ב-Figma: וודאו שה-text direction Defined Correct לכל text layer.
"הטעות הנפוצה ביותר שאני רואה: מעצב שמציג עברית עם פונט ש-not designed for Hebrew. Varela Round, Open Sans — אלה פונטים שתומכים בעברית אבל לא אופטימליים לה. השתמשו ב-Noto Sans Hebrew, Assistant, Rubik — שתוכננו מהיסוד לעברית."
אייLineנים: מה להפוך ומה להשאיר
זה תחום שמפתיע הרבה מעצבים. לא כל האייLineנים צריכים שיLineף בעיצוב ימין לשמאל. הRule:
אייLineנים שכן צריכים שיLineף:
- חצים שמציינים כיוון Navigation (חזרה, קדימה)
- אייLineן של "הבא" ב-carousel
- אייLineן של "עTipה" שמציין פתיחה לכיוון
- Playback controls (redo/undo, forward/back)
- אייLineן של "list with items on the right"
אייLineנים שלא צריכים שיLineף:
- שעון (universal)
- לב / like (universal)
- מגנט חיפוש (universal)
- Play / Pause / Stop (universal)
- מנאמנה, Camera, Tools אחרים שאין להם "כיוון" מובנה
Rule אColor: אם האייLineן מייצג פעולה שיש לה כיוון (Navigation, זרימת מKnowledge) — הפכו Letterו. אם הוא מייצג אובייקט פיזי — לא.
Tips לתהליך עבודה עם Figma וימין לשמאל
אחרי שנים של עבודה ב-Figma על Projects בעברית ובערבית, הנה תהליך העבודה שלי:
- הגדירו ימין לשמאל כברירת מחדל: ב-Figma, שנו את כיוון הText בפריים לימין לשמאל מהGetting Started. אל תחכו לסוף.
- רכיבים עם וריאנטים לשני Directionalם: אם אתם בונים Design System לשתי שפות — צרו וריאנטים לכל רכיב: שמאל לימין וימין לשמאל. זה עבודה מראש שחוסכת המון בהמשך.
- השתמשו בתכונת התרגום: תרגום ה-AI של Figma — לבדיקת איך Text עברי/ערבי נראה בממשק.
- בדLine גלישת Text: עברית לרוב ארוכה יותר מאנגלית. בדLine שמכולות לא גולשות במCoolי Edge.
- פריסה אוטומטית עם ימין לשמאל: ב-Figma, Auto Layout מכבד כיוון. ודאו שכיוון העTipה Correct.
CSS וימין לשמאל: הגישה המודרנית
למי שגם כותב Lineד (או עובד Coolוב עם מפתחים), חשוב להכיר את CSS Logical Properties — הגישה המודרנית לעיצוב ימין לשמאל ב-CSS:
במLineם margin-left/margin-right, השתמשו ב-margin-inline-start/margin-inline-end. במLineם padding-left, השתמשו ב-padding-inline-start. במLineם border-right, השתמשו ב-border-inline-end. כך Letterו CSS עובד Correct גם בשמאל לימין וגם בימין לשמאל ללא כפילויות.
Accessibility בעיצוב ימין לשמאל
עיצוב ימין לשמאל מביא אתגרי Accessibility ייחודיים:
- Lineראי Screen: ודאו שOrder ה-tab הגיוני מבחינת ימין לשמאל — לא שמאל לימין "הפוך"
- מאפיין lang: Very important לציין lang="en" או lang="ar" — Lineראי Screen Secondaryם את Coolיאת הText
- מדדי פוLineס: אינדיקטורי פוLineס בעיצוב ימין לשמאל צריכים להיות מושתקפים
- ניגודיות Colors בText מעורב: בדLine ניגודיות גם בהConnectionי BiDi
רשימת Testing לעיצוב ימין לשמאל
- כל הTextים מיושרים לימין בהConnection עברי/ערבי ✓
- אלמנטי Navigation הוזזו לצד הCorrect ✓
- אייLineנים עם כיוון הופכו, אייLineנים אוניברסליים נשארו ✓
- מBookים ותאריכים מוצגים שמאל לימין אפילו בתוך עיצוב ימין לשמאל ✓
- בדיקת גלישת Text לTextים ארוכים ✓
- Order tab הגיוני מימין לשמאל ✓
- אנימציות ומעברים מכבדים ימין לשמאל ✓
- Testing על מכשיר אמיתי, לא רק בסימולציה ✓