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.
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.
Share Improve this question asked Jan 29 at 14:20 RajinCoding2007RajinCoding2007 572 silver badges8 bronze badges 3- use separate containers to prevent misalignment. – mr mcwolf Commented Jan 29 at 14:31
- jsfiddle/ahqLnmkp – mr mcwolf Commented Jan 29 at 14:56
- @mrmcwolf Thanks, but I already said that Englishالعربية is a single word. I fot to say it, but I am fetching these words from somewhere else. So, I can't break a word like this. – RajinCoding2007 Commented Jan 29 at 15:09
1 Answer
Reset to default 2both 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.