htmlfirefoxright-to-leftarabic-supporturdu

Arabic Script Language Not Displaying In Firefox

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: How the text appears in Firefox

While in Chrome, the same code shows this result: How the text appears in Chrome

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>
Solution

  • 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:

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