arabic-design

阿拉伯语设计——让 AI 生成的界面呈现清晰的阿拉伯语

阿拉伯语是连写文字：字母相连，变音符号（ً ّ َ）位于基线的上方或下方。大多数 AI 生成的 CSS 都针对拉丁文字进行了调整——这恰恰会破坏阿拉伯语。只要设计中包含阿拉伯语，就默认遵循以下规则；不要等别人提醒。

规则 1 — 阿拉伯语中绝不使用负值 letter-spacing（头号问题）

拉丁文字的设计趋势偏爱紧凑字距（letter-spacing: -0.02em）。但对阿拉伯语来说，负字距会让连笔重叠，把文字挤成难以辨认的一团。正字距同样不对——它会让必须相连的字母断开。

/* ❌ WRONG — crushes connected letters into a blur */
h1 { letter-spacing: -1.5px; }        /* element contains Arabic */

/* ✅ RIGHT */
h1 { letter-spacing: normal; }        /* or 0 — always, for any element containing Arabic */

• 任何包含阿拉伯语（或阿拉伯语与拉丁文字混排）的元素 → letter-spacing: normal。仅此而已。
• 只有纯拉丁文字或数字元素（较大的统计数字、$99、VS、全大写拉丁文字标签）才可以使用正值或负值字距。

规则 2 — 使用真正支持阿拉伯语的字体（绝不回退到拉丁字体）

不包含阿拉伯语字形的拉丁字体会悄悄回退到系统字体，导致字重不匹配、视觉效果不协调。务必显式声明支持阿拉伯语的字体，并提供完整的字体栈：

/* pick one that matches the design's mood: */
font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Noto Kufi Arabic", sans-serif;      /* modern UI */
font-family: "Almarai", "Rubik", "Baloo Bhaijaan 2", sans-serif;                              /* rounded/friendly */
font-family: "Noto Naskh Arabic", "Amiri", serif;                                             /* editorial/classic */

• 加载实际用到的阿拉伯语字重（至少加载 400 和 700）。
• 阿拉伯语绝不应用 font-style: italic（伪斜体会破坏文字形态），也绝不依赖 text-transform（阿拉伯语没有大小写）。

规则 3 — 行高必须为变音符号留出空间

粗体展示型阿拉伯语需要足够的垂直空间，否则圆点或变音符号会与上一行碰撞。

上下文	安全行高
展示型标题（大号、粗体）	1.3
中等大小标题	1.35
正文／说明文字	1.5–1.7

不确定时，就把行高调宽松些。变音符号被裁切会立刻让人觉得“显示坏了”。

规则 4 — 方向与双向文本（“词语顺序颠倒”类问题）

• 在根元素上设置一次方向（阿拉伯语优先的页面使用 <html dir="rtl">）——子元素会继承方向。不要在每个元素上都加 dir 属性。
• 使用逻辑 CSS 属性，确保布局正确翻转：margin-inline-start、padding-inline-end、text-align: start——而不是 margin-left、text-align: left。
• 在阿拉伯语文本中嵌入的拉丁文字／数字应放在隔离的 span 中，避免双向文本算法重新排列它们：

  .ltr { display: inline-block; direction: ltr; }
  

  حدد أول <span class="ltr">MVP</span> قبل ما تبدأ
  

• direction: ltr 父元素泄漏（文字顺序颠倒的根本原因）：为控制卡片／列顺序而将布局容器设为 direction: ltr，会使 LTR 方向泄漏到其中的阿拉伯语文本，因此 Marketplace مدمج 会显示为 مدمج Marketplace。解决方法：仅对布局顺序使用 LTR；内部每个阿拉伯语文本块都要显式设置 direction: rtl。
• **الـ + 拉丁词陷阱：**绝不要把阿拉伯语定冠词前缀（الـ、بالـ、للـ）紧接在被隔离的拉丁词前面——脱离的字母会跳到错误的一侧。省略冠词（写作 عبر CLI，而不是 عبر الـ CLI），或改写句子。
• 在 RTL 上下文中翻转方向性图标（箭头）；在阿拉伯语界面中，“下一步”箭头应指向左侧。

规则 5 — 标点与换行

• 阿拉伯语句子使用阿拉伯语标点：用 ؟ 而不是 ?，用 ، 而不是 ,。
• 如果 ? 或 ، 出现在错误的一侧，原因几乎总是夹在中间的拉丁文字标记——用 .ltr 包住它，或改写句子，避免句子在它周围的从句中间断开。
• 将标题拆成多行时，每行都必须自然承接句子——阿拉伯语读者会把上下排列的多行文字读作一个连贯的意思。

规则 6 — 移动端易读性

相同的 px 尺寸下，阿拉伯字形比拉丁文字更密集。对于社交媒体／移动端画布（例如宽度为 1080px），正文应保持 ≥ 约 36–40px；展示文字则优先使用较粗的字重（600–800）。

---

发布前检查清单

1. 任何包含阿拉伯语的选择器都没有负值 letter-spacing：

   grep -nE "letter-spacing:\s*-" file.html
   

   每个匹配项都必须仅包含拉丁字母或数字。如果包含阿拉伯语，则设为 normal。
2. 每个阿拉伯语元素都显式指定了支持阿拉伯语的 font-family。
3. 阿拉伯语展示文本的行高 ≥ 1.3；正文 ≥ 1.5。
4. 嵌入的拉丁词语或数字都用 .ltr 包裹；拉丁词语前不能直接出现 الـ/بالـ/للـ：

   grep -noE "(الـ|بالـ|للـ) ?<?[A-Za-z]" file.html
   

5. 没有 direction: ltr 祖先元素的样式泄漏到阿拉伯语文本块中。
6. 渲染并检查。 截取结果并检查：字母连写正常（没有挤压或分离），变音符号没有被裁切，标点位于正确的一侧，词序正确。