Negative numbers in monitors display incorrectly for RTL languages

In RTL languages, numbers should still be LTR. I.e. negative ten should be written -10 not 10-

Currently, the negative sign is on the right:

[pffigueiredo]

Changing unicode-bidi isn’t something that should be messed with. - MDN docs

My two cents for resolving these scenarios are:

For any given text (free text): 1st- Isolate the numbers into their own html tags; 2nd- Set their direction to either auto or ltr

For text inputs with numbers This one is more tricky and there are multiple options with different caveats.

Using dir="auto" For the most part, adding dir="auto to the input element like <input dir="auto" /> is the most clean solution as it will define the input’s direction by the first typed letter - sets direction to “rtl” or “ltr”.

Unfortunately this brings a few caveats as the cursor will “always” start at the left by default and also, any numbers will be on the left, unless you add some styling like text-align: right, so it gets overrided.

---

Using the LEFT_TO_RIGHT_MARK The LEFT_TO_RIGHT_MARK is a Unicode if attached to a input value, will mark that input as LTR, doesn’t matter the defined direction, which brings the best of both worlds, the numbers are kept on the right while keeping the “ltr” way of writing.

The big CON with this approach, is that (I believe), it’s only achievable through the use of JS to keep adding the LTR_MARK everytime the input changes.

Experiments This codepen, has some experiments around it.

• dir="auto"
• LEFT_TO_RIGHT_MARK

Hopefully it will help to come to the best solution 🤞

[travissanderson]

I was doing a bit of looking on this one and it seems to have been identified in the Google fork of blockly https://github.com/google/blockly/issues/1802 back in 2018. There’s also an issue in the fork https://github.com/LLK/scratch-blocks/issues/2043. Found a similar one here https://github.com/LLK/scratch-blocks/issues/1709.

The issue raised in Google mentions that the desired position of the negative sign may not be consistent for all RTL languages. If it is true that some RTL language users would prefer for the negative sign to be on the right of the number, then perhaps the best solution is to choose a default and allow the user to configure it. That may only be possible when scratch-gui is integrated with scratch-www? I’m not that familiar with the structure of the projects yet.

Once we know how we want to format the number, it should be fairly easy for single numeric inputs. In “free form” text, it is more involved (as mentioned above). The solution would probably involve identifying numbers in the text and wrapping them with DOM elements so we could style them as necessary. Doing that during editing can be pretty tricky since it will mess with the user’s selection.