Обработка направленного поля и отступов при изменении направления

Question

При изменении атрибута html dir с ltr на rtl все направленные поля и отступы необходимо поменять местами:

[dir='ltr'] {
  margin-left: 80px;
}

[dir='rtl'] {
  margin-right: 80px;
}

Есть ли другой лучший подход?

Answer 1

Если вы уверены, что вам нужно отменить каждый экземпляр, например, margin, и вы используете какой-то препроцессор css, такой как sass.Вы можете создать следующий миксин:

@mixin horizontal-margin($left: initial, $right: initial) {
  &[dir="ltr"] {
    margin-left: $left;
    margin-right: $right
  }

  &[dir="rtl"] {
    margin-right: $right;
    margin-right: $left;
  }
}

, а затем использовать его следующим образом:

p { background: blue; @include horizontal-margin(16px, 48px); }

и в своем HTML <p dir="ltr"> some text</p>

Надеюсь, это поможет.