Showing Arabic Mixed with English Correctly via CSS

Question

I want to show HI('مرحبا','75 Apples for you') in the browser

This is how it looks(from Chrome):

but it should look like this(from VSCode):

It is the word HI then ( then the word' مرحبا ' then , then '75 Apples for you' then ) it should show them in the same order, but what happens is that it merges the Arabic word مرحبا (without quotes) with the English word

I can't change the raw text as a workaround, I need a way to show them correctly via CSS any workaround? I tried all the values of the unicode-bidi CSS property, doesn't solve this problem

Answer 1

Via Html

Use <bdi> Element ( put Arabic words in Element Tag)

Like that : <p> HI( <bdi>'مرحبا'</bdi> , '75 Apples for you' ) </p>

Via Css

<div class="para"> HI(
        <p class="p">'مرحبا'</p>
        <p class="p">,'75 Apples for you'</p>)</div>

.p {
  display: inline-block;
}