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?
2
Answers
Try the
‏
– HTML character entity that represents the right-to-left mark. It’s a non-printing character used to indicate the directionality of text.Update:
It was mentioned in the comments that in addition to using
‏
, the "50%" part should be wrapped in its own container. Example – https://codesandbox.io/s/ecstatic-rain-8m209cAccording to MDN docs:
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 wordlef?t
or any other part of the sentence.