/* ====================================================================== RTL — зеркальные правки для языков с письмом справа налево Подключается роутером только когда (сейчас это арабский). Все правила ограничены селектором [dir="rtl"], поэтому файл безвреден, даже если попадёт на страницу LTR. Основная вёрстка описана физическими свойствами (padding-left, left, float), логических тут нет вовсе — поэтому переопределяем адресно те правила, которые определяют направление чтения и сторону колонок. ====================================================================== */ [dir="rtl"] body { text-align: right; } /* --- боковая колонка: слева -> справа --------------------------------- */ [dir="rtl"] .aside_fixed { left: auto; right: 50%; margin-left: 0; margin-right: -960px; } [dir="rtl"] .aside_fixed::before, [dir="rtl"] .aside_bottom::before { right: auto; left: 100%; } [dir="rtl"] .aside_nav .menuItem { padding-left: 0; padding-right: var(--spacing-md); border-left: none; border-right: 2px solid var(--color-accent-2); } /* --- шапка ------------------------------------------------------------ */ [dir="rtl"] .header .logo { margin-right: 20px; margin-left: auto; padding-right: 0; padding-left: 20px; } [dir="rtl"] .language-switcher { margin-right: auto; margin-left: 20px; } [dir="rtl"] .language-switcher .lang-menu { right: auto; left: 0; } /* --- текст статьи ------------------------------------------------------ */ [dir="rtl"] .single ol { margin-left: 0; margin-right: 20px; } [dir="rtl"] .single ul li { padding-left: 0; padding-right: 25px; } [dir="rtl"] .single ul li::after { left: auto; right: 0; } [dir="rtl"] .content-table thead th, [dir="rtl"] .content-table td { text-align: right; } /* --- аккордеон FAQ ----------------------------------------------------- */ [dir="rtl"] .faq_item h3 { padding-right: 0; padding-left: var(--spacing-md); } [dir="rtl"] .faq_item h3::after { right: auto; left: 0; } /* --- кнопка над первым экраном ----------------------------------------- */ [dir="rtl"] .top_button { margin-left: 0; margin-right: 133px; } /* --- мобильная раскладка ----------------------------------------------- */ @media (max-width: 1200px) { [dir="rtl"] .aside_fixed { left: auto; right: 0; margin-right: 0; } [dir="rtl"] .div_article { padding-left: 0; padding-right: var(--aside-width); } } /* Числа, суммы и латинские названия внутри арабского абзаца остаются слева направо сами по себе — это делает алгоритм Unicode. Но парные скобки и знаки вокруг латиницы он разворачивает по контексту, поэтому короткие латинские вставки помечаем в разметке span'ом. */ [dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }