5

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?

amigo
  • 343
  • 5
  • 19
  • 1
    I'm not entirely sure if this actually is a coding issue. If you write for arabic audience and use the correct `lang` attribute then you could write the % by default before the number. If you create the content dynamically then the logic should happen where you create the elements not on HTML level. – tacoshy Mar 03 '23 at 12:41
  • This link can be useful https://stackoverflow.com/questions/22511460/css-dir-rtl-vs-style-directionrtl – Leo the lion Mar 03 '23 at 12:44

2 Answers2

2

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

Invulner
  • 842
  • 2
  • 11
  • 2
    only works correctly when you push the 50% in an own container. Then It would be a good solution IMHO. – tacoshy Mar 03 '23 at 12:53
  • It shows %test 50. But what I wanted it to show is moving percentage before the number – amigo Mar 03 '23 at 13:00
  • Great point above - 50% should be placed in its own container. However, it's also necessary to apply the `display: inline-block` CSS property to the container. This way the result should be "%50 test" for rtl. – Invulner Mar 03 '23 at 13:43
  • 1
    @Invulner not necessarily. The semantic correct way and the smart way would be to use an inline container in the first place such as `span`. PS: You should actually implement it in your answer by editing it. Then your answer would be the better answer. – tacoshy Mar 03 '23 at 15:11
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.

Miss Skooter
  • 803
  • 10
  • 22