Adding RTL support to Mattermost

Efficient and frictionless communication has always been an important concern for our company, Quera. In the past, we have had problems using various communication tools. But after finding Mattermost, we knew it was a perfect fit. Now, we use it extensively as our main team collaboration tool.

What led us to Mattermost?

Our team communicates in Persian, which is an RTL (right-to-left) language, so we needed RTL support. After a bit of research, we discovered that Mattermost has a great and powerful plugin ecosystem. We decided to write a plugin to add RTL support and share it with other people speaking RTL languages.

The result is published as an open source project on GitHub called Mattermost RTL.

The problem

RTL text needs to be displayed in a correct manner to be readable. It should be aligned from right to left. The more important problem, however, occurs when RTL text is mixed with LTR (left-to-right) text. 

Without RTL support, if you write some English words within an RTL sentence, words appear in an unnatural order, making it very hard to read the sentence.

Here’s an example in Persian that demonstrates the problem:

The solution

We wanted to keep the plugin simple and minimal. There was no need to change the Mattermost layout (e.g., the sidebar or menus). Making the entire layout RTL is complicated, and not very necessary. The plugin fixes the problems described above in a message display box and message input box.

There are a few methods to fix text direction in an HTML element:

• Read the content of an element using JavaScript and detect text direction based on characters used, then set direction CSS attribute or dir HTML attribute on that element to rtl or ltr based on the detected direction.
• Set the element’s dir HTML attribute to auto using JavaScript (no need to read its content).
• Set unicode-bidi CSS attribute to plaintext.

Using JavaScript has a small delay because we need to wait for the elements to load and then run JavaScript code. Text will be displayed in the wrong text direction at first.

We  used the unicode-bidi method, but soon found out, while this works perfectly for message display boxes, it has problems in the message input box.  This made the second method, changing the HTML element dir to auto for input boxes specifically, the best option.

An example conversation after enabling the plugin:

Installation and Usage

Installation is easy and straightforward. 

1. Download the plugin file (ir.quera.mattermost-rtl-*.tar.gz) from the Releases page
2. Upload to your Mattermost server via the System Console. 
3. Enable the plugin.

Currently, the plugin has no configuration options and starts working immediately after installation.

We’d love to hear from you

What do you think about the plugin? Share your thoughts on Twitter or open an issue here.

If you’re interested, check out our other plugin which makes RTL text on Mattermost even more readable by applying some UI tweaks.

About Quera

Quera is a developer community that organizes programming-related events and provides products specially designed for developers and companies seeking talented developers. Its most important products are Quera College, which offers interactive and practice-based online programming courses, and Quera Careers, which tries to connect developers to their matching IT companies, and help companies by evaluating developers’ skills by online technical tests.