RTL בשופיפיי: כל מה שנשבר בעברית ואיך מתקנים
כמעט כל תבנית שופיפיי נבנית קודם לאנגלית. כשמעבירים אותה לעברית, החנות נראית תקינה במבט ראשון ואז מתחילות ההפתעות: חץ שמצביע לכיוון הלא נכון, מחיר שמוצג הפוך, טופס שמיישר לשמאל, ומייל אישור שנראה כמו טעות.
ריכזנו כאן את הבעיות שחוזרות שוב ושוב בחנויות ישראליות, למה כל אחת קורית, ומה התיקון הנכון שלא נשבר בעדכון הבא של התבנית.
רוב תקלות ה-RTL בשופיפיי נובעות משלושה מקורות: תבנית שכתובה עם מאפייני מרחב צדדיים קבועים במקום מאפיינים לוגיים, טקסט מעורב של עברית ומספרים או לטינית שהדפדפן מסדר לפי אלגוריתם דו כיווני, ורכיבי צד שלישי שלא מכירים כיווניות. התיקון הנכון הוא להצהיר על כיווניות ברמת המסמך, לעבור למאפייני CSS לוגיים, לבודד מספרים וקודים, ולעבור סעיף סעיף על הצ׳קאוט, המיילים והאפליקציות.
למה זה נשבר מלכתחילה
שפה שנכתבת מימין לשמאל לא הופכת רק את יישור הטקסט. היא הופכת את כל תפיסת ההתחלה והסוף: מאיפה מתחילה שורה, לאיזה כיוון זז קרוסלה, לאן פונה חץ חזרה, ואיפה נמצא הפריט הראשון בתפריט.
תבנית שנכתבה באנגלית משתמשת במאפיינים כמו margin-left ו-padding-right, שהם קבועים במרחב ולא מושפעים מכיוון הכתיבה. כשמדליקים RTL, הטקסט מתהפך אבל המרווחים נשארים במקום, וכל הפריסה מתפרקת בפרטים הקטנים.
המקור השני הוא האלגוריתם הדו כיווני של הדפדפן. כשמערבבים עברית עם ספרות, סימני מטבע או מילים באנגלית, הדפדפן מנחש איפה מתחיל כל קטע. לפעמים הוא צודק ולפעמים לא, והתוצאה היא מספרי טלפון וסכומים שמוצגים בסדר שגוי.
כיווניות התבנית
הצעד הראשון הוא להצהיר על הכיווניות ברמת המסמך, ולא לפזר יישורים ידניים. בתבניות שופיפיי זה נעשה בקובץ הפריסה הראשי, כשמאפיין הכיוון נגזר מהשפה של החנות ולא נכתב קשיח.
- ודאו שאלמנט השורש נושא כיוון ימין לשמאל וקוד שפה עברי, ושהם מתעדכנים לפי שפת החנות ולא לפי ערך שהוטמע ידנית.
- החליפו את מאפייני המרחב הצדדיים במאפיינים לוגיים: התחלה וסוף במקום שמאל וימין, גם במרווחים, גם במיקום מוחלט וגם בגבולות.
- ביישור טקסט השתמשו בערך שמשמעו התחלת השורה, כדי שהיישור יתהפך יחד עם השפה.
- אל תוסיפו גיליון סגנון נפרד שהופך הכל בכוח. תיקון כזה עובד בדף אחד ונשבר בשלושה אחרים.
נקודה שחוזרת הרבה: חלק מהתבניות מכריזות על תמיכה ב-RTL, אבל התמיכה מסתיימת בדף הבית. בדקו את דף המוצר, את הקטגוריה, את החיפוש, את דף החשבון ואת הדפים המשפטיים לפני שסוגרים רכישה.
מספרים, מחירים ומטבע
זה התחום שהכי מבלבל, כי הבעיה נראית אקראית. הכלל הוא שספרות נחשבות ניטרליות, ולכן הסדר שלהן ביחס לסימנים סמוכים נקבע לפי ההקשר.
- סימן המטבע. החליטו אם השקל מופיע לפני הסכום או אחריו, והגדירו את זה בפורמט המטבע של החנות. אל תשאירו את ההחלטה לתבנית.
- טווחי מחיר. הצגה של טווח מ-X עד Y נוטה להתהפך. עדיף לעטוף את הטווח כולו ברכיב עם כיוון מוגדר ובידוד, כדי שהדפדפן לא יסדר אותו מחדש.
- אחוזי הנחה. תווית הנחה עם סימן אחוז וסימן מינוס היא מקרה קלאסי של סדר שגוי. בידוד הרכיב פותר את זה.
- מספרי הזמנה, מק״ט וברקוד. אלה מחרוזות לטיניות בתוך משפט עברי. הן צריכות כיוון שמאל לימין מפורש ובידוד, אחרת מקף או נקודה בתוכן יקפצו לצד השני.
- מספרי טלפון וכתובות אימייל. אותו טיפול בדיוק, גם בתצוגה וגם בשדות הקלט.
הכלי הנכון הוא בידוד כיווני ברמת האלמנט. במקום להילחם בכל מופע בנפרד, עוטפים את הקטע הלטיני ברכיב שמצהיר על כיוון משלו ומבודד את עצמו מהסביבה.
אייקונים, חצים וקרוסלות
חץ הוא לא אייקון, הוא הוראת ניווט. בעברית חץ הבא צריך להצביע שמאלה וחץ הקודם ימינה, וכמעט כל תבנית עושה את ההפך.
- הפכו אופקית את האייקונים הכיווניים בלבד: חצי ניווט, חצי קרוסלה, חץ חזרה, חץ פתיחת תפריט משנה. אל תהפכו אייקונים סמליים כמו עגלה, לב או משלוח.
- בקרוסלות בדקו את הגדרת הכיוון של הספרייה עצמה. רוב ספריות הקרוסלה תומכות בכיוון ימין לשמאל, אבל זה דגל שצריך להדליק ולא ברירת מחדל.
- שימו לב לסדר הנקודות והאינדיקטורים מתחת לקרוסלה, ולכיוון הגלילה במגע בנייד.
- פסי התקדמות, מדדי מלאי ורכיבי דירוג בכוכבים ממלאים לרוב מהצד הלא נכון.
טפסים ושדות קלט
טופס הוא המקום שבו RTL שבור עולה כסף ישירות, כי לקוח שמתקשה למלא כתובת פשוט עוזב.
- שדות טקסט עברי צריכים כיוון ימין לשמאל, כולל הטקסט הרמז שבתוכם.
- שדות מספריים כמו טלפון, כרטיס אשראי, מיקוד ומספר בית עובדים טוב יותר בכיוון שמאל לימין עם יישור לימין, כדי שהספרות לא יקפצו בזמן ההקלדה.
- הודעות שגיאה צריכות להופיע בצד הנכון של השדה ולהיות קשורות אליו נגישותית.
- סימני חובה, תוויות ותיבות סימון נוטים להישאר בצד השגוי, במיוחד בטפסים שמגיעים מאפליקציה חיצונית.
- בדקו את סדר המעבר במקש הטאב. סדר לוגי שגוי הוא גם בעיית נגישות וגם בעיית המרה.
מיילים אוטומטיים
זה החלק שהכי הרבה חנויות שוכחות. תבניות ההודעות של שופיפיי, כמו אישור הזמנה, אישור משלוח, איפוס סיסמה והחזר כספי, הן קבצי HTML נפרדים מהתבנית של החנות. גם אם החנות מושלמת בעברית, המיילים יישארו בכיוון אנגלי עד שתיגעו בהם.
- הוסיפו הצהרת כיווניות בגוף המייל ובטבלאות הפריסה שבתוכו.
- הפכו את יישור העמודות בטבלת פירוט ההזמנה, כדי שהמוצר יהיה בצד הנכון והסכום בצד השני.
- תרגמו את כל הטקסטים, כולל כותרות המשנה והכפתורים, ובדקו שגם שורת הנושא בעברית.
- שלחו לעצמכם מייל בדיקה אמיתי וצפו בו בטלפון, לא רק בתצוגה המקדימה של הממשק.
עגלה, צ׳קאוט ואזור אישי
הצ׳קאוט של שופיפיי מתורגם ומיישר את עצמו כשהשפה של החנות מוגדרת לעברית והיא שפת ברירת המחדל. זו הגדרה ברמת החנות, לא ברמת התבנית, וכדאי לוודא אותה מוקדם.
- מגירת העגלה צריכה להיפתח מהצד הנכון. תבניות רבות מחליקות אותה מימין גם בעברית.
- כפתורי הכמות, כלומר פלוס ומינוס וסל המחיקה, צריכים לשמור על סדר הגיוני ועל אזור לחיצה מספיק גדול בנייד.
- סיכום ההזמנה, קוד הקופון ושורת המשלוח הם מקום נפוץ להתהפכות סכומים.
- באזור האישי בדקו את היסטוריית ההזמנות, את פנקס הכתובות ואת מסך המעקב אחרי משלוח.
פילטרים, מיון וחיפוש
בדף קטגוריה יש הרבה רכיבים קטנים שמניחים כיוון. מחוון טווח מחירים הוא הדוגמה הבולטת: הידית של המינימום והמקסימום מתחלפות, והתווית מציגה ערך אחד ליד הידית של השני.
בנוסף שווה לבדוק את סדר הצ׳יפים של הפילטרים הפעילים, את מיקום כפתור הניקוי, את פתיחת תפריט המיון בנייד, ואת רשימת ההשלמה האוטומטית בחיפוש. חיפוש בעברית גם דורש טיפול בניקוד, בגרשיים ובצורות רבים כדי להחזיר תוצאות סבירות.
אפליקציות ורכיבי צד שלישי
אפליקציות מזריקות רכיבים משלהן, ורובן נכתבו לאנגלית. ווידג׳ט ביקורות, פופאפ, צ׳אט, מחשבון תשלומים ותוסף נגישות הם החשודים המיידיים. לפני התקנה, בדקו אם לאפליקציה יש הגדרת כיווניות ותרגום מלא. אם אין, ההתאמה תיפול עליכם והיא עלולה להישבר בכל עדכון של האפליקציה.
רשימת בדיקה לפני עלייה לאוויר
| אזור | מה בודקים | התיקון הנכון |
|---|---|---|
| מסמך | כיוון ושפה ברמת השורש בכל סוגי הדפים | הגדרה לפי שפת החנות בקובץ הפריסה |
| פריסה | מרווחים, מיקום מוחלט וגבולות | מעבר למאפייני CSS לוגיים |
| מחירים | מיקום סימן המטבע, טווחים ואחוזי הנחה | פורמט מטבע אחיד ובידוד כיווני |
| קודים | מק״ט, מספר הזמנה, טלפון ואימייל | כיוון שמאל לימין מפורש ובידוד |
| אייקונים | חצי ניווט וקרוסלה | היפוך אופקי לאייקונים כיווניים בלבד |
| טפסים | יישור, טקסט רמז, שגיאות וסדר טאב | כיוון לפי סוג השדה, לא לפי כל הטופס |
| עגלה | כיוון פתיחת המגירה וסיכום ההזמנה | תיקון בתבנית, לא בהגדרות האפליקציה |
| מיילים | אישור הזמנה, משלוח ואיפוס סיסמה | עריכת תבניות ההודעות והוספת כיווניות |
| פילטרים | מחוון מחיר, צ׳יפים ומיון | היפוך לוגיקת מינימום ומקסימום |
| אפליקציות | ביקורות, פופאפ, צ׳אט ונגישות | בדיקת תמיכה לפני התקנה |
גללו את הטבלה הצידה כדי לראות את כל העמודות
לפני שסוגרים את הבדיקה, פתחו את החנות בטלפון אמיתי ולא רק בהדמיה בדפדפן. הרבה תקלות כיווניות מופיעות רק במסכי מגע, במיוחד בגלילה אופקית ובתפריטים נפתחים.
גופנים
גופן בלי אותיות עבריות יגרום לדפדפן ליפול לגופן ברירת מחדל, והתוצאה היא כותרת אחת בשפה ויזואלית אחת וטקסט בשפה אחרת. בחרו גופן עברי אמיתי עם משקלים מרובים, טענו רק את המשקלים שאתם באמת משתמשים בהם, והגדירו רווח שורות מעט גדול יותר ממה שנראה נכון באנגלית. עברית צפופה יותר, וטקסט צפוף פוגע בקריאות בנייד.
מה עוד שואלים על עברית בשופיפיי
יש תבניות שופיפיי שתומכות באמת ב-RTL?
למה המחיר שלי מוצג הפוך?
הצ׳קאוט של שופיפיי עובד בעברית?
צריך לתקן גם את המיילים?
מה עושים עם אפליקציה שלא תומכת בעברית?
חנות דו לשונית עברית ואנגלית, איך מתנהגים?
עברית היא לא הגדרה, היא עבודה
עברית בשופיפיי היא לא מתג שמדליקים. היא שכבה שצריך לתכנן: כיווניות ברמת המסמך, מאפיינים לוגיים בפריסה, בידוד למספרים ולקודים, ומעבר מסודר על הטפסים, העגלה, המיילים והאפליקציות.
הזמן שמושקע בזה חוזר ישירות. חנות שנראית שבורה בעברית מאבדת אמון בשנייה הראשונה, וזה קורה בדיוק בדפים שבהם הלקוח מחליט לקנות.
אנחנו בונים חנויות עבריות מהיסוד ומתקנים חנויות קיימות שנשברו במעבר לעברית. אפשר לקרוא עוד בעמוד בניית חנות שופיפיי או לשלוח לנו קישור לחנות ולקבל חוות דעת קצרה.