RTL · שלב 1
מדריך עיצוב RTL לממשקים בעברית
עיצוב ממשק משתמש בעברית מתחיל בהבנה פשוטה: הכיוון של הממשק עוקב אחרי כיוון הקריאה, אבל לא כל דבר על המסך שייך לכיוון הקריאה. המדריך הזה עושה סדר בין השניים.
הבסיס: כיוון הממשק עוקב אחרי כיוון הקריאה
בעברית קוראים מימין לשמאל, ולכן העין מתחילה את הסריקה בצד ימין של המסך. מכאן נגזרים רוב הכללים: הלוגו והניווט הראשי עוברים לימין, תפריט צד נפתח בדרך כלל מימין, טקסט מיושר לימין, וכפתור "הבא" מצביע שמאלה. W3C מסבירה שבמסמך מימין לשמאל הדפדפן כבר הופך לבד הרבה דברים: יישור בלוקים, סדר העמודות בטבלה, מיקום סימני הפיסוק, היישור של שדות טופס ושל טקסט ה-alt וה-title.
מה שלא מתהפך לבד הוא כל מה שהמעצב או המפתח קבעו בצורה פיזית: מרווח שהוגדר כ"שמאל", אייקון חץ שצויר פונה ימינה, תמונה עם דמות שמביטה לכיוון מסוים. את אלה צריך לבדוק ידנית.
איך מגדירים כיוון ב-HTML
ההמלצה של W3C ברורה: כשכל המסמך בעברית, שמים dir="rtl" על האלמנט html ומצהירים גם על השפה עם lang="he". אל תגדירו את כיוון הבסיס דרך CSS (המאפיין direction), כי הכיוון הוא חלק מהתוכן ולא מהעיצוב, והוא צריך לעבוד גם אם קובץ העיצוב לא נטען. MDN מוסיפה שהצהרת שפה לבדה לא קובעת כיוון, ולכן צריך את שני המאפיינים.
- dir="rtl": כיוון מימין לשמאל. שמים פעם אחת על html, וכל העמוד יורש.
- dir="ltr": לבלוק שכולו באנגלית בתוך עמוד עברי, למשל ציטוט או קטע קוד.
- dir="auto": לתוכן שלא ידוע מראש, כמו תגובות גולשים או שדה חיפוש. הדפדפן מנחש לפי התו החזק הראשון, וזה ניחוש ולא זיהוי שפה.
- האלמנט bdi: לבידוד קטע קצר שהכיוון שלו לא ידוע, למשל שם משתמש בתוך משפט.
CSS: לחשוב בהתחלה וסוף, לא בימין ושמאל
המאפיינים הלוגיים של CSS ממפים את הפריסה לכיוון זרימת הטקסט במקום לכיוונים פיזיים. במקום margin-left כותבים margin-inline-start, שהוא שמאל באנגלית וימין בעברית. כך גיליון סגנונות אחד עובד בשתי השפות, ו-W3C ממליצה עליהם במפורש לאתרים שיתורגמו.
| במקום (פיזי) | כותבים (לוגי) | מה זה עושה בעברית |
|---|---|---|
| margin-left | margin-inline-start | מרווח בצד ימין |
| padding-right | padding-inline-end | ריפוד בצד שמאל |
| left: 0 | inset-inline-start: 0 | צמוד לימין |
| text-align: left | text-align: start | יישור לימין |
| border-top-left-radius | border-start-start-radius | פינה עליונה ימנית |
גם בעיצוב עצמו כדאי לאמץ את השפה הזו. ב-Figma, Auto layout מסדר פריטים לפי סדר השכבות, ולכן ממשק עברי דורש לבדוק את הסדר ואת היישור. הפרטים במדריך Auto Layout בפיגמה.
מה מתהפך ומה לא
ההנחיות של Material Design ושל Apple מסכימות על רוב הכללים. העיקרון: מתהפך כל מה שמבטא כיוון קריאה, סדר או מעבר בזמן. לא מתהפך מה שמייצג חפץ אמיתי, כיוון פיזי אמיתי, או מדיה.
מתהפך
- פריסת העמוד, סדר הניווט, מיקום אייקונים בתוך שדות טקסט
- חצי חזרה, הבא והקודם, כפתור חזרה שמצביע ימינה
- פס התקדמות, סליידר ודירוג כוכבים: מתמלאים מימין לשמאל
- ציר זמן ולוח שנה: הימים רצים מימין לשמאל
- אייקונים שמציירים שורות טקסט מיושרות
לא מתהפך
- מספרים ומספרי טלפון: הספרות נשארות בסדר הרגיל
- לוגואים, תמונות ואיורים (Apple מזהירה שהיפוך יכול לשנות משמעות)
- כפתורי ניגון ופס ההתקדמות של סרטון: לפי Material, הם מבטאים את כיוון המדיה
- שעון ואייקון רענון שמסתובבים עם כיוון השעון
- גרפים ותרשימים, וחפצים כמו מקלדת או אוזניות
הפירוט המלא, כולל מקרי גבול, נמצא במדריך אייקונים והיפוך במראה.
טקסט מעורב ויישור פסקאות
ממשק עברי כמעט תמיד מכיל אנגלית: שמות מוצרים, כתובות מייל, מונחים. Apple ממליצה ליישר פסקאות לפי השפה שלהן ולא לפי ההקשר: פסקה באנגלית של שלוש שורות ומעלה תיושר לשמאל גם בתוך מסך עברי, כי אחרת קשה למצוא את תחילת השורה. טקסטים של שורה או שתיים נשארים מיושרים לפי כיוון הממשק.
Apple מציינת עוד שלעברית אין אותיות גדולות, ולכן היא נראית קטנה ליד אנגלית באותיות גדולות. לפעמים הגדלה קלה של הגופן העברי מאזנת את המראה. על בחירת גופן במדריך גופנים עבריים לממשק, ועל מספרים ואנגלית בתוך משפט במדריך מספרים, תאריכים וטקסט מעורב.
בדיקה מהירה לפני מסירה
- בדקו את ה-html יש dir="rtl" ו-lang="he" על האלמנט הראשי, ואין direction שהוגדר ב-CSS במקומו.
- חפשו left ו-right בקוד כל מרווח, מיקום או יישור פיזי הוא מועמד להחלפה במאפיין לוגי.
- עברו על האייקונים חצים וכפתורי ניווט הפוכים, כפתורי ניגון ושעונים לא.
- הקלידו טקסט מעורב משפט עם מספר, מילה באנגלית וסימן פיסוק בסוף. ודאו שהנקודה לא קופצת להתחלה.
- בדקו טפסים שדות טלפון, מייל וקוד נשארים משמאל לימין. הפרטים במדריך טפסים בעברית.
שאלות נפוצות
מה זה RTL?
RTL הוא קיצור של Right to Left, כיוון כתיבה מימין לשמאל, כמו בעברית ובערבית. ממשק RTL הוא ממשק שהפריסה, הניווט והיישור שלו בנויים לפי כיוון הקריאה הזה.
האם מספיק להוסיף direction: rtl ב-CSS?
לא. W3C ממליצה להגדיר את הכיוון ב-HTML עם dir="rtl" על האלמנט html, כי הכיוון שייך לתוכן. ב-CSS כדאי להשתמש במאפיינים לוגיים כמו margin-inline-start.
האם הופכים גם תמונות בממשק עברי?
בדרך כלל לא. Apple ממליצה לא להפוך תמונות, איורים ולוגואים, כי ההיפוך יכול לשנות את המשמעות. כשהכיוון חשוב לתוכן, עדיף להכין גרסה חדשה.
האם פס התקדמות מתמלא מימין לשמאל?
כן, פס התקדמות וסליידר מתמלאים מימין לשמאל בממשק עברי. החריג הוא פס ההתקדמות של נגן וידאו, שלפי Material Design נשאר משמאל לימין.
מקורות
- Structural markup and right-to-left text in HTML · W3C Internationalization
- dir (global attribute) · MDN Web Docs
- CSS logical properties and values · MDN Web Docs
- Right to left · Apple Human Interface Guidelines
- Bidirectionality · Material Design
נבדק מול המקורות לאחרונה ב־10 בנובמבר 2026. מצאתם טעות? כתבו לנו.