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

Question

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:

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

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

@mrmcwolf Thanks, but I already said that Englishالعربية is a single word. I forgot to say it, but I am fetching these words from somewhere else. So, I can't break a word like this. — RajinCoding2007
– RajinCoding2007, Commented Jan 29 at 15:09

Isaac Blanco · Accepted Answer · 2025-01-29 15:17:25Z

2

both the  and  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 `` 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.

edited Jan 29 at 15:17

answered Jan 29 at 14:32

Isaac Blanco

1041 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RajinCoding2007 Jan 29 at 14:38

Both of them still make it look as if English was written first, then 1, then العربية and then another English. It doesn't look like English first, then العربية and then 1 and then another English.

Isaac Blanco Jan 29 at 14:52

Hi @RajinCoding2007, I check out my code, indeed I forgot to add in the first approach the "dir" attribute, now should work as expected.

RajinCoding2007 Jan 29 at 15:15

@Issac-Blanco I said that I can't break the word Englishالعربية. And dir=rtl wasn't actually needed. I saw that when I wrote it like this: Englishالعربية1English, it also worked. But for some reasons, replacing dir="ltr" with style="direction: ltr" doesn't work in both your code and Englishالعربية1English. But using dir="ltr" did solve my problem. Thanks.

Isaac Blanco Jan 29 at 15:16

Oh ok, @RajinCoding2007, thanks for the feedback and happy to know that worked, have a great day :)

Collectives™ on Stack Overflow

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

1 Answer 1

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

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related

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