RTL issue in message display

[gitd3v]

Description:

after upgrade to 5.0.1, all messages typed in RTL and have mixed persian/english words does not show correctly in desktop app or browser, mobile app is not affected setting "Use legacy message template", temporarily fixes the issue.

Expected behavior:

show messages correctly

Actual behavior:

words is not in the right places

Server Setup Information:

• Version of Rocket.Chat Server: 5.0.1

Client Setup Information

• Desktop App or Browser Version: latest
• Operating System: linux

[isaacvonaaron]

Same issue here. If I manipulate the DIV wrapping the text by adding dir="auto" to the div tag - Electron gets it right. It even aligns the text to right.

Without it, here is a demo of what is happening

While typing text: After sending it

In this example, and also gitd3v's we have right-to-left text followed by English which is left-to-right and then again rtl text. Note how the phrase components are flipped when displayed. In my example the text I wrote was saying "I have one apple" and the display says "apple one I have". PS: If the user was Yoda, that would have been a feature :-)

[isaacvonaaron]

I created a temporary hack Admin-> Settings -> Layout -> Custom Script for Logged In Users

window.setInterval(
  function() { 
    $("div.rcx-message-container[dir!='auto'],div.rcx-message-body[dir!='auto']").attr('dir', 'auto'); 
  },
  1000
);

Edit - The same hack but without using intervals

var rtlSetFunction = function() {
  window.setTimeout( function() {
    	$("div.rcx-message-container[dir!='auto'],div.rcx-message-body[dir!='auto']").attr('dir', 'auto'); 
    }, 100);
  window.setTimeout( function() {
    	$("div.rcx-message-container[dir!='auto'],div.rcx-message-body[dir!='auto']").attr('dir', 'auto'); 
    }, 1000);
  window.setTimeout( function() {
    	$("div.rcx-message-container[dir!='auto'],div.rcx-message-body[dir!='auto']").attr('dir', 'auto'); 
    }, 10000);
};

document.body.addEventListener('click', rtlSetFunction, true); 
document.body.addEventListener('keyup', rtlSetFunction, true); 
rtlSetFunction();

[bahmanjafari]

In 5.0.3 still, the problem exist I had to activate legacy mode

[pouyadarabi]

Thanks, @isaacvonaaron

I created an optimized way using Mutation Observer

Custom Script:

function setAutoDir(){
    $("div.rcx-message-container[dir!='auto'],div.rcx-message-body[dir!='auto']").attr('dir', 'auto'); 
    $("textarea.rc-message-box__textarea[dir!='auto']").attr('dir', 'auto'); 
}
setAutoDir();
var elementCount = $('.rcx-message-body').length;
var observer = new MutationObserver(function(mutations) {
   var newCount = $('.rcx-message-body').length;
   if (newCount != elementCount) {
        elementCount = newCount;
        setAutoDir();
    }
});
observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

This will set dir=auto for messages and input box.

---

If you want to keep messages in left and just fixing RTL issue, add this

Custom CSS:

.rcx-message-body {
  text-align: left;
}

[molaeiali]

Same issue on 3.8.12 on Linux

I think this and https://github.com/RocketChat/Rocket.Chat/issues/26857 are issues related to https://github.com/RocketChat/Rocket.Chat.Electron project though, will open an issue there, mentioning these issues here

[jeanfbrito]

Same issue on 3.8.12 on Linux

I think this and #26857 are issues related to https://github.com/RocketChat/Rocket.Chat.Electron project though, will open an issue there, mentioning these issues here

Just to tell you that this is a server issue and not an Electron one, that's why I closed the issue there. Ok? We are aware of this already @debdutdeb ?

[ahmadidev]

Thanks, @isaacvonaaron, and @pouyadarabi for the workarounds. It works fine. Is there a plan to include this fix in upcoming releases?

[hugocostadev]

Hi there, thanks for the contribution! 🚀 💯

Sorry, this error does not happen on the latest and maintained releases.

Rocket.Chat  provides support for, at least, 3 months for each release and 6 months to the latest releases of each major version

I would suggest you update your Rocket.Chat version to the latest stable version, which you can find in Releases Page and, check it HERE the table with versions and End of Life dates.

---

Questions? Help needed? Feature Requests?

• Join our Open Server in the #support channel and feel free to raise a question
• Join our Community Forum and search/create a post there
• Feature Request: Open an issue in Feature Request repository