RTL באמת: צ׳קליסט לבנייה בעברית
להוסיף dir="rtl" זה חמישה אחוזים מהעבודה. השאר: מרווחים לוגיים, היפוך נכון, גופנים בלי עברית ומספרים שמתהפכים לכיוון הלא נכון.
הגרסה העברית של אתר נשברת לא במקום שמצפים לו. הטקסט מסתדר מימין לשמאל לבד, הדפדפן יודע. מה שמתפרק זה כל מה שמסביב לטקסט — ובעיקר מה שמערבב טקסט עם מספרים.
1. מרווחים נקבעים לוגית ולא לפי צדדים
כל `margin-left` מוצא את עצמו בגרסה העברית בצד הלא נכון. מחליפים במאפיינים לוגיים שמבינים כיוון לבד:
- `margin-left` ← `margin-inline-start`
- `padding-right` ← `padding-inline-end`
- `border-left` ← `border-inline-start`
- `text-align: left` ← `text-align: start`
בכלים מודרניים זה כבר מובנה: המחלקות `ps-4` ו-`me-2` עובדות לשני הכיוונים. קוד ישן עם left/right יצטרך שכתוב.
2. לא הכול צריך להתהפך
חיצי «הבא», סרגלי התקדמות, סדר עמודות ותפריטים נפתחים — מתהפכים. את אלה משאירים:
- לוגואים וסימני מסחר.
- מספרי טלפון וכל מספר.
- שמות בלטינית: Google, WhatsApp, שמות מותגים.
- אייקוני הפעלה ושעונים — הם לא קשורים לכיוון הכתיבה.
3. המלכודת העיקרית: טקסט מעורב
עברית עם מספרים בתוכה היא טקסט דו־כיווני, והדפדפן מחליט על הסדר בעצמו. מחיר 5 ₪,000 בתוך משפט עברי מתהפך כך שסימן השקל בורח לצד הלא נכון של המספר. אותו דבר עם טלפונים וטווחים.
הפתרון הוא התג `bdi`: הוא אומר לדפדפן שבפנים יש קטע נפרד עם כיוון משלו. תפסנו את השגיאה הזו באתר שלנו פעמיים — קודם במחירי השירותים ואחר כך במספר הטלפון.
4. גופן
השגיאה הטכנית הנפוצה ביותר: לבחור גופן יפה ולא לבדוק אם יש בו עברית. ב-Unbounded, ב-Inter וברוב הגופנים «העיצוביים» אין עברית בכלל — הדפדפן ישתיל גופן מערכת בשקט, והגרסה העברית תיראה זרה.
- גופנים חינמיים שעובדים: Heebo, Rubik, Assistant, Frank Ruhl Libre.
- החלפת הגופן צריכה להיות לפי כיוון הכתיבה ולא לפי שפת הממשק.
- לעברית אין אותיות גדולות וכמעט אין אותיות יורדות, ולכן השורה נראית צפופה יותר: בדרך כלל צריך להגדיל את רווח השורות.
- בדקו בנפרד את סימן השקל. ב-JetBrains Mono, למשל, הוא לא קיים ומצויר כריבוע.
5. תגיות לחיפוש
שתי גרסאות השפה חייבות להיות מקושרות ב-`hreflang`, אחרת גוגל רואה בהן כפילות ומציג רק אחת. בנוסף `lang` ו-`dir` על תג ה-`html` — מהם תלויים גם החלפת הגופן וגם האופן שבו קוראי מסך מקריאים את העמוד.
צ׳קליסט לפני מסירה
- לפתוח את הגרסה העברית ולעבור במבט מימין לשמאל: תפריט, כפתורים, חיצים, טפסים.
- לבדוק כל מקום שבו מספר עומד ליד מילה בעברית: מחירים, טלפונים, תאריכים, טווחים.
- לוודא שהגופן מכיל עברית ולא מוחלף בגופן מערכת.
- לבדוק טפסים: איפה הסמן, לאן זזה תווית השדה, איך נראית שגיאה.
- להסתכל בטלפון: תפריט מובייל וקרוסלות הם מקומות שבהם שוכחים להפוך.
רוצים מערכת כזאת?
ספרו לי מה צריך — אחזור עם מחיר ולוח זמנים.