如何使阿拉伯语古兰经文本渲染效果匹配quran.com？

问题背景 #

我尝试让阿拉伯语古兰经文本的渲染效果与quran.com的展示一致，当前使用的HTML代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quranic Ayah</title>
    <style>
        body {
            font-family: 'Scheherazade', serif;
            direction: rtl;
            text-align: right;
            font-feature-settings: "liga" 1;
        }
    </style>
</head>

<body>
    <p>رَبِّ اجۡعَلۡنِىۡ مُقِيۡمَ الصَّلٰوةِ وَمِنۡ ذُرِّيَّتِىۡ​​ ۖ رَبَّنَا وَتَقَبَّلۡ دُعَآءِ‏ ٤٠</p>
</body>

</html>

但实际渲染结果存在异常，需要调整以达到quran.com的渲染效果。

修复步骤 #

1. 替换为专业古兰经字体 #

默认字体（如Scheherazade）未针对古兰经文本做专项优化，容易出现字符连写错位、音符显示异常。quran.com使用的是Amiri Quran、Uthmanic Hafs这类专为古兰经设计的字体，这类字体完美适配阿拉伯语古兰经的排版规则。替换字体并确保正确加载：

body {
    font-family: 'Amiri Quran', serif; /* 替换为专业古兰经字体 */
    direction: rtl;
    text-align: right;
    font-feature-settings: "liga" 1, "dlig" 1; /* 启用标准连写与离散连写 */
}

注：需确保字体文件已通过本地资源或合规渠道正确引入。

2. 清理文本中的隐藏字符 #

原文本可能包含不可见的空格、控制字符，这些字符会干扰排版，导致文本错位。将经文文本复制到纯文本编辑器（如Notepad++）中，清理多余的隐藏字符，确保字符序列纯净：

<p>رَبِّ اجۡعَلۡنِى مُقِيۡمَ الصَّلَوٰةِ وَمِنۡ ذُرِّيَّتِىۡ ۖ رَبَّنَا وَتَقَبَّلۡ دُعَآءِ ٤٠</p>

3. 优化CSS渲染属性 #

添加额外的CSS属性，确保阿拉伯语双向文本、字符连写的正确渲染：

body {
    unicode-bidi: embed; /* 确保双向文本的正确处理逻辑 */
    font-variant-ligatures: contextual; /* 启用上下文感知的连写规则 */
    line-height: 2; /* 增加行高，匹配quran.com的阅读舒适度 */
    font-size: 1.5rem; /* 调整字号，提升经文可读性 */
}

4. 单独设置经文编号样式 #

quran.com的经文编号与主体文本有区分度，可将编号包裹在<span>标签中单独设置样式：

<p>رَبِّ اجۡعَلۡنِى مُقِيۡمَ الصَّلَوٰةِ وَمِنۡ ذُرِّيَّتِىۡ ۖ رَبَّنَا وَتَقَبَّلۡ دُعَآءِ <span class="ayah-number">٤٠</span></p>

<style>
    .ayah-number {
        color: #666; /* 设置编号为灰色，与主体文本区分 */
        margin-right: 1rem; /* 增加编号与经文的间距 */
        font-size: 1.2rem;
    }
</style>

内容的提问来源于stack exchange，提问作者Ahmad Ismail