skip to Main Content

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


  1. Try the &rlm; – HTML character entity that represents the right-to-left mark. It’s a non-printing character used to indicate the directionality of text.

    <span dir="RTL">test 50&rlm;%</span>

    Update:
    It was mentioned in the comments that in addition to using &rlm;, the "50%" part should be wrapped in its own container. Example – https://codesandbox.io/s/ecstatic-rain-8m209c

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search