Конвертация LTR в RTL

Question

Я разработал приложение в angular и готово, которое включает ок. 80 модулей. Теперь мне нужно преобразовать язык в арабский c, который является RTL. Я использовал S CSS как библиотеку CSS. Есть ли простой способ преобразовать мое приложение LTR в RTL, потому что многие стили влияют на использование direction = rtl;

Я не хочу конвертировать все файлы .s css в модуле.

Answer 1

Я использую css логические свойства , которые должны поддерживаться в большинстве браузеров.

Вместо использования margin-left вы пишете margin-inline-start.

Замечательно то, что если вы используете postcss с postcss-preset-env, вы просто можете использовать новый синтаксис, он преобразует его в css, который поддерживается всеми браузерами на основе dir атрибут.

Например:

// some.css
.my-class {
  float: inline-start;
  margin-inline-start: 10px;
}

будет получено

// some.output.css
[dir="ltr"] .my-class {
  float: left
}
[dir="rtl"] .my-class {
  float: right
}
[dir="ltr"] .my-class {
  margin-left: 10px 
}
[dir="rtl"] .my-class {
  margin-right: 10px
}

С этим выводом css вы можете просто установить атрибут dir для вы html элемент на rtl, и браузер будет использовать правильные стили.

Я использую этот подход в большой базе кода, он работает как шарм.

Другой подход заключается в использовании rtl- css, , который является инструментом, который создает новые файлы css с перевернутыми направлениями. Также есть несколько плагинов для веб-пакетов, например rtl css -webpack-plugin