שתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים
-
יש ספריה מפורסמת 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 וזהו?
התרגלתי לכרום, השאלה הטעונה איזה דפדפן עדיף היא נושא לאשכול מפלצתי נפרד.
-
@שלום-עולם-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); })();@NH-LOCAL כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
{text-align: right; direction: rtl;}
לא צריך גם
dir="rtl"?
-
יש ספריה מפורסמת 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 לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
function toogleLeftRight
אתה לא קורא לפונקציה הזו.
-
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
function toogleLeftRight
אתה לא קורא לפונקציה הזו.
-
יש ספריה מפורסמת 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 לאחר העיון אני לא מצליח להבין מה הקוד שלך מחדש.
@שלום-עולם-0 לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמות, אם תעיר לי מקומות שפציפיים שהקוד לא מסדר טוב אשמח לשפרו.- מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
- בכל נושא אפשר ליצור קשר dovid@tchumim.com
-
@שלום-עולם-0 לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמות, אם תעיר לי מקומות שפציפיים שהקוד לא מסדר טוב אשמח לשפרו.באתר הזה לדוגמא
https://mrcoles.com/bookmarklet/עם הסקריפט שלך:
עם הסקריפט של יוסף בן שמעון
בסקריפט שלך הטקסט מיושר מימין לשמאל (בשונה מהסקריפט השני), אבל הטקסט עצמו בשילוב אנגלית לא מופיע תקין (בשונה מהשני בו הטקסט עצמו מופיע תקין אבל מיושר לשמאל).
בנוסף, באתר הזה
https://sandbox.self.li/bookmarklet-to-extension/
הסקריפט שלך לא משנה שום דבר בשונה מהשני.קונים בעלי אקספרס? התוסף שיעזור לכם ✅ למצוא את המחיר הכי זול למוצר בעלי אקספרס , ✅ לחפש כל מוצר שמצאתם באינטרנט ישירות בעלי , ✅ להשוות מחירים עם טימו 👈 התקינו חינם!⚡
-
באתר הזה לדוגמא
https://mrcoles.com/bookmarklet/עם הסקריפט שלך:
עם הסקריפט של יוסף בן שמעון
בסקריפט שלך הטקסט מיושר מימין לשמאל (בשונה מהסקריפט השני), אבל הטקסט עצמו בשילוב אנגלית לא מופיע תקין (בשונה מהשני בו הטקסט עצמו מופיע תקין אבל מיושר לשמאל).
בנוסף, באתר הזה
https://sandbox.self.li/bookmarklet-to-extension/
הסקריפט שלך לא משנה שום דבר בשונה מהשני. -
@שלום-עולם-0 לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמות, אם תעיר לי מקומות שפציפיים שהקוד לא מסדר טוב אשמח לשפרו.@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמותזה מצויין אם כן. עלי לשלב אותו עם הקוד של @NH-LOCAL.
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
הקוד שלי נכשל באתרים האלו, תראה בקונסול שיש שגיאה.
אני לא יודע איך להתגבר על השגיאה הזונעשה עם try כך שיפעל רק איפה שזה לא מזיק.
-
לידיעה, בattr על תגי html אפשר לשים
dir="auto"שמחשב לבד את הכיוון על פי התוכן [תחילת התוכן].
בcss רגיל זה לא קיים.
ועל זה הדרך ברגע שהוגדר dir=auto גםtext-align: startבcss יתנהג בהתאם.@zvizvi כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
אפשר לשים dir="auto" שמחשב לבד את הכיוון על פי התוכן [תחילת התוכן].
הדפדפן באמת בודק את שפת התווים הראשונים?
-
@zvizvi כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
אפשר לשים dir="auto" שמחשב לבד את הכיוון על פי התוכן [תחילת התוכן].
הדפדפן באמת בודק את שפת התווים הראשונים?
@שלום-עולם-0 למה אתה חושב ש @zvizvi יכתוב משהו לא אמיתי??
נ.ב. זה לא ממש מדוייק שהוא בודק את השפה, יותר מדוייק: הוא בודק את הכיוון
תקן יוניקוד מגדיר "כיוון" לכל תו, יש שלושה ערכים אפשריים: RTL, LTR, וניטרלי (למשל?הוא תו ניטרלי, בתוך רצף של תווי LTR זה יתנהג כמו תו LTR ובתוך רצף של תווי RTL זה יתנהג כתו RTL)
הדפדפן קובע את כיוון התוכן לפי התו הראשון הלא ניטרלי📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה
-
@שלום-עולם-0 למה אתה חושב ש @zvizvi יכתוב משהו לא אמיתי??
נ.ב. זה לא ממש מדוייק שהוא בודק את השפה, יותר מדוייק: הוא בודק את הכיוון
תקן יוניקוד מגדיר "כיוון" לכל תו, יש שלושה ערכים אפשריים: RTL, LTR, וניטרלי (למשל?הוא תו ניטרלי, בתוך רצף של תווי LTR זה יתנהג כמו תו LTR ובתוך רצף של תווי RTL זה יתנהג כתו RTL)
הדפדפן קובע את כיוון התוכן לפי התו הראשון הלא ניטרלי@yossiz כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
@שלום-עולם-0 למה אתה חושב ש @zvizvi יכתוב משהו לא אמיתי??
זה הפתיע אותי ולכן רציתי לוודא, שמא
נ.ב. זה לא ממש מדוייק
-
@NH-LOCAL
אולי כדאי לחפור בקוד מקור של edge החדש (אם הוא פתוח לציבור, אני לא מצאתי) או דרך הdeveloper tools ולהבין את הדרך באמצעותה הוא מיישם את הריטול (בשונה מכרום) במקרה של תרגום לעברית.
@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 בהתאם למצופה.
- מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
- בכל נושא אפשר ליצור קשר dovid@tchumim.com
-
העסק מתברר כמסובך משחשבתי.
-
@shraga כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
אולי כדאי לחפור בקוד מקור של edge החדש (אם הוא פתוח לציבור, אני לא מצאתי) או דרך הdeveloper tools ולהבין את הדרך באמצעותה הוא מיישם את הריטול (בשונה מכרום) במקרה של תרגום לעברית.
@dovid כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
נ.ב. למה לא להשתמש בedge וזהו?
לצערי הedge גם לא מושלם.
באתרים בהם יש code בתוך הp וכדו'
כל הcode עובר לסוף הp. וזה ממש מטריד, אתה צריך בקריאה לפענח כל יחידת קוד לאיזה קטע בפסקה היא שייכת.למשל, זה המקור:
וזה אחרי תרגום לעברית:
-
בהקשר למה שהבאתי לעיל על edge
יותר נוח כבר להשתמש עם כרום ולהוסיף סקריפט שעובר על כל האלמנטים מלבד של קוד ומוסיף direction=rtl
@ש-ב-ח כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
יותר נוח כבר להשתמש עם כרום ולהוסיף סקריפט שעובר על כל האלמנטים מלבד של קוד ומוסיף direction=rtl
בזה עוסק האשכול.
-
@ש-ב-ח כתב בשתפו מידע הנדרש לסקריפט יישור RTL לדפים מתורגמים, שיעבור בכמה שיותר מקרים:
יותר נוח כבר להשתמש עם כרום ולהוסיף סקריפט שעובר על כל האלמנטים מלבד של קוד ומוסיף direction=rtl
בזה עוסק האשכול.
@שלום-עולם-0 אני משתמש עם התוסף הזה על אתרים שאני נכנס אליהם בדרך כלל
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
פשוט עובר על כל האלמנטים שאני מעוניין לסדר ומוסיף CSS מתאים.למשל לאתר שהבאת בבעיה 2 הוספתי רק את
body{ direction: rtl; } #menu { right: 0; }וזה כבר נראה מותאם...
-
@שלום-עולם-0 לא בטוח שמחדש, ניסיתי לפתור את הבעיה (במקרה בדקתי על האתר שהבאת בבעיה 2 בהודעה הפותחת).
הקוד שלי לא מושלם אבל הוא לא רחוק משלמות, אם תעיר לי מקומות שפציפיים שהקוד לא מסדר טוב אשמח לשפרו.
