LTR to RTL Conversion - css

Question

I have developed an application in angular and is completed which includes approx. 80 modules. Now I need to convert the language to arabic which is RTL. I used SCSS as a CSS library. Is there any easy way to convert my LTR application to RTL because many styles are affecting while using direction=rtl;
I don't want to convert every .scss files in the module.

Answer 1

I'm using css logical properties which should be supported in most of the browsers.
Instead of using margin-left you write margin-inline-start.
The cool part is that if you are using postcss with postcss-preset-env you just can use the new syntax, it will convert it to css that supports by all the browsers based on the dir attribute.
For example:
// some.css
.my-class {
float: inline-start;
margin-inline-start: 10px;
}
it will produce
// some.output.css
[dir="ltr"] .my-class {
float: left
}
[dir="rtl"] .my-class {
float: right
}
[dir="ltr"] .my-class {
margin-left: 10px
}
[dir="rtl"] .my-class {
margin-right: 10px
}
With this output css you can just set the dir attribute of you html element to
rtl, and the browser will use the proper styles.
I'm using this approach in a large code base, it works like a charm.
Another approach is to use rtl-css, which is a tool that creates new css files with flipped directions.
It has several webpack plugins as well, such as rtlcss-webpack-plugin

Answer 2

I have written a crud python tool that can mass-convert all CSS and SCSS files from physical to logical in one go. To use, save that file somewhere, e.g. to-logical.py. Requires python3. Can be used on a single file or whole dirs, and even recursive. Can handle scss expressions. The tool currently handles left, right, top, bottom, margin-*, border-*, padding-*, min-width, max-width, min-height, max-height, text-align.
python3 to-logical.py -r <path-to-dir>

Answer 3

Since I am using SCSS it becomes easy by adding mixins. Below are the mixins for common rtl to ltr properties and I replaced all the border, margin, padding, position and border-radius to generate from this mixins, and it worked fine. Took some long process but perfect.
#mixin rtl-value($property, $ltr-value, $rtl-value, $imp:null) {
#{$property}: $ltr-value;
:host-context([dir=rtl]) & {
#{$property}: $rtl-value;
}
}
#mixin border-radius-gen($tl, $tr, $br, $bl, $imp:null) {
#include rtl-value(border-top-left-radius, $tl, $tr, $imp);
#include rtl-value(border-top-right-radius, $tr, $tl, $imp);
#include rtl-value(border-bottom-right-radius, $br, $bl, $imp);
#include rtl-value(border-bottom-left-radius, $bl, $br, $imp);
}
#mixin margin-gen($top:null, $right:null, $bottom:null, $left:null, $imp:null) {
margin-top: $top $imp;
#include rtl-value(margin-right, $right, $left, $imp);
margin-bottom: $bottom $imp;
#include rtl-value(margin-left, $left, $right, $imp);
}
#mixin padding-gen($top:null, $right:null, $bottom:null, $left:null, $imp:null) {
padding-top: $top $imp;
#include rtl-value(padding-right, $right, $left, $imp);
padding-bottom: $bottom $imp;
#include rtl-value(padding-left, $left, $right, $imp);
}
#mixin border-gen($top:null, $right:null, $bottom:null, $left:null, $imp:null) {
border-top: $top $imp;
#include rtl-value(border-right, $right, $left, $imp);
border-bottom: $bottom $imp;
#include rtl-value(border-left, $left, $right, $imp);
}
#mixin position-gen($top:null, $right:unset, $bottom:null, $left:unset, $imp:null) {
top: $top $imp;
#include rtl-value(right, $right, $left, $imp);
bottom: $bottom $imp;
#include rtl-value(left, $left, $right, $imp);
}
Examples
.style{
#include margin-gen($left: 1px, $right: 1px, $top: 1px, $bottom: 1px, $imp: !important)
#include padding-gen($left: 1px, $right: 1px, $top: 1px, $bottom: 1px, $imp: !important)
#include border-gen($left: 1px solid #ccc, $right: 1px solid #ccc, $top: 1px solid #ccc, $bottom: 1px solid #ccc, $imp: !important)
}