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

Você conhece algum exemplo de tema que não funcione com RTL? Se sim, poste um link para o tema aqui e eu testarei minha teoria e explicarei o que está dando errado após o teste.

Editar: Aqui está uma explicação do problema:

Para os arquivos CSS que estão na base de código principal do Discourse, o CSS RTL é criado “invertendo” a maioria das regras CSS que dependem da direção do layout do site. Por exemplo, padding-left é invertido para padding-right. Isso é feito com a gema RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

O problema é que os temas do Discourse não têm suas regras CSS invertidas. Isso significa que, se um tema tiver regras CSS que especificam uma direção, a direção será a mesma quando um idioma RTL for usado como quando um idioma LTR é usado. Aqui está um pequeno exemplo disso:

Quando o tema é usado com uma interface RTL, padding-left: 8px; não está sendo invertido para padding-right: 8px;. Isso causa um pequeno problema de alinhamento. Tenho certeza de que existem exemplos de problemas maiores que ocorrem quando temas são usados com um idioma RTL.

O mesmo vale para qualquer CSS que você adicione a um tema padrão do Discourse no editor de temas. Aqui está um exemplo usando o código deste tópico: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Aqui está uma regra desse CSS que define uma direção:

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

Com uma localidade RTL, este é o problema:

Se essa regra estivesse em um arquivo CSS principal do Discourse, left: 0; seria automaticamente convertido para right: 0; quando um idioma RTL fosse selecionado. Como o CSS é adicionado a um tema, você precisa editá-lo manualmente para:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // alterado para a posição correta para layouts RTL
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

O Discourse adiciona uma classe rtl à tag html quando um layout RTL é usado. Os desenvolvedores de temas poderiam usar essa classe para fazer seus temas funcionarem tanto para layouts LTR quanto RTL. Isso funciona, e eu acho que está correto, mas possivelmente a declaração left: auto não precisa estar lá.

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 o posicionamento para layouts rtl */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Não tenho certeza se os desenvolvedores devem adotar essa abordagem com seus temas. É demorado e pode levar a erros e problemas de manutenção. Talvez o Discourse pudesse compilar alguns temas e considerar fornecer uma versão RTL. Pode valer a pena testar essa abordagem com alguns deles:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Isso deveria ser uma resposta curta :slight_smile: Se o que escrevi estiver correto e não tiver sido tratado em outro tópico, talvez deva ser movido para um novo tópico.