RTL (Right-to-Left, מימין לשמאל) הוא כיוון הכתיבה של עברית, ערבית ושפות נוספות. אתר RTL נכון מתחיל בשורה אחת — dir="rtl" על תגית ה-html — וממשיך בהרבה החלטות קטנות: CSS שכתוב במונחים של "התחלה" ו"סוף" ולא "שמאל" ו"ימין", אייקונים כיווניים שמתהפכים, טיפול נכון במילים באנגלית ובמספרים בתוך טקסט עברי, ורכיבים שנבדקו בכיוון הזה ולא רק "הפכו" מאנגלית. ארגון W3C, שקובע את תקני הרשת, מפרסם על כך הנחיות מפורטות — ועליהן מבוסס המאמר.
שלב 1: הכיוון ב-HTML, לא ב-CSS
לפי ההנחיות של W3C, כשכיוון המסמך כולו מימין לשמאל, מוסיפים dir="rtl" לתגית ה-html. הכיוון עובר משם לכל הרכיבים בעמוד. W3C ממליצה במפורש לא לקבוע את הכיוון הבסיסי ב-CSS, כי מידע על כיוון צריך להיות חלק מהתוכן עצמו — כך שהוא נשמר גם כשה-CSS לא נטען, ובכלים שקוראים את ה-HTML ישירות.
<html lang="he" dir="rtl">
שימו לב: lang="he" אומר שהשפה היא עברית, אבל לא קובע את הכיוון. צריך את שניהם.
שלב 2: CSS לוגי — "התחלה" ו"סוף"
הטעות הקלאסית היא CSS שכתוב לאנגלית: margin-left, padding-right, text-align: left. כשהופכים את הכיוון, כל הערכים האלה צריכים להתהפך ידנית. המאפיינים הלוגיים של CSS פותרים את זה:
| במקום (פיזי) | כותבים (לוגי) | משמעות |
|---|---|---|
| margin-left | margin-inline-start | ריווח בצד שבו השורה מתחילה |
| padding-right | padding-inline-end | ריווח בצד שבו השורה נגמרת |
| text-align: left | text-align: start | יישור לתחילת השורה |
| left: 0 | inset-inline-start: 0 | מיקום בצד ההתחלה |
| border-left | border-inline-start | גבול בצד ההתחלה |
עם מאפיינים לוגיים, אותו קוד עובד נכון בעברית ובאנגלית. זה בדיוק מה שמאפשר לבנות אתר בכמה שפות על תבנית אחת. התבנית של האתר הזה כתובה כך מההתחלה, וחריגים — מקומות שבהם בכוונה נדרש כיוון פיזי — מתועדים.
שלב 3: אייקונים — מה מתהפך ומה לא
- אייקונים כיווניים מתהפכים: חץ "הבא" ו"הקודם", חץ חזרה, אייקון של רשימה עם הזחה, סרגל התקדמות. בעברית, "הבא" מצביע שמאלה.
- אייקונים לא-כיווניים לא מתהפכים: סימן וי, איקס, חיפוש, טלפון, לוגו, שעון.
- מקרים מבלבלים: כפתור הפעלה של וידאו (▶) לא מתהפך, כי הוא מתאר את כיוון הזמן במדיה ולא את כיוון הקריאה.
שלב 4: טקסט דו-כיווני
האתגר הקשה ביותר ב-RTL הוא לא העברית — אלא המילים באנגלית והמספרים בתוכה. מספר טלפון, כתובת אתר, שם מותג עם סימן פיסוק או קוד מוצר יכולים להשתבש בסדר שלהם כשהם מופיעים בתוך משפט עברי. הכלים:
dir="ltr"על הרכיב — למספרי טלפון, כתובות, קוד ומספרים מעוצבים. באתר הזה כל מספר טלפון וכתובת אתר מסומנים כך.dir="auto"— לשדות טופס ולתוכן שהכיוון שלו לא ידוע מראש. לפי W3C, הדפדפן קובע את הכיוון לפי התו החזק הראשון — לרוב זה עובד, אבל לא תמיד.<bdi>— לבידוד טקסט שמוכנס מבחוץ, כמו שם משתמש, כך שהכיוון שלו לא ישבש את המשפט שסביבו.
שלב 5: רכיבים שצריך לבדוק במיוחד
- סליידרים וקרוסלות — כיוון הגלילה וכיוון החצים.
- תפריטים נפתחים — לאיזה צד נפתח תפריט משנה.
- טפסים — יישור התוויות, מיקום הודעות שגיאה, שדות טלפון ואימייל (שכדאי לסמן
dir="ltr"). - טבלאות — העמודה הראשונה בצד ימין.
- גרפים ותרשימים — האם ציר הזמן רץ משמאל לימין או מימין לשמאל, והאם זה עקבי.
- רכיבי צד שלישי — צ׳אטים, מפות ווידג׳טים שלא תמיד תומכים ב-RTL.
תבנית "שהפכו לה כיוון" מול תבנית שנבנתה ל-RTL
הרבה תבניות מדף נבנו לאנגלית, ותמיכת ה-RTL נוספה בדיעבד — לעיתים כקובץ CSS שמנסה לבטל את כל הערכים הפיזיים. התוצאה עובדת ברוב המקומות, ונשברת בפרטים: ריווח לא סימטרי, חץ הפוך, תפריט שנפתח לכיוון הלא נכון. תבנית שנכתבת מראש במאפיינים לוגיים חוסכת את כל זה. ההבדל מפורט גם במאמר וורדפרס בלי בוני עמודים.
ניסיון: עברית וערבית לצד שפות משמאל לימין
בWebGPT, הממשק זמין ב-8 שפות, כולל עברית וערבית מימין לשמאל, ובפלטפורמת המדיה עברית וערבית חיות לצד ארבע שפות משמאל לימין. ממשק כזה אפשרי רק כשהכיווניות היא חלק מהתכנון מההתחלה — אחרת כל רכיב צריך תיקון נפרד בכל כיוון.
רשימת בדיקה
dir="rtl"ו-lang="he"על תגית ה-html.- CSS במאפיינים לוגיים, בלי left/right קשיחים.
- אייקונים כיווניים מתהפכים, לא-כיווניים לא.
- מספרי טלפון, כתובות וקוד מסומנים
dir="ltr". - שדות טופס עם
dir="auto"כשהתוכן עשוי להיות בשתי השפות. - סליידרים, תפריטים, טבלאות ורכיבי צד שלישי נבדקו בכיוון הזה.
מאמרים קשורים: תבנית וורדפרס בעברית: איך בודקים שהיא באמת תומכת ב-RTL.
כל אתר שאני בונה נכתב מימין לשמאל מההתחלה, ולא מתורגם מאנגלית — ראו בניית אתרים מורכבים ובניית אתרי וורדפרס. על הגופן העברי כתבתי במאמר נפרד. אפשר גם לספר לי על הפרויקט.
אהבתם את המאמר?
