Arabic Script Language Not Displaying In Firefox

Question

Here is the code I have written:

<div id="testdiv" style="position:absolute; top:250; left:10; width:1200; height:200; border:solid 2px #005050;">
    <span style="direction:rtl; font-family:jameel noori nastaleeq;">دی گئی مساوات کو دیکھئے</span>
</div>

I have not specified anything direction related in the <html> section and my code does not have any <!doctype> tag.

In firefox, the result of the above code is this:

While in Chrome, the same code shows this result:

The result in Chrome is how it ought to be. I have no idea why has Firefox suddenly behaving like this.

What am I doing wrong here and how can I fix it so that the result in Firefox matches that in Chrome.

In case anyone is wondering what the text means, it says: look at the given equation. The language is Urdu.

The complete source code of the page is posted below:

<html>
<head>
    <title>MathJax Test</title>
    <script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML">
    </script>

    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
        });
    </script>
</head>

<body>
<canvas id="test" width="500" height="200" style="border:solid 2px #000000;"></canvas>

<div id="testdiv" style="position:absolute; top:250; left:10; width:1200; height:200; border:solid 2px #005050;">
    <span style="direction:rtl; font-family:jameel noori nastaleeq;">دی گئی مساوات کو دیکھئے</span>

</div>
</body>
</html>

did you try to set [character set meta tag](https://developer.mozilla.org/en-US/docs/Glossary/character_encoding) in your HTML page? if you have it already then post the full HTML code here so that people can reproduce your issue. — ROOT, Apr 22 '20 at 07:57
@Ma'mounothman I have not. I will set it and then report again. — Youstay Igo, Apr 22 '20 at 08:19
@Ma'mounothman The page is supposed to have both Urdu/Arabic and English languages. Should I still go on and set the character meta tag after ? — Youstay Igo, Apr 22 '20 at 08:22
Open "Developer Tools" and verify two things: 1) What `Content-Type` header the response has. 2) What font shows up in Font tab when you Inspect the element. — Álvaro González, Apr 22 '20 at 08:25
@ÁlvaroGonzález Two fonts are displaying in the Fonts tab: Jameel Noori Nastaleeq (the one intended) and Times New Roman. It might help to know that Jameel Noori Nastaleeq is present in the system Fonts (Windows\Fonts) directory as TrueType (ttf). The problem is, if I specify any other Arabic script font, it still does not display the characters properly. Secondly, I cannot see any Content-Type header in the developer tools tab. — Youstay Igo, Apr 22 '20 at 08:34
If your server doesn't return `Content-Type` then you're lucky your HTML renders at all. As workaround, you may try this HTML tag: `` (or your encoding, if you are not using UTF-8 yet). Or, if you are using HTML 5, ``. — Álvaro González, Apr 22 '20 at 08:38
@ÁlvaroGonzález I am currently testing my code on my disk (offline). I am not even using any local server software such as WAMP. Just loading simple HTML rendering by double clicking the webpage. I will add the meta tag you have suggested and report any changes. — Youstay Igo, Apr 22 '20 at 08:40
@ÁlvaroGonzález I added the tag you suggested and it immediately solved the issue. Can you post this as an answer so that I can mark is accepted? — Youstay Igo, Apr 22 '20 at 08:43
@YoustayIgo, just use `utf-8` and you will be good to, it work for all languages. — ROOT, Apr 22 '20 at 08:47

score 1 · Accepted Answer · answered Apr 22 '20 at 08:51

You aren't specifying the encoding. If you rely on default values, such values may not be correct.

Server should send a proper Content-Type header:

Content-Type: text/html; charset=utf-8

If it doesn't (or there isn't a server involved), you can emulate it in HTML itself:

HTML5
```
<meta charset="utf-8">
```

Earlier versions:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Replace UTF-8 with the actual encoding (though in 2020 the recommended encoding is UTF-8).

Arabic Script Language Not Displaying In Firefox

1 Answers1