RTL text should be right-justified

[richvdh]

If the message body contains (or at least, begins with) RTL script, it should be right-aligned in the message panel rather than left-aligned

[lukebarnard1]

Message panel !== RTE so I'm gonna remove the RTE label (unless this is also a problem in the composer?)

[lukebarnard1]

Looking into this, the following changes need to be made:

 .mx_EventTile_body {
...
+    text-align: -webkit-auto;
+    display: block;
 }

I'm not sure how this will affect all other uses of event tiles, so should be worth testing thoroughly.

Also, I wonder if the interface needs a "RTL-mode" - having the user's avatar all the way on the left seems strange when the text is aligned to the right.

[ahangarha]

Wouldn't it be solved by adding text-aligh: start? So it automatically and based on direction of the text will determine to align text on left or right.

[MohsenNz]

Hi guys. How to fix rtl right-justified?

You can see It's left-justified. OS: Ubuntu 20.04 App: Element Desktop

[ahangarha]

Unfortunately element uses tag to put text in HTML. They should use

or

with dir=auto and set text-align: start. در تاریخ دوشنبه ۳۰ نوامبر ۲۰۲۰،‏ ۲۳:۲۰ mohsenNz نوشت: > Hi guys. How to fix rtl right-justified? > > [image: Screenshot from 2020-11-29 18-08-35] > > > You can see It's left-justified. > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > , > or unsubscribe > > . >

[MohsenNz]

:/ So will be added this feature in the future? What do u think?

[ahangarha]

This should be answered by the dev team. I myself have motivation to act on it but don't have any timeframe. The best thing for now is to elaborate the issue for them so that they can understand the exact issue and act accordingly.

Maybe you can update the issue.

On Tue, Dec 1, 2020 at 10:39 PM mohsenNz notifications@github.com wrote:

:/ So dose this feature add in future? What do u think?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/vector-im/element-web/issues/4771#issuecomment-736758350, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACVYOY273JLTISY7AYW65NDSSU5OZANCNFSM4DWID5SQ .

[jryans]

https://github.com/matrix-org/matrix-react-sdk/pull/5453 fixes the messages themselves, but there are some surrounding UI issues to consider as part of that, since it also changes the appearance of things outside of the message (like edited indicators).

[ahangarha]

Guys,

I have made these simple styles which nearly all issues with bidi support: https://userstyles.world/style/2159/element-bidi

As far as I see it is working perfectly. It was little issue if we have a mixed markdown content which can be managed in some way but doesn't have periority now.

I wonder why still we don't have this feature on element!

[SPiRiT369]

IMHO - This is a very important change request. It would be great (and should be) if the entire app support RTL and not just message bodies.

Examples:

• The avatars should float to the right
• User names should float to the right
• If Element language is set to RTL language (Hebrew/Arabic) then all system messages should be in rtl direction as well. Currently, system messages and dialogs are always left-to-right and it look very bad when RTL language is used.
• Might also be good to make the side panel float to the right, as accepted in RTL apps. (but less important)

Perhaps it is a good idea to add a parameter for each language whether it is rtl or ltr?

[ahangarha]

@SPiRiT369 The issue you raised is a different issue. That is to have support for RTL layout if a person choose to use some RTL languages for the app.

What we are discussing here is to add support for rendering text in correct direction regardless of the general direction of the layout. The title is misleading because if the layout be RTL, then we should render LTR text left-aligned. Though worth to mention that here the issue is not alignment only.

[alongls]

Hello is there any progress / update with this issue ? languages like Arabic and Hebrew are shown very badly in the element web client thanks.

[t3chguy]

Closing in favour of https://github.com/vector-im/element-web/issues/14520

[sam-ka]

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.