נראות שונה בין דפדפנים - הפתרון המומלץ והיעיל ביותר בשביל נתיב טקסט

התקרית​

יחד עם מספר חידושים נחמדים בעדכון האחרון של הדפדפן Google Chrome (גירסה 96 מתאריך 18.11.2021), גילו אט אט בוני האתרים שכבר עשו שימוש נרחב בוידג'ט הדי חדש נתיב טקסט של אלמנטור, שהטקסטים בעברית שינו את הכיוון... :rolleyes:
ככה זה היה נראה (ועודנו... על כך בהמשך...) :​

עורך נתיב טקסט כרום.png

אז מה עושים?​

ברור. מה יותר פשוט לאלמנטוריסט מאשר להיכנס לנתיב טקסט בעורך ולהגדיר > משמאל לימין ?​
אם הוא עושה הפוך ממה שאומרים לו - נאמר לו הפוך ממה שאנחנו רוצים שיקרה ...​
זה מה שכולנו כבר עשינו ככל הנראה.​
אבל מה?​
כבר הצבנו בראש המאמר את העובדה שמקור הבעיה הוא בדפדפן גוגל כרום!​
ניתן לנחש לבד שגולשים ולקוחות פוטנציאלים שגולשים בדפדפנים אחרים רואים דווקא עכשיו את הטקסט הפוך - עכשיו, הוא כבר רשמית בכל הדפדפנים LTR !!!​
טוב, אז לא ממש כמו שזה נשמע... בדיקה בדפדפן Firefox מעלה ששם הם מבינים שעברית תמיד מציגים מימין לשמאל, לא משנה מה תגדירו באלמנטור!​
אבל - יש דפדפנים שלא!!​
מי למשל?​
Microsoft Edge
Android Webview
האמת? לא יצא לי לבדוק בעוד דפדפנים, אדרבה נשמח שתעדכנו כאן בתגובות!!​
טוב. אחרי שאנחנו מבינים שלשנות את הכיוון של הטקסט באלמנטור הוא לא הפתרון הכי יעיל (ופניה לגוגל בעניין לא מניבה פירות, בכל אופן לא במיידי... תבינו, רק הישראלים בבעיה...) - אז מה כן?​
ניגשנו למלאכה בשיתוף עם מתכנת מבריק, והרי הדרך סלולה בשורות שלפניכם:​

סקירה קצרה

א. נשכפל את האלמנט הבעייתי, אחד יהיה מוצג בדפדפן כרום והאחר בשאר הדפדפנים.​
ב. נכניס קוד CSS שמסתיר את האלמנט המיועד לכרום.​
ג. נכניס קוד JS שקורא להציג את האלמנט המיועד לכרום כאשר הגלישה מתבצעת מכרום, ובמקביל להסתיר את האלמנט השני המיועד לשאר הדפדפנים.​
ד. עוד קטע קצר של JS שככל הנראה לא תצטרכו, בכדי שהסקריפט ירוץ במקרה שיש טעינת ajax (זה מיועד למקרה שיש לכם נתיב טקסט שלא נטען בטעינה הראשונית של העמוד אלא לאחר לחיצה על פילטר או חיפוש למשל).​
הקוד שלפנינו מבוסס על נתוני סוג הדפדפן ממנו מתבצעת הגלישה, הנתונים נלקחים מתוך משתנה ה Navigator. כך זה נראה:​

נתוני דפדפן הגלישה.png

ומכאן לחלק המעשי

שלב א​

1. נשכפל את הוידג'ט נתיב טקסט, לאחד נגדיר מימין לשמאל ולאחר משמאל לימין (תצטרכו ככל הנראה לשחק עם נקודת הפתיחה של הטקסט, מומלץ להיכנס לעריכת הוידג'ט שמימין לשמאל דרך דפדפן אדג', או אחר שמתנהג כמוהו בעניין הכיוונים (ותספרו לנו מיהו :) ) זהירות: כשאתם עורכים מחלון אחר - סגרו את החלון הראשון, ולא - אתם עלולים לחזור לראשון ולעשות שם עדכון שימחק לכם את מה שביצעתם בחלון השני... ).​
2. ניתן לכל אחד מהם קלאס שונה.​
(בדוגמא שלפנינו הקלאס לאלמנט המוגדר משמאל לימין יהיה - chrome_class ולזה שמוגדר מימין לשמאל - not_chrome_class).​

שלב ב​

נכניס קוד CSS שיסתיר את האלמנט המוגדר משמאל לימין:​
אם יש לכם נתיב טקסט בכמה מיקומים באתר - הכניסו אותו בהתאמה אישית : דרך תפריט וורדפרס > עיצוב > התאמה אישית > CSS מותאם
CSS:
.chrome_class {
    display: none;
}
כעת יש לנו שני אלמנטים, אחד מתאים לכרום ואחד לשאר הדפדפנים. כאשר מה שמוצג בפועל באתר הוא האלמנט המתאים לשאר הדפדפנים. מה שאומר שבדפדפן כרום הטקסט בכיוון ההפוך. כעת ניגש לקוד שיגרום להציג בכרום את האלמנט המוסתר ולהעלים את השני:​

שלב ג​

נכניס את הסקריפט הבא בקוד מותאם של אלמנטור (אם אתם מעוניינים לבצע את שלב ד - דלגו על שלב זה והעתיקו את כל קטע הקוד המופיע בשלב ד!!):​
היכנסו דרך תפריט וורדפרס > אלמנטור > קוד מותאם > הוסף חדש
JavaScript:
<script>
    const isChrome = navigator?.userAgentData?.brands[2]?.brand?.toLowerCase().includes('chrome');
    const elementsToHide = document.querySelectorAll(".not_chrome_class");
    const elementsToDisplay = document.querySelectorAll(".chrome_class");
    if (isChrome && elementsToHide && elementsToDisplay) {
            elementsToHide.forEach(e => e.style.display = "none");
            elementsToDisplay.forEach(e => e.style.display = "block");
    }
</script>
נקפיד להגדיר במיקום:<body/>
1640553244813.png

שלב ד (אין צורך בדרך כלל)​

אם אתם רואים צורך שהסקריפט ירוץ בכל טעינת ajax העתיקו את הקוד הבא (זכרו להגדיר במיקום <body/> כנזכר בסוף שלב הקודם) :​
JavaScript:
<script>
const detectChrome = () => {
    const isChrome = navigator?.userAgentData?.brands[2]?.brand?.toLowerCase().includes('chrome');
    const elementsToHide = document.querySelectorAll(".not_chrome_class");
    const elementsToDisplay = document.querySelectorAll(".chrome_class");
    if (isChrome && elementsToHide && elementsToDisplay) {
            elementsToHide.forEach(e => e.style.display = "none");
            elementsToDisplay.forEach(e => e.style.display = "block");
    }
};
 
const proxied = window.XMLHttpRequest.prototype.send;
window.XMLHttpRequest.prototype.send = function() {
    const pointer = this;
    const intervalId = window.setInterval(function() {
        if(pointer.readyState != 4) return;
                detectChrome();
        clearInterval(intervalId);
    }, 1);
    return proxied.apply(this, [].slice.call(arguments));
};
</script>

זהו, סיימנו!!!​

בדקו את האתר שלכם בכרום ובאדג'. אתם בכיוון הנכון :giggle:
ורק בקשה קטנה לפני שאתם עוזבים: ביום שתגלו שכרום נזכרו להפוך את הכיוון בחזרה - תעדכנו אותנו כאן, שנדע למחוק את הקוד המותאם!​

בהצלחה!!