שתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים

[dovid]

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

const leftRightStyles = ['margin', 'padding', 'border'];
const leftRightToogle = ['float', 'text-align'];
const css = document.styleSheets;

for(const ss of css)
for(const rule of ss.cssRules)
    if(rule.style)
        editStyle(rule.style);

for(const el of document.querySelectorAll('*[style]'))
    editStyle(el.style);

document.dir = "rtl";

function editStyle(style){
    spawnCss(style, 'left', 'right');
    spawnDir(style);
    
    for (const name of leftRightStyles) 
        spawnCss(style, name + 'Left', name + 'Right');      
    for (const name of leftRightToogle) 
        toogleLeftRight(style, name);      
}

function spawnCss(style, prop1, prop2){
    const a = style[prop1];
    const b = style[prop2];
    if(a != b){
      style[prop1] = b;
      style[prop2] = a;
    }
}

function spawnDir(style){
    const a = style['direction'];
    if(a)
        style['direction'] = (a == 'ltr' ? 'rtl' : 'ltr');
}

function toogleLeftRight(style, prop){
    const a = style[prop];
    if(a == 'left')
         style[prop] = 'right';
    else if(a == 'right')
         style[prop] = 'left';
}

נ.ב. למה לא להשתמש בedge וזהו?

[שלום עולם 0]

@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

נ.ב. למה לא להשתמש בedge וזהו?

התרגלתי לכרום, השאלה הטעונה איזה דפדפן עדיף היא נושא לאשכול מפלצתי נפרד.

[שלום עולם 0]

@NH-LOCAL כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

{text-align: right; direction: rtl;}

לא צריך גם

dir="rtl"

?

[שלום עולם 0]

@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

function toogleLeftRight

אתה לא קורא לפונקציה הזו.

[dovid]

@שלום-עולם-0 ערכתי.

[שלום עולם 0]

@dovid לאחר העיון אני לא מצליח להבין מה הקוד שלך מחדש.

[dovid]

@שלום-עולם-0 לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמות, אם תעיר לי מקומות שפציפיים שהקוד לא מסדר טוב אשמח לשפרו.

[shraga]

@dovid

באתר הזה לדוגמא
https://mrcoles.com/bookmarklet/

עם הסקריפט שלך:

עם הסקריפט של יוסף בן שמעון

בסקריפט שלך הטקסט מיושר מימין לשמאל (בשונה מהסקריפט השני), אבל הטקסט עצמו בשילוב אנגלית לא מופיע תקין (בשונה מהשני בו הטקסט עצמו מופיע תקין אבל מיושר לשמאל).

בנוסף, באתר הזה
https://sandbox.self.li/bookmarklet-to-extension/
הסקריפט שלך לא משנה שום דבר בשונה מהשני.

[dovid]

@shraga הקוד שלי נכשל באתרים האלו, תראה בקונסול שיש שגיאה.
אני לא יודע איך להתגבר על השגיאה הזו, מדובר בד"כ באתרים עם נורמות מודרניות יותר.

[שלום עולם 0]

@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמות

זה מצויין אם כן. עלי לשלב אותו עם הקוד של @NH-LOCAL.

@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

הקוד שלי נכשל באתרים האלו, תראה בקונסול שיש שגיאה.
אני לא יודע איך להתגבר על השגיאה הזו

נעשה עם try כך שיפעל רק איפה שזה לא מזיק.

[zvizvi]

לידיעה, בattr על תגי html אפשר לשים dir="auto" שמחשב לבד את הכיוון על פי התוכן [תחילת התוכן].
בcss רגיל זה לא קיים.
ועל זה הדרך ברגע שהוגדר dir=auto גם text-align: start בcss יתנהג בהתאם.

[שלום עולם 0]

@zvizvi כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

אפשר לשים dir="auto" שמחשב לבד את הכיוון על פי התוכן [תחילת התוכן].

הדפדפן באמת בודק את שפת התווים הראשונים?

[yossiz]

@שלום-עולם-0 למה אתה חושב ש @zvizvi יכתוב משהו לא אמיתי??

נ.ב. זה לא ממש מדוייק שהוא בודק את השפה, יותר מדוייק: הוא בודק את הכיוון
תקן יוניקוד מגדיר "כיוון" לכל תו, יש שלושה ערכים אפשריים: RTL, LTR, וניטרלי (למשל ? הוא תו ניטרלי, בתוך רצף של תווי LTR זה יתנהג כמו תו LTR ובתוך רצף של תווי RTL זה יתנהג כתו RTL)
הדפדפן קובע את כיוון התוכן לפי התו הראשון הלא ניטרלי

ע"ע

[שלום עולם 0]

@yossiz כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

@שלום-עולם-0 למה אתה חושב ש @zvizvi יכתוב משהו לא אמיתי??

זה הפתיע אותי ולכן רציתי לוודא, שמא

נ.ב. זה לא ממש מדוייק

[ש.ב.ח.]

@shraga כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

אולי כדאי לחפור בקוד מקור של edge החדש (אם הוא פתוח לציבור, אני לא מצאתי) או דרך הdeveloper tools ולהבין את הדרך באמצעותה הוא מיישם את הריטול (בשונה מכרום) במקרה של תרגום לעברית.

@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:

נ.ב. למה לא להשתמש בedge וזהו?

לצערי הedge גם לא מושלם.
באתרים בהם יש code בתוך הp וכדו'
כל הcode עובר לסוף הp. וזה ממש מטריד, אתה צריך בקריאה לפענח כל יחידת קוד לאיזה קטע בפסקה היא שייכת.

למשל, זה המקור:

וזה אחרי תרגום לעברית:

[dovid]

אני לא יודע איך מתגברים על הבעיה שנתקלתי בה,
של שגיאת CORS בCSS חיצוני.
למשל באתר של stackoverflow, הדבקת הקוד הזה:

document.styleSheets[0].cssRules

בקונסול, מביא שגיאה כזו:

caught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

אני לא מצליח אם כן לכתוב קוד שיתקן את הCSS בהתאם למצופה.

[שלום עולם 0]

העסק מתברר כמסובך משחשבתי.

[ש.ב.ח.]

בהקשר למה שהבאתי לעיל על edge

יותר נוח כבר להשתמש עם כרום ולהוסיף סקריפט שעובר על כל האלמנטים מלבד של קוד ומוסיף direction=rtl

[שלום עולם 0]

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

יותר נוח כבר להשתמש עם כרום ולהוסיף סקריפט שעובר על כל האלמנטים מלבד של קוד ומוסיף direction=rtl

בזה עוסק האשכול.

[ש.ב.ח.]

@שלום-עולם-0 אני משתמש עם התוסף הזה על אתרים שאני נכנס אליהם בדרך כלל
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
פשוט עובר על כל האלמנטים שאני מעוניין לסדר ומוסיף CSS מתאים.

למשל לאתר שהבאת בבעיה 2 הוספתי רק את

body{
  direction: rtl;
}

#menu {
  right: 0;
}

וזה כבר נראה מותאם...