Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translation to arabic: RTL style issue #1970

Closed
Aissaoui-Ahmed opened this issue Dec 31, 2018 · 3 comments
Closed

Translation to arabic: RTL style issue #1970

Aissaoui-Ahmed opened this issue Dec 31, 2018 · 3 comments

Comments

@Aissaoui-Ahmed
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

celyes commented Jan 1, 2019

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
Copy link
Contributor Author

thank you @fhemberger

Aissaoui-Ahmed added a commit to softvenue/nodejs that referenced this issue Jan 2, 2019
Aissaoui-Ahmed added a commit to softvenue/nodejs that referenced this issue Jan 10, 2019
fhemberger pushed a commit that referenced this issue Jan 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants