Implement initial support for RTL languages

[mohad12211]

Pull request checklist:

• CHANGELOG.md was updated, if applicable

Description

This is a fix #720 for RTL languages.

• line breaks work.
• Neutral words (words that contains numbers or non-alphabetical characters like & $ # etc...) are ordered properly
• punctuation marks are displayed properly.
• mixing RTL and LTR works (the correct way, not Twitch's way)
• reply messages are handled properly. will be another PR, we need to reorder words when creating the reply element due to Make reply thread subtext easier to click #4067
• Selection do not work yet. won't fix for now, use (right click -> copy message) as a workaround.

[github-actions]

clang-tidy made some suggestions

[mohad12211]

The last commit should show proper mixing between RTL and LTR, Twitch is doing it the wrong way actually.
If the text starts with an RTL word (e.g. Arabic), with LTR in the middle, it will only swap the RTL sequences, which is wrong, and a frustrating issue on Twitch... Should be working here. And it makes emotes show in the correct way as well.
Example:

[github-actions]

clang-tidy made some suggestions

[Felanbird]

The artifacts to test these changes can be found here, incase any issues can be found by native RTL speakers.

[EndlessJest]

thank you so much! Everything seems to work correctly so far.

[Felanbird]

From a functionality standpoint, it appears these changes push the "space" when using large emotes to the bottom, instead of the top of the message. resolved

before:

after:

[mohad12211]

@Felanbird yes that was due to a weird thing I did, fixed after this refactor.

[mohad12211]

I refactored the fix a bit.

What is done is basically this:
we call _addElement normally, if we detect an RTL word in the container, we reorder the elements.
we call addElement on each element again, without adding the element to this->elements_, if the text starts with an RTL word, we render from right to left (so currentX_ will decrease instead of increase), otherwise render normally since we are calling _addElement in the correct order. since we need the previous element for Compact-Emotes, I pass the index for the previous element, I pass -2 by default, so that in the first call we just do it the old way, the second call it will start from -1.
I think this is better than making two _addElement functions, one for RTL and one for LTR with 90% similar code.
let me know if I can do it in a better way.

[github-actions]

clang-tidy made some suggestions

[Felanbird]

Top portion is this PR - bottom is normal chatterino incorrect rendering resolved

[github-actions]

clang-tidy made some suggestions

[github-actions]

clang-tidy made some suggestions

[mohad12211]

Everything should be working now except selection, copying the entire message works for now as an alternative to selection.
I will see what I can do about selection soon.
Please test this as much as possible, preferably with other RTL languages other than Arabic.
To download the app with this changes. go to Checks, at the top, then build, then at the bottom you will find binaries for all operating systems:

[github-actions]

clang-tidy made some suggestions

[mohad12211]

ready for final review & merge.

[pajlada]

Looks like this for me (left = your PR, right = master)

Testing with this text: a یک دو سه b

[pajlada]

When switching to Segoe UI it looks correct to me

[pajlada]

I attribute the previous errors I ran into to bad fonts on Linux

[Felanbird]

As far as I believe I can test this as someone who does not speak/write an RTL language, I believe it works.

[pajlada]

Thank you!!

[Felanbird]

@mohad12211 Thanks for your contribution! As a first-time contributor, you can now add yourself to the contributors list that's shown inside the application.

To do so, open a new PR where you modify the resources/contributors.txt file and add yourself to the list. Make sure to read the comments at a top for instructions.