cssfontsarabicasciidoctorasciidoctor-pdf

Arabic character (Lam-Alif - لاَ) rendered differently


In the following snippet the letters are rendered correctly.

<!DOCTYPE html>
<html lang="ar">

<head>
    <meta charset="UTF-8">
    <title>Arabic Font Rendering Test</title>
    <style>
        body {
            direction: rtl;
            text-align: right;
            margin: 20px;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div style="font-family: 'KacstBook', sans-serif;">
        KacstBook: لاَ إِلَهَ إِلاَّ أَنْتَ
    </div>
</body>

</html>

From another website I checked and the text should look like bellow as expected (as shown in above snippet output).

How Lam-Alif Should Look Like

But I am using asciidoctor-web-pdf to generate pdf from .adoc file. Here the very sentence is rendered differently:

La-Ilaha-Illa-Anta

The CSS I am using in asciidoctor-web-pdf is:

@font-face {
    font-family: 'KacstBook';
    src: local('KacstBook');
    size-adjust: 200%;
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

body {
    font-family: "KacstBook", "Noto Serif Bengali", "Noto Serif", serif !important;
}

What might be the issue here? Why (Lam-Alif - لاَ) is not rendered correctly?


Solution

  • Using font-feature-settings: "liga" 1; in the body solved my issue.