p5.js中阿拉伯字体显示异常（左到右排列、字形断开）如何修复？

故障表现 #

制作阿拉伯风格设计作品时，p5.js绘制的阿拉伯文本出现两类稳定复现的异常：

• 文本强制按从左到右顺序排布，不符合阿拉伯语从右到左的阅读规则
• 字符间相互断开，无法实现阿拉伯语正常的上下文连字效果
  经多款字体交叉测试，已排除字体本身故障。

复现代码 #

let bg;
let str = "السلام عليكم";
var Diwani;

function preload() {
  Diwani = loadFont('DiwaniFont.ttf');
}

function setup() {
  bg = loadImage('pattern.png');
  createCanvas(400, 400);
}

function draw() {
  background(bg);
  textSize(40);
  textAlign(CENTER);
  stroke(255, 255, 255);
  strokeWeight(5);
  textFont(Diwani);
  text(str, 200, 200);
}

故障效果参考 #

运行代码后输出的阿拉伯文本字符顺序颠倒、孤立无连字，完全不符合阿拉伯语正常书写规范。

问题原因 #

核心原因是p5.js原生的text()渲染API没有内置双向文本（BiDi）排版、**阿拉伯语字符塑形（Glyph Shaping）**能力：既不会自动识别从右到左的书写方向调整字符顺序，也不会根据字符在单词中的上下文位置匹配对应的连字字形，和使用的字体本身没有关系。

可行解决方案 #

• 方案1：手动预处理文本后渲染
  引入两个专用文本处理库完成字符串转换，再把处理完的字符串传入text()方法绘制即可：
  1. 引入arabic-reshaper库：负责根据阿拉伯语书写规则，将孤立的基础字符转换为对应上下文位置的连字形态
  2. 引入bidi-js库：负责识别文本书写方向，将字符顺序调整为从右到左的正确阅读顺序
     两个库都支持CDN直接引入，不需要本地构建，预处理逻辑参考：

  // 依赖加载完成后执行文本转换
  const reshaper = new ArabicReshaper();
  // 第一步：转换字符为正确连字形态
  const reshapedStr = reshaper.reshape(str);
  // 第二步：按从右到左规则重排字符顺序
  const bidiRes = bidi.getEmbeddingLevels(reshapedStr);
  const renderStr = bidiRes.paragraphs[0].text;
  // 最后将renderStr传入text()即可正常显示
  

• 方案2：使用适配RTL语言的p5扩展库
  直接引入封装好的p5.rtl扩展库，库内部已经内置了双向排版、连字处理逻辑，引入后调用库封装的文本绘制方法即可正常渲染阿拉伯语、希伯来语等从右到左书写的语言，不需要手动写字符串转换逻辑。注意引入时要把扩展库放在p5.js核心库的后面，否则会加载失效。
• 方案3：静态素材替代动态文本
  如果作品中用到的阿拉伯文本是固定内容，不需要运行时动态修改，可以提前在Figma、PS等设计工具中排好阿拉伯文本样式，导出为透明背景PNG素材，在p5.js中直接加载图片绘制。这个方案完全没有排版兼容问题，渲染性能也最高，做固定文案的阿拉伯风格设计作品优先选这个。

内容的提问来源于stack exchange，提问作者U-squared