Изменить CSS на многоязычном веб-сайте

Я сделал сайт на двух языках, используя Angular 4 и ngx-translate, один rtl а другой ltr, Как я могу изменить направление текста и выравнивание текста при смене языка?

Я не могу использовать, потому что я не знаю, как изменить этот атрибут в угловых.

html:lang(en) h1{
    text-align: left;
}

В любом случае, я могу ориентироваться на каждый язык в style.css??

Источник

2 ответа

Решение

Что нужно изменить, чтобы преобразовать таблицу стилей слева направо в таблицу справа налево:

  • + Изменить html тег, так что становится <html dir="rtl">, Это устанавливает базовое направление для всего документа справа налево.

  • изменять margin значения, когда margin-left а также margin-right какого-то элемента не равны. То же самое относится и к padding,

  • Измените значения свойств позиции: left а также right, Например: left: 200px на каком-то элементе в ltr документ становится right: 200px в rtl документ.

После этого взгляните на страницу и посмотрите, нужны ли вам какие-либо дополнительные незначительные изменения, такие как box-shadow, text-shadow, так далее.

CSSJanus

Вы можете использовать CSSJanus, чтобы выполнить второй и третий шаги выше для вас. Тем не менее, вам нужно будет сделать <html> шагни сам.

Для дополнительной информации

Посетите эту страницу от W3C, которая отвечает на вопрос:

Как мне использовать атрибут dir и связанную разметку, чтобы установить направление текста для структурных элементов в HTML?

Источник

Если у вас есть разные файлы css для каждого языка. попробуй это.

      changeLanguage() {
if(use your condition here){
  document.documentElement.lang = 'ar';
  document.documentElement.dir = 'rtl';
  sessionStorage.setItem('lang','ar');
  let tag = document.getElementById("mainCss");//add id to link tag of your css file
  tag.setAttribute('href', "assets/css/styleAr.css");
}else{
  document.documentElement.lang = 'en';
  document.documentElement.dir = 'ltr';
  sessionStorage.setItem('lang','en');
  let tag = document.getElementById("mainCss");
  tag.setAttribute('href', "assets/css/style.css");
}


}
Источник
Другие вопросы по тегам