Development recommendations for Right-To-Left mode
Glossary Item Box
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%); } }