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

¿Conoces algún ejemplo de tema que no funcione con RTL? Si es así, publica un enlace al tema aquí y probaré mi teoría y explicaré qué está saliendo mal después de probarlo.

Editar: Aquí hay una explicación del problema:

Para los archivos CSS que se encuentran en la base de código principal de Discourse, el CSS RTL se crea “invirtiendo” la mayoría de las reglas CSS que dependen de la dirección del diseño del sitio. Por ejemplo, padding-left se invierte a padding-right. Esto se hace con la gema RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

El problema es que las reglas CSS de los temas de Discourse no se invierten. Eso significa que si un tema tiene reglas CSS que especifican una dirección, la dirección será la misma cuando se use un idioma RTL que cuando se use un idioma LTR. Aquí hay un pequeño ejemplo de eso:

Cuando se usa el tema con una interfaz RTL, padding-left: 8px; no se invierte a padding-right: 8px;. Esto causa un problema menor con la alineación. Estoy seguro de que hay ejemplos de problemas mayores que ocurren cuando los temas se usan con un idioma RTL.

Lo mismo ocurre con cualquier CSS que agregues a un tema predeterminado de Discourse en el editor de temas. Aquí hay un ejemplo que usa el código de este tema: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Aquí hay una regla de ese CSS que establece una dirección:

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

Con una configuración regional RTL, este es el problema:

Si esa regla estuviera en un archivo CSS principal de Discourse, left: 0; se convertiría automáticamente en right: 0; cuando se seleccionara un idioma RTL. Debido a que el CSS se agrega a un tema, debe editarlo manualmente de la siguiente manera:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // cambiado a la posición correcta para diseños RTL
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Discourse agrega una clase rtl a la etiqueta html cuando se usa un diseño RTL. Los desarrolladores de temas podrían usar esta clase para hacer que sus temas funcionen tanto para diseños LTR como RTL. Esto funciona, y creo que es correcto, pero posiblemente la declaración left: auto no necesite estar allí.

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);
}
/* Corrige el posicionamiento para diseños rtl */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

No estoy seguro de si los desarrolladores deberían adoptar este enfoque con sus temas. Consume tiempo y podría generar errores y problemas de mantenimiento. Quizás Discourse podría compilar algunos temas y considerar proporcionar una versión RTL. Podría valer la pena probar este enfoque con algunos de ellos:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Se suponía que esta sería una respuesta corta :slight_smile: Si lo que he escrito es correcto y no se ha abordado en otro tema, tal vez debería trasladarse a un nuevo tema.