RTL nummerierte oder Aufzählungslisten sind defekt

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

Dieser Abschnitt sollte nummeriert sein, ist es aber nicht – vermutlich wegen schlechtem CSS.

Das Rendering ist auf dem Desktop etwas anders, aber immer noch fehlerhaft.

Ich werde versuchen, es auch hier zu demonstrieren. Ich weiß nicht, ob es von den Foreneinstellungen abhängt. Die folgenden Listen sind auf Englisch und Hebräisch identisch.

Nummeriert:

  1. Eins
  2. Zwei
    1. Zwei Punkt eins
    2. Zwei Punkt zwei
    3. Zwei Punkt drei
  3. Drei
    • Drei Aufzählungspunkt eins
    • Drei Aufzählungspunkt zwei

Aufzählung:

  • Aufzählungspunkt eins
  • Aufzählungspunkt zwei
    1. Aufzählungspunkt zwei Nummer eins
    2. Aufzählungspunkt zwei Nummer zwei
  • Aufzählungspunkt drei
    • Aufzählungspunkt drei Aufzählungspunkt eins
    • Aufzählungspunkt drei Aufzählungspunkt zwei

ממוספר:

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

פריטים:

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

Basierend auf der Vorschau – ja, es ist auch hier fehlerhaft. (Bearbeitung: Screenshot unten hinzugefügt)

2 „Gefällt mir“

Vorgeschlagene Korrektur:

1 „Gefällt mir“

Vielen Dank, ich hoffe, das wird akzeptiert! Ich habe auch eine Anfrage eröffnet, um diesen Patch direkt im OSM-Forum anzuwenden: Fix list CSS for RTL languages - This forum issues and requests - OpenStreetMap Community Forum

P.S. Es scheint, dass der Ersteller dieses Threads für mich automatisch ins Englische übersetzt wurde und ich keine Möglichkeit finde, das Original in der mobilen Benutzeroberfläche zu sehen. Was ist da los? Offensichtlich ist das Problem in diesem Fall nicht mehr sichtbar. Gut, dass ich diesen Screenshot früher gemacht habe!

Das mag richtig sein, Udi, aber ich glaube, diese Regel bezieht sich nur auf die Vorschau. Einiges davon könnte sogar ein Fehler im CSS-Reverser sein, den wir verwenden.

@Osama, hast du dazu Gedanken?

Ich bin sicher, dass wir das klären können, und priorisieren diesen Fehler.

Die vollständige Regel (siehe Zeile #92) lautet:

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

Sie gilt also auch für .cooked (und nicht nur für die Vorschau).

Dies könnte ein Fehler im Reverser sein, aber zukünftig sind start- und end-Eigenschaften die beste Lösung.

Udi

1 „Gefällt mir“

Sicher, ich habe zusammengefügt, lass mich wissen, wie es funktioniert?

Großartig!

1 „Gefällt mir“

Ich vermute, das Reverser wird nur angewendet, wenn die UI-Sprache auf Hebräisch/Arabisch usw. eingestellt ist. Das ist hier nicht der Fall. RTL-Text kann auch in Inhalten erscheinen, selbst wenn die UI-Sprache LTR ist.

Wie Udi erwähnt hat, ist es oft vorzuziehen, -inline-start/end anstelle von -left/right in Stylesheets zu verwenden und keinen fehleranfälligen Reverser zu benutzen. Dies würde sowohl für eingebettetes RTL (in Beitragsinhalten) als auch für Layout RTL (basierend auf gewählter UI-Sprache) korrekt funktionieren, und das nur mit einem einzigen Stylesheet. Vielleicht solltest du erwägen, darauf umzusteigen und rtlcss außer Dienst zu stellen. Aber natürlich musst du das nicht, wenn es kein echtes Problem zu lösen gibt.

1 „Gefällt mir“

Ja, ich stimme zu, wir sollten definitiv eine solide CSS-Stylesheet für gemischte Inhalte haben. Wenn Sie auf weitere Beispiele stoßen, die verbessert werden müssen, ist ein PR absolut willkommen :hugs:

1 „Gefällt mir“

@nat gute Idee, den Tag hinzuzufügen. Möglicherweise möchten Sie ihn auch hier hinzufügen: Wrong -> arrow direction in RTL text contexts (Ich kann ihn aus irgendeinem Grund nicht bearbeiten). Ich werde in diesem Thread in Kürze einige relevante Informationen posten (aber kurz gesagt, es ist immer noch ein viel größeres Unterfangen, als es sein müsste, und das, was ich in der Eröffnungsnachricht geschrieben habe, ist immer noch korrekt).

1 „Gefällt mir“

Ich habe ein wenig mit diesem KI-Artefakt herumgespielt, um mehr über diese Dinge zu erfahren:

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

Es sieht so aus, als gäbe es eine lange Liste von Änderungen und Mustern, die wir vornehmen müssten, um RTL-freundlicher zu werden.

Es ist eine interessante Sache, die man entwirren und den Leuten beibringen kann. Auch die Rand-Sachen sind sehr interessant.

1 „Gefällt mir“

Schön, dass Sie es interessant finden! Ich auch :slight_smile:

Ich möchte erwähnen, dass meiner Meinung nach -top und -bottom in Ordnung sind. Es ist extrem selten, dass -block-start und -block-end nicht entsprechend zugeordnet werden. Das sollte nur bei Verwendung des Top-To-Bottom-Layouts passieren. Ich persönlich habe überhaupt keine Erfahrung mit solchen Layouts und ich denke, die gesamte Website müsste wahrscheinlich neu gestaltet werden, um solche Layouts zu unterstützen, sodass diese einfachen CSS-Anpassungen nicht ausreichen würden. Aber ich kann mich auch irren, nehmen Sie mich nicht beim Wort!

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

1 „Gefällt mir“

Die Fragen, über die ich hier nachdenke, sind:

  • Ist es möglich, unseren CSS in einen Zustand zu bringen, in dem das RTL-CSS-Tool nicht mehr ausgeführt werden muss?
  • Ist das es wert?
  • Gibt es einen gesunden Zwischenzustand?

Komischerweise zeigt diese Seite ein weiteres häufiges Problem mit gemischten Richtungen – das Scrollen in die falsche Richtung:

Leider habe ich mich nie damit beschäftigt, daher kann ich Ihnen nicht sagen, was die Ursache ist und wie man es vermeidet.

1 „Gefällt mir“

[zitat=“sam, post:14, thema:367516, full:true”]
Die Fragen, die ich mir hier stelle, sind:

  • Ist es möglich, unseren CSS in einen Zustand zu versetzen, in dem das rtlcss-Ding nicht mehr ausgeführt werden muss?
  • Ist es das wert?
  • Gibt es einen gesunden Zwischenzustand?
    [/Zitat]

Ist es möglich – definitiv, aber es könnte erforderlich sein, einige Anpassungen im HTML vorzunehmen, damit sie mit CSS zusammenarbeiten (ich kann später Beispiele geben).

Gesunder Zwischenzustand – ich würde erwarten, dass wenn du nur einige Dinge auf -inline-start änderst, rtlcss diese ignoriert, aber -left weiterhin umwandelt. Das bedeutet, dass du schrittweise mehr Dinge umstellen kannst, bis rtlcss nichts mehr ändert. Zu diesem Zeitpunkt kann rtlcss außer Betrieb genommen werden.

Ist es das wert – keine Ahnung. Überlege, ob dies Discourse stabiler in RTL machen würde und ob es langfristig einfacher zu pflegen ist. Ich weiß es wirklich nicht.

Es ist definitiv es wert – vielleicht sogar notwendig – für CSS, das auf von Nutzern generierten Inhalten angewendet wird, die in beide Richtungen gehen können (meistens mit dir="auto").

Außerdem, während mir kein Beispiel auf Anhieb einfällt, möchte man manchmal tatsächlich die linke Eigenschaft eines Elements explizit setzen, unabhängig von der Layout-Richtung. In diesen Fällen würde rtlcss das Falsche tun, es sei denn, du hast Ausnahmen dafür gemacht.

1 „Gefällt mir“

Hier ist ein Beispiel: Fix display of RTL tag and role values in element info table by jake-low · Pull Request #790 · OSMCha/osmcha-frontend · GitHub

Die zusätzlichen <span>-Elemente innerhalb der <td>-Elemente sind notwendig, damit die Tabelle im gewünschten Layout gerendert wird. In einem RTL-Kontext befindet sich das ::before-Pseudoelement rechts. Wenn das td selbst RTL wäre, würde das Gleichheitszeichen, das Schlüssel und Wert trennt, stattdessen ganz am Ende (rechts) der Tabellenzeile stehen.

Grundsätzlich muss man manchmal ein zusätzliches Element verschachteln, um ihm eine andere Richtung als seinem übergeordneten Element zu geben. Aber das kann je nach Perspektive auch gut sein.

2 „Gefällt mir“

[Zitat=“sam, Beitrag:14, Thema:367516”]

  • Ist es möglich, unseren CSS-Zustand so zu gestalten, dass das rtlcss-Tool nicht mehr ausgeführt werden muss?
  • Ist es das wert?
  • Gibt es einen gesunden Zwischenzustand?
    [/quote]

Ich denke nicht, dass es den Aufwand wert wäre, alles zu aktualisieren und unseren CSS-Code in Kern, Plugins und Themes komplett umzuschreiben, nur um unsere Abhängigkeit von rtlcss zu entfernen. Ein gesunder Zwischen-Schritt könnte sein, inteilungsoffene CSS für Bereiche zu verwenden, die benutzergenerierte Inhalte wie Beiträge und Bios enthalten, und für alles andere wird rtlcss die Arbeit übernehmen.

3 „Gefällt mir“

Dieses Thema wurde nach 14 Stunden automatisch geschlossen. Neue Antworten sind nicht mehr erlaubt.