Translation to arabic: RTL style issue

[Aissaoui-Ahmed]

I have an issue with the website when translating to a language written from RTL
and i tried a workaround that worked perfectly, but it adds so many lines of code to the styling file ... is it ok to use this as a final solution ?

@nodejs/nodejs-ar , @celyes , @interstellarClub

[fhemberger]

Nooo, please don't do this. 😁
We already have the RTL flag, so html[dir="rtl"] is sufficient.
See: https://nodejs.org/ar/

Please also don't simply duplicate all the CSS, when you just want to change three lines of code.

What you want is:

html
 // all the regular styles
 ...

html[dir="rtl"]
 .has-side-nav
 aside
 float right

 article
 margin-right 220px

 @media screen and (max-width: 480px)
 .has-side-nav
 article
 margin-right 0px

[celyes]

Thank you so much, @fhemberger .
your code works just perfectly.
note that i added this line to the article element:

margin-left: 0;

so the margin left is set to 0 when the website language is a written from RTL , so the final code to add is like this:

html[dir="rtl"]
 .has-side-nav
 aside
 float right

 article
 margin-right 220px
 margin-left 0

 @media screen and (max-width: 480px)
 .has-side-nav
 article
 margin-right 0px

[Aissaoui-Ahmed]

thank you @fhemberger