RTL Support

[maj0rmil4d]

Is your suggestion related to a problem? Please describe.
As you may know the Arabic/Persian alphabet are in reverse format compared with English , I mean if you write things from left to right ... in Persian you must write from right to left

Describe the solution you'd like
you could add RTL (right to left ) support

Describe alternatives you've considered
for i.e you can see microsoft office , it has RTL support too in text formating section

Additional context
Thanks , It would be great .
Please add this feature in Riot Desktop too .

[t3chguy]

It would help if you expressed what the specific issues with RTL were, the app specifies https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir in a lot of places so there should be broad support.

[t3chguy]

Related #1712

[luixxiul]

The issue seems to be that elements are currently placed based on styles for LTR. Menus, buttons, strings, etc. should be placed from left to right as well. See https://he.wikipedia.org/ for example.

RTL layout itself can be enabled easily by adding dir="rtl" to html root element, but currently elements placed with padding/margin-right/left and/or position:absolute/relative break the layout as below:

Also, the close button is not expected to be placed before the title of the dialog:

This case either including the button element inside a flexbox or styling with html[dir="rtl"] .closeButton

If full RTL support is in scope, it might be worth changing styles to be applicable for both LTR and RTL layouts gradually. A module to take care of the convert should be appreciated.

[luixxiul]

For the concept, please check https://github.com/luixxiul/matrix-react-sdk/tree/rtl. There are tons of glitches and conflicts to be sorted. To try the design, you need to add dir="rtl" to html tag of src/vector/index.html of element-web. For temporary check, add it via browser's devtool.

after.mp4

Peek.2022-04-03.09-10.mp4

With CSS logical properties like margin-inline-start, it should not be so difficult to set up both RTL and LTR layouts at the same time.

[luixxiul]

@t3chguy would you let me know what you would think about this? Could I work on modifying the styles related to this, including fixing bugs such as the close button covering the dialog's title?

The biggest problem here is that it would be no longer recommended to use something like padding-right or margin-left to set space between elements. Neither would be using position: absolute and left/right: ...px. I assume this would be a challenge for devs who are accustomed to use them. Perhaps adding rules to linter might work, but not quite sure.

[sam-ka]

Hi. I'm also being affected by this bug and would like to help get it resolved if I can.

From the discussions here and elsewhere it seems that a lot of CSS work is required to get this fixed in one go. To make resolving this issue more manageable, I would like to suggest that we break apart this issue into two smaller issues since interface directionality and content directionality are separate and can be fixed separately; i.e. RTL messages should still appear correctly in LTR-only interfaces and vice versa.

1. Interface Directionality: The issue of displaying RTL UI correctly which @luixxiul has thoroughly investigated, discussed, and worked on. A fix for this issue would result in the overall structure and app controls of Element Web flowing from right to left. This, I imagine, will require careful effort to rework all CSS code in Element Web to be direction-agnostic without inadvertently introducing regressions and breaking Element for non-RTL users.

2. Content Directionality: The second issue is of displaying individual RTL messages correctly. A fix for this would be relatively straightforward to implement and can be implemented by adding as little as two lines of CSS to the message element (though realistically it will probably require a few more lines than that). Unlike the interface, fixing the directionality of content does not affect messages that don't begin with RTL text so it's less disruptive (invisible) to non-RTL users while providing a significantly improved experience for RTL users. it should also make merging it much easier.

It has been a couple of years since I worked with bidi layouts. I've also never contributed to a third-party open-source project on GitHub before, but I'm willing to help if I can.

Thoughts?