Can it be done with CSS? Grouping categories on category page

Kennen Sie ein Beispiel für ein Theme, das nicht mit RTL funktioniert? Wenn ja, posten Sie hier einen Link zum Theme und ich werde meine Theorie testen und erklären, was schief läuft, nachdem ich es getestet habe.

Bearbeiten: Hier ist eine Erklärung des Problems:

Für die CSS-Dateien im Haupt-Discourse-Codebase wird das RTL-CSS erstellt, indem die meisten CSS-Regeln, die von der Ausrichtung des Layouts der Website abhängen, “gespiegelt” werden. Zum Beispiel wird padding-left zu padding-right gespiegelt. Dies geschieht mit dem RTLcss-Gem: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

Das Problem ist, dass Discourse-Themes ihre CSS-Regeln nicht spiegeln. Das bedeutet, dass, wenn ein Theme CSS-Regeln hat, die eine Richtung angeben, die Richtung dieselbe ist, wenn eine RTL-Sprache verwendet wird, wie wenn eine LTR-Sprache verwendet wird. Hier ist ein kleines Beispiel dafür:

Wenn das Theme mit einer RTL-Oberfläche verwendet wird, wird padding-left: 8px; nicht zu padding-right: 8px; gespiegelt. Dies verursacht ein kleines Problem mit der Ausrichtung. Ich bin sicher, dass es Beispiele für größere Probleme gibt, wenn Themes mit einer RTL-Sprache verwendet werden.

Dasselbe gilt für jedes CSS, das Sie im Theme-Editor zu einem Standard-Discourse-Theme hinzufügen. Hier ist ein Beispiel, das den Code aus diesem Thema verwendet: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Hier ist eine Regel aus diesem CSS, die eine Richtung festlegt:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // this needs to be changed
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Mit einem RTL-Locale ist dies das Problem:

Wenn diese Regel in einer Kern-Discourse-CSS-Datei wäre, würde left: 0; automatisch in right: 0; konvertiert werden, wenn eine RTL-Sprache ausgewählt wird. Da das CSS zu einem Theme hinzugefügt wird, müssen Sie es manuell wie folgt bearbeiten:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // changed to the proper position for RTL layouts
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Discourse fügt dem html-Tag eine rtl-Klasse hinzu, wenn ein RTL-Layout verwendet wird. Theme-Entwickler könnten diese Klasse verwenden, um ihre Themes sowohl für LTR- als auch für RTL-Layouts funktionsfähig zu machen. Dies funktioniert, und ich denke, es ist richtig, aber möglicherweise muss die Deklaration left: auto nicht vorhanden sein.

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Fix positioning for rtl layouts */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Ich bin mir nicht sicher, ob Entwickler diesen Ansatz mit ihren Themes verfolgen sollten. Es ist zeitaufwendig und könnte zu Fehlern und Wartungsproblemen führen. Vielleicht könnte Discourse einige Themes kompilieren, die eine RTL-Version anbieten könnten. Es könnte sich lohnen, diesen Ansatz mit einigen davon zu testen:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Das sollte eine kurze Antwort sein :slight_smile: Wenn das, was ich geschrieben habe, korrekt ist und in einem anderen Thema noch nicht behandelt wurde, sollte es vielleicht in ein neues Thema verschoben werden.