רשימות ממוספרות או עם תבליטים ב-RTL מקולקלות

Real world example: ההנחיות בוויקי לגבי שמות - ישראל (Israel) - OpenStreetMap Community Forum

This section should be numbered, but isn’t - presumably because of bad CSS.

Rendering is a bit different on desktop but still broken.

I’ll try to demonstrate it here too. I don’t know if it depends on forum settings. The following lists are identical in English and Hebrew.

Numbered:

  1. One
  2. Two
    1. Two point one
    2. Two point two
    3. Two point three
  3. Three
    • Three bullet one
    • Three bullet two

Bullet:

  • Bullet one
  • Bullet two
    1. Bullet two number one
    2. Bullet two number two
  • Bullet three
    • Bullet three bullet one
    • Bullet three bullet two

ממוספר:

  1. אחת
  2. שתיים
    1. שתיים נקודה אחת
    2. שתיים נקודה שתיים
    3. שתיים נקודה שלוש
  3. שלוש
    • שלוש פריט אחת
    • שלוש פריט שתיים

פריטים:

  • פריט אחת
  • פריט שתיים
    1. פריט שתיים מספר אחת
    2. פריט שתיים מספר שתיים
  • פריט שלוש
    • פריט שלוש פריט אחת
    • פריט שלוש פריט שתיים

Based on the preview - yup, it’s broken here too. (Edit: added a screenshot below)

2 לייקים

Suggested fix:

לייק 1

Thank you, I hope this gets accepted! I’ve opened a request to apply this patch to the OSM forum directly too: Fix list CSS for RTL languages - 🐞 This forum issues and requests - OpenStreetMap Community Forum

P.S. it seems the OP of this thread was automatically translated to English for me and I can’t find a way to see the original in the mobile UI. What’s going on there? Obviously the issue is no longer visible in this case. Good thing I caught that screenshot earlier!

This may be correct Udi, but I think that rule is just about the preview. some of this might even be a bug in the CSS revereser we use.

@Osama any thoughts on this one?

I am sure we can get this sorted, prioritizing this bug.

The complete rule (see line #92) is:

.cooked,
.d-editor-preview {
  ul,
  ol {
     ...
  }
}

so it applies to .cooked as well (and not only to the preview).

This might be a bug in the reverser, but going forward, start and end properties are the best solution.

Udi

לייק 1

בטח, מיזגתי, תן לי לדעת איך זה עובד?

Great!

לייק 1

אני מניח שההיפוך משמש רק כאשר שפת הממשק מוגדרת לעברית/ערבית וכו’, וזה לא המקרה כאן. טקסט מימין לשמאל יכול להופיע בתוכן גם כאשר שפת הממשק היא משמאל לימין.

כפי שמודי הזכיר, לעיתים עדיף להשתמש ב--inline-start/end במקום ב--left/right בגליונות הסטייל, ולא להשתמש בהיפוך שיש בו סיכון לטעויות. זה יעבוד כראוי הן ל-RTL מוטמע (בתוך תוכן הפוסטים) והן ל-RTL במבנה (מבוסס על שפת הממשק שנבחרה), עם גיליון סגנונות אחד בלבד. אולי תרצה לשקול לעבור לשיטה זו ולפרוש את rtlcss. אך כמובן, אין חובה לעשות זאת אם אין בעיה ממשית שצריך לפתור.

לייק 1

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

לייק 1

@nat good idea adding the tag. Might want to add it here as well: Wrong -> arrow direction in RTL text contexts (I can’t edit it for some reason). I’ll post some relevant info in that thread in a second (but in short, it’s still a much bigger undertaking than it needs to be, and what I wrote in the OP is still correct).

לייק 1

I was playing a bit with this ai artifact to learn about this stuff:

https://meta.discourse.org/discourse-ai/ai-bot/artifacts/248/2

looks like there is a long list of changes and patterns we would need to make to be more RTL friendly.

It is an interesting one to untangle and teach people about. The border stuff is very interesting as well.

לייק 1

Glad you find it interesting! I do as well :slight_smile:

I’ll mention that AFAIK -top and -bottom are fine. It’s extremely rare for -block-start and -block-end to not be mapped to them respectively, that should only happen when using Top-To-Bottom layout. I personally have no experience with such layouts at all, and I think the entire website would probably need to be redesigned to accommodate such layouts, so these simple CSS tweaks wouldn’t cut it. But by all means I might be wrong, don’t take my word for it!

Edit: https://stackoverflow.com/questions/510068/how-do-i-make-text-run-top-to-bottom-in-css#53576895

לייק 1

השאלות שאני חושב עליהן כאן הם:

  • האם אפשר להביא את ה-CSS שלנו למצב שבו אין עוד צורך להריץ את ה-rtlcss?
  • האם זה שווה את ההשקעה?
  • האם יש מצב ביניים בריא?

Funnily enough, this page demonstrates another common issue with mixed directions - scrolling the wrong way:

Unfortunately I never looked into this so I can’t tell you what causes it and how to avoid it.

לייק 1

השאלות שאני חושב עליהן כאן הן:

  • האם זה אפשרי לקבל את ה-CSS שלנו למצב שבו לא צריך להריץ עוד את rtlcss?
  • האם זה שווה את המאמץ?
  • האם יש מצב ביניים בריא?

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

מצב ביניים בריא — אני מצפה שאם תשתנה רק כמה דברים ל--inline-start, אז rtlcss יתעלם מהם, אך ימשיך להמיר -left. זה אומר שתוכל להחליף בהדרגה יותר ויותר דברים עד ש-rtlcss לא ישנה דבר. בשלב זה, rtlcss יכול להיות מפוסל.

האם זה שווה את המאמץ — אין לי מושג. שקול האם זה יהפוך את Discourse ליציב יותר ב-RTL, והאם יהיה קל יותר לתחזק את זה לטווח הארוך. אני באמת לא יודע.

זה בדיוק שווה את זה — אולי זה נדרש — עבור CSS שמוחל על תוכן שנוצר על ידי משתמשים ויכול להיות מיושר בכיוונים שונים (בדרך כלל עם dir="auto").

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

לייק 1

Here’s an example: Fix display of RTL tag and role values in element info table by jake-low · Pull Request #790 · OSMCha/osmcha-frontend · GitHub

The additional <span> elements inside the <td> elements are necessary to make the table render in the desired layout. In an RTL context, the ::before pseudo-element comes at the right, so if the td itself were RTL then the = sign separating the key and value would instead come at the very end (right side) of the table row.

Basically sometimes you need to nest an extra element to give it a separate direction from its parent. But this might be a good thing depending on your perspective.

2 לייקים

[ציטוט=“sam, post:14, topic:367516”]

  • האם אפשר להגיע למצב שבו ה-CSS שלנו לא צריך עוד להריץ את rtlcss?
  • האם זה שווה את המאמץ?
  • האם יש מצב ביניים בריא?
    [/ציטוט]

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

3 לייקים

נושא זה נסגר אוטומטית לאחר 14 שעות. אין תגובות חדשות עוד אפשריות.