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
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.

