RTL support for UI by adding top level class in HTML

[fghamsary]

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]

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

[fghamsary]

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]

@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]

@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.