Development recommendations for Right-To-Left mode

The bpm'online supports displaying text information in Right-To-Left (RTL) mode. Follow these recommendations while developing new functionality to avoid errors in data displaying.

1. Less-code must be written correctly. For example, there must be a semicolon after the value of the CSS property.

2. Avoid defining styles in JavaScript code. If the styles are required, then for the margin, padding, border, float and text-align styles it is necessary to provide behavior for RTL-mode. For this, use the Terrasoft.getIsRtlMode() method:

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

3. If the CSS style is required only for the RTL mode, it must be “wrapped” with the html tag with the attribute dir="rtl":

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

4. To rotate the image around the axes, use the rotateY(180g) and scaleX(-1) less-functions:

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

5. For the margin, padding and border you cannot use contraction ( for example, margin: 1px 2px 0 0;). An example of correct use of styles:

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. The transform: translate(-50%, -50%) CSS property is used in Left-to-Right mode and in the RTL mode you should set the value of the transform: translate(50%, -50%) property as follows:

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