Рекомендации по разработке для Right-To-Left режима

В bpm'online поддерживается режим отображения текстовой информации справа налево (Right-To-Left, RTL). Чтобы при разработке новой функциональности избежать ошибок отображения данных, необходимо придерживаться следующих рекомендаций.

1. Less-код должен быть написан правильно. Например, после значения CSS-свойства обязательно должна присутствовать точка с запятой.

2. Следует избегать определения стилей в JavaScript-коде. Если в коде все же нужно использовать стили, то для стилей margin, padding, border, float, text-align обязательно необходимо предусмотреть поведение для RTL-режима. Для этого можно использовать метод Terrasoft.getIsRtlMode():

var borderColorCSS = Terrasoft.getIsRtlMode() ? "border-right-color" :  "border-left-color";

3. При необходимости написать CSS-стиль только для режима RTL, его нужно "обернуть" тегом html c атрибутом dir="rtl":

html[dir="rtl"] {
  .links-container label {
    text-align: left;
  }
}

4. Для поворота изображения вокруг осей можно использовать less-функции rotateY(180g) и scaleX(-1):

html[dir="rtl"] {
  .links-container img {
    transform: rotateY(180g);
  }
}
...
html[dir="rtl"] {
  .links-container img {
    transform: scaleX(-1);
  }
}

5. Для стилей margin, padding и border нельзя применять сокращенную форму записи (например, margin: 1px 2px 0 0;). Пример правильного использования стилей:

html[dir="rtl"] {
  .myclass {
    margin-top: 1px;
    margin-right: 2px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 1px;
    padding-right: 0;
    padding-bottom: 1px;
    padding-left: 0;
    border-top-width: 2px;
    border-right-width: 10px;
    border-bottom-width: 4px;
    border-left-width: 20px;
  }
}

6. Если в обычном режиме (Left-to-Right) используется CSS-свойство transform: translate(-50%, -50%), то для RTL-режима нужно установить значение свойства transform: translate(50%, -50%):

html[dir="rtl"] {
  .links-container img {
    transform: translate(50%, -50%);
  }
}