שתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים
-
הסימניה הזו של @יוסף-בן-שמעון, שכבר נפוצו לה כמה גרסאות, מכילה סקריפט שעובר על כל האלמנטים בHTML ומתקן את הdirection שלהם ל"rtl", מה שמאוד עוזר לדפים המתורגמים מאנגלית.
הבעיה, שיש לו כמה חסרונות:
-
הוא הופך את כיוון הטקסט גם באלמנטים שגוגל השאיר באנגלית (לרוב בצדק), כמו גושי קוד ועוד. ועל אף שכבר העירו שכדאי לסנן החוצה אלמנטי preו- code, זה עדיין לא מכסה את כל המקרים.
-
מלבד היפוך הטקסט עצמו, יש גם הנושא של היפוך כיוון האלמנטים עצמם. בדרך כלל זה רצוי (כנראה אי אפשר באמת לבנות את הסקריפט כך שהוא יעשה זאת רק כשצריך), אבל לפעמים זה עושה בעיות. לדוגמא באתר הזה, היישור דופק לגמרי את העמוד.
-
יש דפים שהקוד פשוט לא עובד עבורם. כך למשל גיליתי (למרבה התימה!) שמאפיין ה"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);
*שוב בעיית יישור
-
-
@שלום-עולם-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); })();
-
אולי כדאי לחפור בקוד מקור של edge החדש (אם הוא פתוח לציבור, אני לא מצאתי) או דרך הdeveloper tools ולהבין את הדרך באמצעותה הוא מיישם את הריטול (בשונה מכרום) במקרה של תרגום לעברית.
-
יש ספריה מפורסמת 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 וזהו?
-
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
נ.ב. למה לא להשתמש בedge וזהו?
התרגלתי לכרום, השאלה הטעונה איזה דפדפן עדיף היא נושא לאשכול מפלצתי נפרד.
-
@NH-LOCAL כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
{text-align: right; direction: rtl;}
לא צריך גם
dir="rtl"
?
-
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
function toogleLeftRight
אתה לא קורא לפונקציה הזו.
-
@שלום-עולם-0 ערכתי.
-
@dovid לאחר העיון אני לא מצליח להבין מה הקוד שלך מחדש.
-
@שלום-עולם-0 לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמות, אם תעיר לי מקומות שפציפיים שהקוד לא מסדר טוב אשמח לשפרו. -
באתר הזה לדוגמא
https://mrcoles.com/bookmarklet/בסקריפט שלך הטקסט מיושר מימין לשמאל (בשונה מהסקריפט השני), אבל הטקסט עצמו בשילוב אנגלית לא מופיע תקין (בשונה מהשני בו הטקסט עצמו מופיע תקין אבל מיושר לשמאל).
בנוסף, באתר הזה
https://sandbox.self.li/bookmarklet-to-extension/
הסקריפט שלך לא משנה שום דבר בשונה מהשני. -
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמותזה מצויין אם כן. עלי לשלב אותו עם הקוד של @NH-LOCAL.
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
הקוד שלי נכשל באתרים האלו, תראה בקונסול שיש שגיאה.
אני לא יודע איך להתגבר על השגיאה הזונעשה עם try כך שיפעל רק איפה שזה לא מזיק.
-
לידיעה, בattr על תגי html אפשר לשים
dir="auto"
שמחשב לבד את הכיוון על פי התוכן [תחילת התוכן].
בcss רגיל זה לא קיים.
ועל זה הדרך ברגע שהוגדר dir=auto גםtext-align: start
בcss יתנהג בהתאם. -
@zvizvi כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
אפשר לשים dir="auto" שמחשב לבד את הכיוון על פי התוכן [תחילת התוכן].
הדפדפן באמת בודק את שפת התווים הראשונים?
-
@שלום-עולם-0 למה אתה חושב ש @zvizvi יכתוב משהו לא אמיתי??
נ.ב. זה לא ממש מדוייק שהוא בודק את השפה, יותר מדוייק: הוא בודק את הכיוון
תקן יוניקוד מגדיר "כיוון" לכל תו, יש שלושה ערכים אפשריים: RTL, LTR, וניטרלי (למשל?
הוא תו ניטרלי, בתוך רצף של תווי LTR זה יתנהג כמו תו LTR ובתוך רצף של תווי RTL זה יתנהג כתו RTL)
הדפדפן קובע את כיוון התוכן לפי התו הראשון הלא ניטרלי -
@yossiz כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
@שלום-עולם-0 למה אתה חושב ש @zvizvi יכתוב משהו לא אמיתי??
זה הפתיע אותי ולכן רציתי לוודא, שמא
נ.ב. זה לא ממש מדוייק
-
@shraga כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
אולי כדאי לחפור בקוד מקור של edge החדש (אם הוא פתוח לציבור, אני לא מצאתי) או דרך הdeveloper tools ולהבין את הדרך באמצעותה הוא מיישם את הריטול (בשונה מכרום) במקרה של תרגום לעברית.
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
נ.ב. למה לא להשתמש בedge וזהו?
לצערי הedge גם לא מושלם.
באתרים בהם יש code בתוך הp וכדו'
כל הcode עובר לסוף הp. וזה ממש מטריד, אתה צריך בקריאה לפענח כל יחידת קוד לאיזה קטע בפסקה היא שייכת. -
אני לא יודע איך מתגברים על הבעיה שנתקלתי בה,
של שגיאת CORS בCSS חיצוני.
למשל באתר של stackoverflow, הדבקת הקוד הזה:document.styleSheets[0].cssRules
בקונסול, מביא שגיאה כזו:
caught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
אני לא מצליח אם כן לכתוב קוד שיתקן את הCSS בהתאם למצופה.
-
העסק מתברר כמסובך משחשבתי.
-
@ש-ב-ח כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
יותר נוח כבר להשתמש עם כרום ולהוסיף סקריפט שעובר על כל האלמנטים מלבד של קוד ומוסיף direction=rtl
בזה עוסק האשכול.
-
@שלום-עולם-0 אני משתמש עם התוסף הזה על אתרים שאני נכנס אליהם בדרך כלל
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
פשוט עובר על כל האלמנטים שאני מעוניין לסדר ומוסיף CSS מתאים.למשל לאתר שהבאת בבעיה 2 הוספתי רק את
body{ direction: rtl; } #menu { right: 0; }
וזה כבר נראה מותאם...
-
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
אם תעיר לי מקומות שפציפיים שהקוד לא מסדר טוב אשמח לשפרו.
באתר הזה הוא מסיע רק את הדפדפן הצידי של נטפרי (שלשת הנקודות המפורסמות)
-
-
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
אני לא יודע איך מתגברים על הבעיה שנתקלתי בה,
של שגיאת CORS בCSS חיצוני.אפשר לפרסר עצמאית את הCSS לכדי Rules וכדומה.