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:
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>
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).