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

[שלום עולם 0]

הסימניה הזו של @יוסף-בן-שמעון, שכבר נפוצו לה כמה גרסאות, מכילה סקריפט שעובר על כל האלמנטים בHTML ומתקן את הdirection שלהם ל"rtl", מה שמאוד עוזר לדפים המתורגמים מאנגלית.

הבעיה, שיש לו כמה חסרונות:

1. הוא הופך את כיוון הטקסט גם באלמנטים שגוגל השאיר באנגלית (לרוב בצדק), כמו גושי קוד ועוד. ועל אף שכבר העירו שכדאי לסנן החוצה אלמנטי preו- code, זה עדיין לא מכסה את כל המקרים.

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

3. יש דפים שהקוד פשוט לא עובד עבורם. כך למשל גיליתי (למרבה התימה!) שמאפיין ה"CSS "textAlign* רלוונטי לזה. אך בדפים אחרים, גם אחרי שבכל האלמנטים מוגדר

dir="rtl"
style{
direction: rtl;
text-align: right;
}

הכיוויות נשארת LTR. כנראה זה תלוי במאפייני CSS נוספים שאני לא מכיר.

אז למעיישה, אני מבקש מחברי הפורום הבקיאים בHTML וCSS, שישתפו מידע הרלוונטי לפיתוח סקריפט שיפתור את בעיות היישור הכי טוב שאפשר: איך לזהות אלמנטים שאסור להפוך את יישורם? אלו מאפיינים משפיעים על יישור הטקסט? והמסתעף.

---

מצורף הקוד החלקי והבלתי הקריא שלי נכון לעכשיו (הוא נכתב טלאי ע"ג טלאי אז תסלחו על הבלגן):

javascript: (function() {
  var elements = document.getElementsByTagName("*");
  for (e of elements) {
    if (!e.style) continue;
    if (!e.style.direction || e.style.direction === 'ltr') {
      e.style.direction = 'rtl';
      e.dir == "rtl";
    } else {
      e.style.direction = 'ltr';
      e.dir == "ltr"
    }
  }
})();

function yshur(elem) {
  elem.dir = "ltr";
  elem.style.direction = "ltr";
  elem.style.textAlign = "right";
  var elemchildren = Array.from(elem.getElementsByTagName("*"));
  if (elemchildren[0] != undefined) elemchildren.forEach(yshur);
};
var pre = Array.from(document.getElementsByTagName("pre")),
  code = Array.from(document.getElementsByTagName("code"));
var ElementsArray = pre.concat(code).concat(Array.from(document?.querySelector(".Code") || []));
ElementsArray.forEach(yshur);

*שוב בעיית יישור

[NH.LOCAL]

@שלום-עולם-0 זה יותר טוב, אם כי זה לא מכיל את רכיב ה-IF, שמחזיר למצב ltr בלחיצה חוזרת על הסימנייה:

javascript:(function() {
  var css = "body, p, div, h1, h2, h3, h4, h5, h6, li, span {text-align: right; direction: rtl;}";
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);
})();

[shraga]

@NH-LOCAL

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

[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]

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