Search code examples
htmlcsssafarifont-family

lang="ur" changes how safari displays text

I'm facing an issue where setting lang="ur" on the html element changes the way Safari displays text:

const base = `
<html lang="ar">
<head>
<style>
  body {
    font-family: "Helvetica Neue";
  }
</style>
</head>
<body>
  ٹیسٹ
</body>
</html>
`

const a = document.createElement('iframe')
a.src = "data:text/html;charset=utf-8," + base;

const b = document.createElement('iframe')
b.src = "data:text/html;charset=utf-8," + base.replace('ar','ur');

document.body.appendChild(a);
document.body.appendChild(b);

Why is this happening and how can I prevent it?

enter image description here

Solution

  • According to Font Book on MacOS, the bundled version of Helvetica Neue doesn't actually include any Arabic characters. Arial does though.

    const base = `
<html lang="ar">
<head>
<style>
  body {
    font-family: "Helvetica Neue", Arial;
  }
</style>
</head>
<body>
  ٹیسٹ
</body>
</html>
`

const a = document.createElement('iframe')
a.src = "data:text/html;charset=utf-8," + base;

const b = document.createElement('iframe')
b.src = "data:text/html;charset=utf-8," + base.replace('ar','ur');

document.body.appendChild(a);
document.body.appendChild(b);