מרקיז אינסופי באתר עברי — למה RTL שובר את האנימציה ואיך מתקנים

שני מושגים לפני שמתחילים: מרקיז (marquee) הוא פס תוכן שנע לבד בלופ — כמו שורת הלוגואים הנעה בעמוד הבית של האתר הזה. RTL (Right-To-Left) הוא מצב שבו הדפדפן מסדר את העמוד מימין לשמאל, כמו שנדרש לעברית ולערבית — מפעילים אותו עם dir="rtl".

הטריק המוכר למרקיז חלק: משכפלים את התוכן פעמיים, ומזיזים את הפס עם translateX — פקודת CSS שמזיזה אלמנט על ציר X (ימינה-שמאלה) בלי להשפיע על שאר העמוד. מזיזים מ-0 עד ‎-50%‎, וכשהעותק הראשון יוצא מהמסך, העותק השני כבר בדיוק במקומו — והלופ נראה אינסופי.

באתר עברי זה נשבר בשקט, והסיבה מלמדת משהו עמוק: direction: rtl הופך את נקודת ההתחלה שממנה הדפדפן מסדר תוכן, אבל translateX הוא תזוזה פיזית — מינוס תמיד אומר "שמאלה", בכל שפה. השילוב גורם לפס לברוח מהמסך ולהשאיר רווח ריק.

הפתרון הנקי: לעטוף רק את המרקיז ב-dir="ltr" (כלומר "האזור הקטן הזה מסודר משמאל לימין") ולהשאיר את שאר העמוד RTL:

<div class="marquee" dir="ltr">
  <div class="marquee-track">...תוכן כפול...</div>
</div>

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

(@keyframes הוא האופן שבו מגדירים אנימציה ב-CSS: מציינים מצב התחלה ומצב סיום, והדפדפן ממלא את הדרך ביניהם.)

הלקח הרחב: ב-CSS יש מאפיינים לוגיים שמתהפכים אוטומטית עם כיוון השפה (כמו margin-inline-start), ויש מאפיינים פיזיים שלא (כל ה-transforms). כל אנימציה שמבוססת על תזוזה אופקית באתר עברי — צריכה בדיקה נפרדת.