How to Properly Position Diacritical Marks above and below All Ligatures of an Arabic Font in Chrome and Edge Browsers under Windows and Android OS?

Question

Can you help me with a way to go around this issue?

There is an Arabic font rendering issue, which, at first, I thought was a problem in the font I am currently designing. However, I now believe it originates from the browsers because the same problem appeared in the Arabic Typesetting font (arabtype.ttf), already built into my computer’s Windows 10 Home OS.

Also, this problem happens only in Edge and Chrome browsers under Windows OS and Android, but it doesn’t happen in Firefox.

Further, there is no problem under IOS, not even with Chrome or Edge.

The text renders correctly in MS Word.

The image below, showing text in the Arabic Typesetting font provided by Windows, depicts an example of this problem.

font rendering issue

The Problem: Ideally, a ligature glyph composed of 2, 3, or more characters has diacritical marks positioned in an ordered sequence above or below the combined ligature. The ligature in this example is a combination of two Arabic letters, Jeem and Heh, where the Fatha and Damma diacritics cluster only above the Heh instead of their assigned sequenced order.

You can try the text on the test webpage: https://www.colorfulquran.com/fonts/ProblemOfTheMarksAboveLigatures.html in any browser under any OS.

There is something so peculiar and strange about this problem! As shown in the attached images, a string of text in one paragraph has two occurrences of the same ligature. The problem occurs in one of them, but not the other!

I thought the problem was in the font I was designing. I have been trying to fix it for over three months. Finally, I thought to have fixed the problem by reordering the GSUB lookups. Unfortunately, while the problematic ligatures would render correctly, the same situation would reappear in other ligatures generated correctly before the reordering!

Can you help me with a way to go around this issue? For example, is there anything I should do in the font design? Or maybe something in the HTML/CSS design of the web page?

How can I get such ligature and diacritic intensive Arabic text to render correctly in all browsers under all operating systems?

Thanks.

Answer 1

This post is a follow-up.

I sent my original question to Google Chrome’s “Report an Issue” and MS Edge’s “Send Feedback.” A few days later, I noticed that the problem had disappeared from Chrome. They seem to have fixed it. Thanks, Google. But it still shows in Edge.

On the other hand, thanks to posting the question here, I found a workaround for the issue, although no one responded. While preparing the test webpage linked in the original question, I first thought of emphasizing the problematic words by making them bold. But then I turned them back to regular because, after making them bold, they rendered correctly, which defied the purpose of this question. Using HTML bold tag seems to reset the browser’s font rendering engine. So, as a workaround, I now turn each space between every two words to bold, which will not show, of course, because the space glyph is empty. This workaround seems to work on all browsers, including Edge.

Thanks.

Answer 2

Edge seems to have fixed the issue as well. Thanks, Microsoft.