RTL: truncated string in settings page when RTL/LTR is mixed

[rugk]

Bug description

As reported by @shanirub in #62 (comment):

Under the behaviour settings the "colon code / unicode" option is incorrectly displayed.

Steps to reproduce

1. (Use a version with the Hebrew or another RTL language translation.)
2. Choose that language in the settings of Firefox.
3. Restart Firefox.
4. Open settings of add-on.

Actual behavior

The : after (in the LTR sense) or before (in the RTL sense) the colon is missing.

Expected behavior

• the colon should say :colon:

For comparison the German translation:

System

Operating system and version: Fedora 30
Browser and version: Firefox 69
Add-on version: dev (master)

Possible solution

When looking into the source HTML code, I can see, it (the text) is correctly applied/set. This likely is related to some display error related to RTL languages – or rather the mix of these.

Note the :colon: thing is in it's own span tag, because this is how our translation system works.

<label data-i18n="__MSG_optionCopyEmojiColons__" data-opt-i18n-keep-children="" for="resultType">השתמש ב- <code data-i18n="__MSG_optionCopyEmojiColonsCode__">:colon:</code> Code במקום ב- Unicode.</label>

Related issue: #63

[rugk]

Okay, I see where the second : actually is. It is placed after the Code, i.e. Code:, is not it, @shanirub? This should not be there, am I right? (because in the HTML it is not there…)

When I copy and paste it, it looks okay:

השתמש ב- :colon: Code במקום ב- Unicode.

(though, this is mixed up, is not it? And I get into struggle selecting this text… or wait this is RTL text displayed on a LTR text… hmm…)

---

In any case, I'll tag this with "help wanted". If anyone has experience with RTL/LTR text and issues like these, please do help. 😃

[rugk]

Stumbled upon https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi (and https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir), so maybe we either can set another CSS property to fix this. Or add it in the HTML… 🤔

In any case, this is getting really complicated. (The idea behind this all, and how to apply it. The fix may be simple though.)

FYI for everyone: This line here actually applies the basic rtl layout if that user agent is chosen:

awesome-emoji-picker/src/common/common.css

Line 4 in d86b4e7

direction: __MSG_@@bidi_dir__;

This was basically just done, because it's explained as an example in the MDN docs here:
https://developer.mozilla.org/de/docs/Mozilla/Add-ons/WebExtensions/Internationalization#Predefined_messages