RTLに対応していないテーマの例をご存知ですか？もしご存知でしたら、そのテーマのリンクをここに投稿してください。そうすれば、私の理論をテストし、テスト後に何が問題なのかを説明します。
編集：問題の説明を以下に示します。
DiscourseのコアコードベースにあるCSSファイルの場合、RTLのCSSは、サイトのレイアウトの方向によって異なるほとんどのCSSルールを「反転」させることによって作成されます。たとえば、padding-leftはpadding-rightに反転します。これは、RTLcss gem（https://github.com/discourse/rtlcss）によって行われます。
問題は、DiscourseのテーマではCSSルールが反転されないことです。つまり、テーマに方向を指定するCSSルールがある場合、RTL言語が使用されている場合とLTR言語が使用されている場合で方向は同じになります。これは軽微な例です。
height: calc(100vh - (var(--header-offset) + 80px));
@include box-shadow;
}
.sidebar-footer-wrapper {
background: var(--secondary);
}
}
body.has-sidebar-page {
#main-outlet-wrapper {
padding-left: 8px;
}
#main-outlet {
max-width: unset;
}
}
.desktop-view .sidebar-footer-wrapper .sidebar-footer-container::before {
background: linear-gradient(
to bottom,
transparent,
テーマがRTLインターフェイスで使用されると、padding-left: 8px;はpadding-right: 8px;に反転されません。これにより、配置に軽微な問題が発生します。テーマがRTL言語で使用される場合に発生する、より大きな問題の例もきっとあるはずです。
テーマエディタでデフォルトのDiscourseテーマに追加するCSSについても同様です。これは、このトピックのコードを使用した例です。Can it be done with CSS? Grouping categories on category page - #4 by cosdesign
以下は、そのCSSからのルールで、方向を設定しています。
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);
}
RTLロケールの場合、問題は次のとおりです。
そのルールがコアDiscourseのCSSファイルにあった場合、RTL言語が選択されるとleft: 0;は自動的にright: 0;に変換されます。CSSはテーマに追加されるため、手動で次のように編集する必要があります。
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
position: absolute;
top: -35px;
right: 0; // RTLレイアウトの適切な位置に変更されました
font-weight: bold;
font-size: 15px;
text-transform: uppercase;
color: var(--primary-medium);
}
Discourseは、RTLレイアウトが使用されている場合にhtmlタグにrtlクラスを追加します。テーマ開発者はこのクラスを使用して、テーマをLTRおよびRTLレイアウトの両方で機能させることができます。これは機能し、正しいと思いますが、おそらくleft: autoの宣言は不要かもしれません。
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);
}
/* RTLレイアウトの配置を修正 */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
right: 0;
left: auto;
}
開発者はテーマでこのアプローチを取るべきかどうかはわかりません。時間がかかり、エラーやメンテナンスの問題につながる可能性があります。おそらくDiscourseは、いくつかのテーマをコンパイルしてRTLバージョンを提供することを検討できるでしょう。これらのアプローチのいくつかを使用してテストする価値があるかもしれません。
require "rtlcss"
Rtlcss.flip_css("theme_css")
これは短い回答になるはずでした
ですが、誰かの役に立つかもしれません。注意点として以下を挙げます：
私が書いたことが正しく、他のトピックで対処されていない場合、新しいトピックに移動すべきかもしれません。