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

Conosci un esempio di tema che non funziona con RTL? Se sì, pubblica qui un link al tema e testerò la mia teoria e spiegherò cosa sta andando storto dopo averlo testato.

Modifica: Ecco una spiegazione del problema:

Per i file CSS nel codice principale di Discourse, il CSS RTL viene creato “invertendo” la maggior parte delle regole CSS che dipendono dalla direzione del layout del sito. Ad esempio, padding-left viene invertito in padding-right. Questo viene fatto con la gemma RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

Il problema è che i temi di Discourse non hanno le loro regole CSS invertite. Ciò significa che se un tema ha regole CSS che specificano una direzione, la direzione sarà la stessa quando viene utilizzata una lingua RTL rispetto a quando viene utilizzata una lingua LTR. Ecco un piccolo esempio:

Quando il tema viene utilizzato con un’interfaccia RTL, padding-left: 8px; non viene invertito in padding-right: 8px;. Questo causa un piccolo problema di allineamento. Sono sicuro che ci sono esempi di problemi più grandi che si verificano quando i temi vengono utilizzati con una lingua RTL.

Lo stesso vale per qualsiasi CSS che aggiungi a un tema Discourse predefinito nell’editor del tema. Ecco un esempio che utilizza il codice di questo argomento: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Ecco una regola da quel CSS che imposta una direzione:

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

Con una localizzazione RTL, questo è il problema:

Se quella regola fosse in un file CSS principale di Discourse, left: 0; verrebbe automaticamente convertito in right: 0; quando viene selezionata una lingua RTL. Poiché il CSS viene aggiunto a un tema, è necessario modificarlo manualmente in questo modo:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // cambiato nella posizione corretta per i layout RTL
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Discourse aggiunge una classe rtl al tag html quando viene utilizzato un layout RTL. Gli sviluppatori di temi potrebbero utilizzare questa classe per far funzionare i loro temi sia per i layout LTR che RTL. Questo funziona, e penso sia corretto, ma forse la dichiarazione left: auto non è necessaria.

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);
}
/* Corregge il posizionamento per i layout rtl */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Non sono sicuro se gli sviluppatori debbano adottare questo approccio con i loro temi. Richiede tempo e potrebbe portare a errori e problemi di manutenzione. Forse Discourse potrebbe compilare alcuni temi, o considerare di fornire una versione RTL. Potrebbe valere la pena testare questo approccio con alcuni di essi:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Questa doveva essere una risposta breve :slight_smile: Se quello che ho scritto è corretto e non è stato trattato in un altro argomento, forse dovrebbe essere spostato in un nuovo argomento.