iOS Chrome/Safari中拆分到span的阿拉伯字母无法连写的修复求助

核心问题原因 #

阿拉伯文是依赖上下文的连写文字，每个字符的形态（词首/词中/词尾/孤立）由前后字符决定。将字符拆分到独立<span>后，浏览器会失去字符的上下文关联，iOS版Chrome/Safari的WebKit引擎对这种场景的连写支持未完全适配，错误显示孤立形态；若误用**零宽非连接符（ZWNJ, U+200C）**会进一步阻止连写，导致形态错误和间隙。

可行解决方案 #

1. 使用零宽连接符（ZWJ, U+200D）恢复连写上下文 #

在每个<span>之间插入ZWJ字符，强制浏览器将相邻字符视为连写上下文的一部分：

<div class="arabic-text">
  <span>ا</span>&#x200D;<span>ل</span>&#x200D;<span>ك</span>&#x200D;<span>ت</span>&#x200D;<span>ا</span>&#x200D;<span>ب</span>
</div>

注意：必须用ZWJ（‍）而非ZWNJ（‌），ZWNJ会中断连写。

2. 配置正确的RTL排版CSS #

确保父容器和span的排版属性支持阿拉伯文：

.arabic-text {
  direction: rtl;
  unicode-bidi: embed;
  /* 使用支持阿拉伯文连写的字体，优先系统默认或开源字体 */
  font-family: "Noto Naskh Arabic", "Amiri", "Segoe UI Arabic", sans-serif;
}

.arabic-text span {
  display: inline; /* 保持文本流连续，禁用inline-block */
  font-variant-ligatures: discretionary-ligatures; /* 强制启用连写 ligatures */
  text-rendering: optimizeLegibility; /* 优化排版，触发连写逻辑 */
}

3. 避免破坏连写的CSS属性 #

• 不要给span设置inline-block/block，会打断文本连写流
• 避免使用letter-spacing/word-spacing这类会增加字符间隙的属性，若必须使用需设置为0或负值配合ZWJ

4. 字体兼容性优化 #

iOS系统默认的阿拉伯字体（如SF Arabic）对连写的支持较好，但部分第三方字体可能存在缺陷。若自定义字体，优先选择专门优化阿拉伯文连写的字体，如Noto Naskh Arabic、Amiri等。

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