# Can it be done with CSS? Grouping categories on category page
**URL:** https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433
**Category:** Development
**Created:** [24.Март.2019 02:34:40 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433 "2019-03-24T02:34:40Z")
**Posts on this page:** 1
**Showing post:** 13
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [21.Сентябрь.2023 04:55:04 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/13 "2023-09-21T04:55:04Z")
> [@inj3ct0r](#):
>
> Боюсь, я всё ещё запутался в использовании кода выше
Вы знаете пример темы, которая не работает с RTL? Если да, опубликуйте ссылку на тему здесь, и я проверю свою теорию, а затем объясню, что идёт не так после тестирования.
Редактирование: Вот объяснение проблемы:
Для CSS-файлов, входящих в основную кодовую базу Discourse, RTL-CSS создаётся путём «отражения» большинства правил CSS, зависящих от направления макета сайта. Например, `padding-left` преобразуется в `padding-right`. Это делается с помощью гема RTLcss: [GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby · GitHub](https://github.com/discourse/rtlcss).
Проблема заключается в том, что правила CSS тем Discourse не отражаются. Это означает, что если тема содержит правила CSS, задающие направление, это направление останется неизменным как при использовании RTL-языка, так и при использовании LTR-языка. Вот небольшой пример этого:
>
Когда тема используется с RTL-интерфейсом, `padding-left: 8px;` не преобразуется в `padding-right: 8px;`. Это вызывает небольшую проблему с выравниванием. Я уверен, что существуют примеры более серьёзных проблем, возникающих при использовании тем с RTL-языками.
То же самое относится к любому CSS, который вы добавляете в тему Discourse по умолчанию через редактор тем. Вот пример с использованием кода из этой темы: [Can it be done with CSS? Grouping categories on category page - #4 by cosdesign](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/4?u=simon).
Вот правило из этого CSS, задающее направление:
```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-локализации возникает следующая проблема:
Если бы это правило находилось в основном CSS-файле Discourse, `left: 0;` автоматически преобразовалось бы в `right: 0;` при выборе RTL-языка. Поскольку CSS добавляется в тему, вам нужно вручную изменить его следующим образом:
```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` не обязательно.
```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-макетов */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
right: 0;
left: auto;
}
```
Я не уверен, следует ли разработчикам использовать этот подход для своих тем. Это отнимает много времени и может привести к ошибкам и проблемам с обслуживанием. Возможно, Discourse могла бы компилировать некоторые темы или рассмотреть возможность предоставления версии для RTL. Возможно, стоит протестировать этот подход на нескольких из них:
```ruby
require "rtlcss"
Rtlcss.flip_css("theme_css")
```
Это должно было быть коротким ответом 🙂 Если то, что я написал, верно и ещё не обсуждалось в другой теме, возможно, его стоит переместить в новую тему.
---
_[View the full topic](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433)._