Our website is available in English at https://www.example.com. We have recently started using the GTranslate service to generate an Arabic version of the site at https://www.example.com/ar/.
Upon reviewing the Arabic version, we noticed that GTranslate added certain attributes to the html tag, as shown below:
https://i.sstatic.net/0098i.png
Although this is helpful, it's not sufficient. I found some guidelines on how to support right-to-left (RTL) languages at https://codex.wordpress.org/Right-to-Left_Language_Support#Method_2:_rtl.css, which require several style changes.
Since we still need the English version of the site, we can't completely replace the current style.css file. Instead, I am considering adding specific rules for RTL languages.
One approach could be to use language-specific rules like:
p:lang(ar) {
text-align: right;
}
However, given the variety of RTL languages mentioned in resources like , I am exploring the possibility of creating a rule that applies only when the "dir" attribute of the html element is set to "rtl". Is such a solution feasible?