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

RTLに対応していないテーマの例をご存知ですか?もしご存知でしたら、そのテーマのリンクをここに投稿してください。そうすれば、私の理論をテストし、テスト後に何が問題なのかを説明します。

編集:問題の説明を以下に示します。

DiscourseのコアコードベースにあるCSSファイルの場合、RTLのCSSは、サイトのレイアウトの方向によって異なるほとんどのCSSルールを「反転」させることによって作成されます。たとえば、padding-leftpadding-rightに反転します。これは、RTLcss gem(https://github.com/discourse/rtlcss)によって行われます。

問題は、DiscourseのテーマではCSSルールが反転されないことです。つまり、テーマに方向を指定するCSSルールがある場合、RTL言語が使用されている場合とLTR言語が使用されている場合で方向は同じになります。これは軽微な例です。

テーマが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")

これは短い回答になるはずでした :slight_smile: 私が書いたことが正しく、他のトピックで対処されていない場合、新しいトピックに移動すべきかもしれません。