Nodejs.org: 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