בניית אתר דו-לשוני עברית-אנגלית - המלכודות הטכניות של RTL/LTR שעולות בהמרות

למה "לתרגם ולהפוך כיוון" לא עובד

שני האתרים אמורים להשתמש באותו קוד עם שינוי כיוון, אבל בפועל dir="rtl" משנה רק את כיוון הקריאה הבסיסי. הוא לא הופך אוטומטית CSS שנכתב עם left ו-right קשיחים, לא יודע אילו אייקונים צריך להפוך ואילו לא, ולא פותר טקסט מעורב שבו שם מותג באנגלית, מספר טלפון או מחיר מופיעים בתוך משפט עברי. אתר שנבנה באנגלית ואז "הופך" לעברית עם תוסף תרגום או dir="rtl" גורף בדרך כלל נראה שבור בפרטים הקטנים - כפתור עם חץ שמצביע לכיוון הלא נכון, רווחים לא סימטריים, מספר שמתפרק לשני חלקים באמצע השורה.

המלכודת הראשונה - CSS עם כיוונים קשיחים

כשעיצוב נכתב עם margin-left, padding-right או text-align: left, הוא "יודע" רק כיוון אחד. בעמוד RTL הכל צריך להתהפך, ותיקון ידני של כל מקום שבו מופיע left או right בקוד הוא עבודה איטית ורגישה לטעויות - קל לפספס מקום אחד ולקבל אלמנט אחד שנשאר "תקוע" בכיוון הלא נכון. הפתרון הנקי הוא לכתוב CSS מלכתחילה עם logical properties - margin-inline-start/end במקום margin-left/right, inset-inline במקום left/right, text-align: start במקום text-align: left. כך אותו קוד בדיוק מתהפך נכון בשתי השפות בלי שום דבר מיוחד - הדפדפן עושה את זה לבד לפי dir של העמוד.

המלכודת השנייה - אייקונים שצריך להפוך, וכאלה שאסור

לא כל אייקון אמור להתהפך רק כי הכיוון התהפך. חצים, כפתורי "הבא/הקודם", אייקוני ניווט וסרגלי התקדמות - כן צריכים להתהפך, כי הם מייצגים כיוון תנועה שקשור לכיוון הקריאה. לעומת זאת אייקון נגן וידאו, שעון, טלפון או מצלמה לא אמורים להתהפך - הם מייצגים מוסכמה בין-לאומית שלא תלויה בכיוון השפה, וכפתור "נגן" שמצביע שמאלה בעמוד עברי רק מבלבל. ההחלטה חייבת להיות פר-אייקון, לא transform גורף על כל ה-SVG-ים בעמוד.

המלכודת השלישית - טקסט מעורב: מספרים ושמות באנגלית

ברגע שיש בתוך משפט עברי מספר טלפון, מחיר, או שם מותג באנגלית - האלגוריתם הבסיסי של הדפדפן לסידור טקסט דו-כיווני (bidi) יכול לסדר את התווים בצורה לא צפויה, במיוחד ליד סימני פיסוק. הסימפטום האופייני: פרט טכני שנראה תקין בדסקטופ אבל מתפרק במובייל, כי שם ההבדלים ברינדור בין דפדפנים בולטים יותר. הפתרון המעשי: לעטוף טקסט זר מובנה (שם מוצר באנגלית, קוד, כתובת אימייל) ב-span עם unicode-bidi: isolate או dir="auto", כדי שהוא יתנהג כיחידה עצמאית בתוך המשפט העברי ולא "יידבק" לכיוון שסביבו.

למה זה גם עניין של SEO ו-GEO/AEO, לא רק עיצוב

לכל שפה צריכה להיות כתובת קנונית עצמאית משלה עם תגי hreflang בין הגרסאות - בדיוק כמו שהעמוד הזה עצמו בנוי - ולא מתג שפה בצד הלקוח שמחליף טקסט בג'אווהסקריפט. הסיבה: מנוע AI שסורק דף שהתוכן שלו נטען או מוחלף דינמית לרוב רואה רק גרסה אחת, ולפעמים אף אחת. וגם בגרסה שהוא כן רואה, התשובה הישירה חייבת לשבת בפתיחה, לא קבורה עמוק בעמוד - מחקר על ציטוטי ChatGPT מצא ש-44.2% מהציטוטים מגיעים מה-30% הראשונים של המסמך (מקור: searchengineland.com). כלומר גם עמוד דו-לשוני שבנוי נכון מפסיד ציטוטים אם התשובה הישירה נמצאת באמצע הטקסט באחת השפות ולא בפתיחה שלו.

מה כן עובד

• עמוד HTML נפרד לכל שפה, עם lang ו-dir משלו, וקישורי hreflang הדדיים בין הגרסאות.
• CSS עם logical properties (margin-inline, inset-inline, text-align: start/end) במקום left/right קשיחים.
• החלטה מפורשת פר-אייקון אם הוא צריך להתהפך בעברית או להישאר כמו שהוא.
• עטיפת טקסט זר מובנה (שמות, מספרים, קודים) בסימון bidi נפרד כדי שלא "יימרח" לתוך כיוון המשפט.
• בדיקה על מובייל, לא רק דסקטופ - שם באגי bidi ומירור בולטים הרבה יותר.

זו בדיוק הסיבה שבנייה נכונה של אתר דו-לשוני לא נגמרת בתרגום. היא דורשת חשיבה על שתי השפות כבר בשלב העיצוב וכתיבת הקוד - לא כתוספת שמוסיפים בסוף.