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

RTL support for UI by adding top level class in HTML #2669

Open
fghamsary opened this issue Dec 13, 2020 · 4 comments
Open

RTL support for UI by adding top level class in HTML #2669

fghamsary opened this issue Dec 13, 2020 · 4 comments

Comments

@fghamsary
Copy link
Contributor

There are many right-to-left languages which need to have both RTL and LTR support for their regions.
Countries like Iran, Persian language is the default language but most of the applications should have both English and Persian UI.
Persian is a right to left language so the UI should be completely inverted, the menus are at right, the text and everything.
In most sites this is done by a top level class in HTML to have a tag to be RTL language.
This can be used for other languages as well such as Arabic and Hebrew.

I'll try to add a PR for this request, which impacts the locale (i18n) object, which I suggest to have an optional variable such as
rtl: true which can then be used to add a class such as rtl on the HTML tag.
The reason that HTML tag is important is that the who page should be changed via CSS to have:
text-align: right
But this is not the only change and it depends on the CSS framework which is being used in the project.
Unfortunately there are many frameworks that doesn't support RTL out of the box, but there are always small hacks to be done to make the work ;)

As mentioned before, it depends really on the UI framework but for example in bootstrap v4.x it can be simply done by just adding a CSS property and using this one based on the context.

Of course this is only one imaginable solution, but I'm open to any discussion from any other person interested.

@ErikDakoda
Copy link
Contributor

It looks pretty easy to add RTL support in Material UI: https://material-ui.com/guides/right-to-left/

@fghamsary
Copy link
Contributor Author

Yes, in material it's easy, but not in bootstrap. And it depends on the UI framework you are using.
The reason I added this was for the StateOfJS, as you can see, it adds pretty easy rtl class which you can have the direction in the html class, and then it will become the same for material as well.

@eric-burel
Copy link
Contributor

@fghamsary Excellent feature! Is this issue closed by your PR, or do you have next step for RTL support?

Ping @EloyID : this is an example of feature that required a change in the way we build the graphQL context (see file updates: https://github.com/VulcanJS/Vulcan/pull/2670/files). We definitely lack the ability to enhance the graphQL context at this point, it would have make it easier to implement rtl detection. You'll need smth similar for multitenancy.

@fghamsary
Copy link
Contributor Author

@eric-burel I think that my PR was just a first step, as I've already mentioned.
I don't know the project in complete to let you know if this is a sufficient or not, but in my opinion, I think we should keep this open, just to be on the safe side, until I (or anybody else) can check all the aspects of the project.
It's been only less than a week (well two days) that I've seen this project, and don't know most of its parts.
And also as I mentioned this will just give the possibility to the developer to implement their own classes.
I can see that bootstrap is included in the project, as well as material, so I think we should do something by default for them as well.
So for now it's a work in progress in my opinion.

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