Right to left support for percent sign

Question

Let's say there is a piece of code as follows:

<div dir="rtl">
  test 50%
</div>

It renders as test 50%. But according to this wiki page for Arabic language it should be displayed as %50 test. Note the percentage sign is before the number. The question is as follows: how to enforce the desired behaviour? Do browsers support it OOB? Are there known ways to do that easily?

UPD. I will provide more context. There is an angular component with an input text property. Let's say it might look as follows:

<component [label]="'test 50%'"></component>

Then its template looks as follows:

<span>{{label}}</span>

It works correctly for left-to-right mode. But when right-to-left mode is enabled, the text is aligned to the right but the text is not modified by a browser. The reason why I think it might be modified by a browser automatically is that the text as follows test this! is modified to this: !test this automatically by a browser.

Does I need to modify the component so it accepts already RTL modified text?

Answer 1

According to MDN docs:

The dir global attribute is an enumerated attribute that indicates the directionality of the element's text.

That means that it will change the direction in which the text is rendered, but not the order in which the sentence is constructed, unless it is at the start/end of the sentence.

You may notice in the picture above that ? was actually moved to the left side in the first sentence. That is because it is a bidi neutral character. However, the same implication does not exist for the ? inside the word lef?t or any other part of the sentence.