Controlling the visual presentation form/rendering of Arabic text on the web?

135 Views Asked by At

Picture 1

and

Picture 2

are samples of the exact same Arabic text with the exact same font, rendered differently in respectively Chrome and Firefox.

The latter in Firefox is the most accurate rendering of the Arabic text ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ, which makes correct use of the ligature for the Arabic script.

I assume the correct Firefox rendering rules out the conclusion, that this is a 'font issue'..

So to the question: is it somehow possible with CSS to control/enforce ligature/presentation of Arabic script across different browsers, in this case, especially Chrome?

Sample HTML:

<div lang="ar" class="some_arabic_wrapper">ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ</div>

Sample CSS:

.some_arabic_wrapper {
    direction: rtl;
    font-family: 'MyWebFont';
    font-variant-ligatures: contextual;
    text-rendering: optimizeLegibility;
    /* font-language-override: "ARB"; */
    /* unicode-bidi:initial; */
}
1

There are 1 best solutions below

3
behdad On

HarfBuzz developer here. The text renders fine with latest HarfBuzz. What version of Chrome are you using?