Search code examples
htmlright-to-leftleft-to-right

How to make HTML/Browser make the numbers appear after Arabic like an English text instead of an Arabic text?

My code contains a word or string that ends with Arabic ketter and then a number. But for some reasons, the number appear before the Arabic as if it's treated as an Arabic number even in the editor.

<!DOCTYPE html>
<html>
<body>
    <p>Englishالعربية 1English</p>
</body>

I can't even separate the arabic text because the word is "Englishالعربية" and not just Arabic. How can I make the number appear after arabic but not by actually writing it after English and before Arabic, because this would ruin the word itself for visualization.

I can't even show the code properly, because even the browser and the editor shows the number before the arabic text. But the steps to reproduce this problem is as follows:

  1. Write Englishالعربية English first.
  2. Put 1 just before the second E.

Then you will see that the 1 automatically moves somewhere else.

Solution

  • both the <p> and <span> tags now support the dir attribute (docs here), which is especially useful for mixed-direction content. You can specify two directions: ltr (left to right) and rtl (right to left).

    In this case, I'd use this approach:

    Wrap each word in a <span> and add the dir attribute

    <!DOCTYPE html>
<html lang="en">
<body>
    <p>
        <span dir="ltr">English</span>
        <span dir="rtl">العربية</span>
        <span dir="ltr">1English</span>
    </p>
</body>
</html>

    Hope this helps! If not, feel free to let me know in the comments.