מספרים, תאריכים וטקסט מעורב בעברית

מה זה bidi ולמה זה חשוב למעצבים

Unicode מגדיר אלגוריתם בשם Unicode Bidirectional Algorithm (מוכר כ-UAX #9), שקובע איך לסדר על המסך טקסט שמערב כיוונים. כל תו מקבל סוג כיווני: אותיות עבריות הן תווים "חזקים" מימין לשמאל, אותיות לטיניות הן תווים חזקים משמאל לימין, ספרות הן תווים "חלשים", ורווחים ורוב סימני הפיסוק הם "ניטרליים" שמקבלים את הכיוון מהסביבה שלהם.

המשמעות המעשית: ספרות תמיד מוצגות משמאל לימין, גם בתוך משפט עברי, וסימן פיסוק בקצה של מילה באנגלית עלול להיצמד לצד הלא נכון. Apple מנסחת את זה פשוט: לא הופכים את סדר הספרות בתוך מספר, בטלפון או במספר כרטיס אשראי.

הפורמטים המקובלים בישראל

מאגר CLDR של Unicode הוא המקור שממנו רוב הדפדפנים ומערכות ההפעלה לוקחים פורמטים מקומיים. לפי הנתונים שלו לעברית:

כשמריצים בדפדפן את Intl.NumberFormat עם הלוקאל he-IL והמטבע ILS, התוצאה היא "1,234.50 ₪": פסיק להפרדת אלפים, נקודה עשרונית, וסמל השקל אחרי המספר עם רווח. הפלט כולל גם תווי RLM בלתי נראים שעוזרים לסדר הנכון. אם אתם בונים ממשק, עדיף להשתמש ב-Intl (או בספריית תרגום שנשענת על CLDR) במקום להרכיב מחרוזות ידנית.

מספרי טלפון

• נייד: קידומת 05X ואחריה שבע ספרות, למשל 050-1234567 (עשר ספרות עם האפס).
• קווי: קידומות אזור 02, 03, 04, 08, 09 ואחריהן שבע ספרות, למשל 03-1234567.
• 07X: מספרים לא גאוגרפיים של מפעילים וקווי VoIP, באותו מבנה של הנייד.
• מחו"ל: קידומת המדינה +972 ומשמיטים את האפס, למשל +972 50 123 4567.
• מספרים מיוחדים: 1-800 לשיחות חינם, ומספרים מקוצרים שמתחילים בכוכבית ואחריה ארבע ספרות.

התקלות הנפוצות ואיך הן נראות

W3C מתעדת כמה מצבים חוזרים שבהם הסדר על המסך משתבש:

• נקודה בסוף משפט שנגמר באנגלית: במשפט עברי שמסתיים במילה כמו Figma, הנקודה מוצגת בדרך כלל נכון. אבל אם כל הפסקה מוגדרת בטעות משמאל לימין, הנקודה קופצת לצד השני.
• מספר אחרי ביטוי באנגלית: מספר שבא מיד אחרי מילה באנגלית עלול להיצמד אליה ולהופיע בצד הלא צפוי.
• רשימה של ביטויים באנגלית: כמה כתובות או שמות באנגלית מופרדים בפסיקים, בתוך משפט עברי, עלולים להופיע בסדר הפוך.
• שם משתמש לא ידוע: שם שמשתמש הקליד (בעברית או באנגלית) ומיד אחריו מספר, כמו "3 תגובות".

איך מתקנים: בידוד, סימונים וכיוון לשדה

הכלל של W3C: עוטפים כל ביטוי בכיוון ההפוך באלמנט משלו ומסמנים לו כיוון. אלמנט עם dir, וגם האלמנט bdi, "מבודדים" את הטקסט מהסביבה, וזה פותר את רוב הבעיות.

1. ביטוי באנגלית שידוע מראש עוטפים ב-span עם dir="ltr" ו-lang="en". אם יש אלמנט סמנטי מתאים (כמו cite), עדיף אותו.
2. תוכן שלא ידוע מראש שם משתמש, כותרת מוצר או תגובה: עוטפים ב-bdi, או נותנים לאלמנט dir="auto".
3. מקום שאין בו תגיות ב-title של העמוד או בערך של מאפיין, משתמשים בתווי בידוד של Unicode: RLI או LRI או FSI בפתיחה, ו-PDI בסגירה.
4. תיקון נקודתי תו RLM (U+200F) מתנהג כמו אות עברית בלתי נראית. מניחים אותו אחרי הביטוי באנגלית כדי שהפיסוק יחזור למקום.

בטפסים זה מקבל משמעות נוספת: שדה טלפון ושדה מייל צריכים להיות משמאל לימין גם בטופס עברי. הפרטים במדריך טפסים בעברית.

מה זה אומר בעיצוב

• מחירים: כתבו מחיר בדוגמאות כמו שהמערכת תציג אותו, כולל סמל השקל אחרי המספר, כדי שהמפתחים לא ינחשו.
• טבלאות מספרים: בטבלה עברית העמודות מתחילות מימין, אבל הספרות בתוך כל תא נשארות משמאל לימין. יישור עמודה של סכומים כדאי לבדוק עם נתונים אמיתיים.
• סליידרים ודירוג: לפי Apple, סדר הערכים מתהפך (מימין לשמאל), אבל הספרות עצמן לא.
• תוויות מעורבות: כפתור כמו "פתחו ב-Figma" הוא מקרה נפוץ. בדקו אותו בממשק אמיתי, לא רק בקובץ העיצוב.

רוצים לראות את כל התמונה של כיווניות הממשק? חזרו למדריך עיצוב RTL.