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 https://github.com/vector-im/riot-web/issues/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.

https://user-images.githubusercontent.com/3362943/161397657-41423216-7b66-4eaf-ba5b-39ab7d6a86c5.mp4

https://user-images.githubusercontent.com/3362943/161420463-545264df-f75d-44f4-b01b-81b46dcd9eab.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?

[sam-ka]

Would it make sense to reopen #4771 and dedicate it to the issue of content directionality leaving this to interface directionality?

[sam-ka]

I posted this comment in issue 4771 and wanted to post it here since it's relevant to this issue as well. Apologies for the overhead.

For those who just want to improve the legibility of large blobs of text, you can temporarily fix the alignment yourself right now without using an alternative for or recompiling Element yourself. This fix must be re-applied each time you restart Element for Desktop.

If you're using the web client, you can use Grease Monkey or similar add-ons to fix the issue more permanently.

In Element for Desktop:

1. Press Ctrl+Shift+I to bring up the element inspector
2. Click on the + in the CSS pane (near .hov and .cls). This will inject a new class for <body>. This doesn't matter.
3. Click on the small inspector-stylesheet link to the right of the newly injected class. This will open the largely empty inspector sheet in the sources pane.
4. Remove the empty body class and copy the following CSS rules and paste them into the new sheet:

   span.mx_EventTile_body {
       text-align: start;
       display: inline-block;
   }
   .mx_BasicMessageComposer_input {
       text-align: start;
   }

5. When you're done press Ctrl+Shift+I again to close the element inspector.

While this rule won't fix everything, it will fix the alignment for multi-line comments (likely the most poignant issue for RTL users by far) without affecting other languages. It's a low-effort fix that should drastically improve your experience until a proper fix is implemented and pushed upstream.

[Thatoo]

Would it be possible to increase font size of persian and arabic writting. In settings,the default setting for latin alphabet is nice but it makes it very small for arabic/persian alphabet : To feel the same comfort reading persian/arabic alphabet, I need to increase font size to 18.

[dbkr]

https://github.com/matrix-org/matrix-react-sdk/pull/12837 was merged which made the same change as https://github.com/matrix-org/matrix-react-sdk/pull/5453 and that PR was marked as fixing this issue, so I'm going to close this, (which isn't to say our RTL support is now perfect, but more issues welcome for any more specific things).