arabic-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Arabic Design — clean Arabic in AI-generated UI

阿拉伯语设计——AI生成UI中的清晰阿拉伯语显示

Arabic is a cursive, connected script: letters join, and diacritics (ً ّ َ) sit above/below the baseline. Most AI-generated CSS is tuned for Latin type — and that's exactly what breaks Arabic. Apply these rules by default whenever the design contains Arabic; don't wait to be told.

阿拉伯语是一种草书连写脚本：字母相互连接，变音符号（ً ّ َ）位于基线的上方或下方。大多数AI生成的CSS都是针对拉丁文字体优化的——而这正是导致阿拉伯语显示异常的原因。只要设计中包含阿拉伯语，就默认应用以下规则，不要等出现问题再处理。

Rule 1 — NEVER negative

letter-spacing

on Arabic (the #1 bug)

规则1——阿拉伯语文本绝对不能使用负

letter-spacing

（头号问题）

Latin design trends love tight tracking (

letter-spacing: -0.02em

). On Arabic, negative tracking overlaps the letter joins and crushes words into an unreadable blur. Positive tracking is just as wrong — it disconnects letters that must join.

css

/* ❌ 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 */

Any element containing Arabic (or mixed Arabic+Latin) →
```
letter-spacing: normal
```
. Full stop.
Negative/positive tracking is allowed only on pure-Latin/numeric elements (big stat numbers,
```
$99
```
,
```
VS
```
, all-caps Latin labels).

拉丁文字体设计流行紧凑字距（

letter-spacing: -0.02em

）。但在阿拉伯语中，负字距会让连写字母重叠，使单词变成难以辨认的模糊块。正字距同样错误——它会让必须连接的字母断开。

css

/* ❌ 错误——将连写字母挤压成模糊一团 */
h1 { letter-spacing: -1.5px; }        /* 元素包含阿拉伯语 */

/* ✅ 正确 */
h1 { letter-spacing: normal; }        /* 或设为0——只要元素包含阿拉伯语，就必须这么做 */

任何包含阿拉伯语（或阿拉伯语+拉丁语混合）的元素 →
```
letter-spacing: normal
```
。就这么简单。
负/正字距仅允许用于纯拉丁语/数字元素（大型统计数字、
```
$99
```
、
```
VS
```
、全大写拉丁标签）。

Rule 2 — Use a real Arabic font (never Latin-font fallback)

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

A Latin font with no Arabic glyphs silently falls back to a system font — mismatched weight, broken look. Always declare an Arabic-capable font explicitly, with a full stack:

css

/* 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 */

Load the Arabic weights you actually use (400/700 at minimum).
Never apply
```
font-style: italic
```
to Arabic (fake oblique breaks the script) and never rely on
```
text-transform
```
(Arabic has no case).

没有阿拉伯语字形的拉丁字体会自动回退到系统字体，导致字重不匹配、显示错乱。务必显式声明支持阿拉伯语的字体，并配置完整的字体栈：

css

/* 根据设计风格选择： */
font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Noto Kufi Arabic", sans-serif;      /* 现代UI */
font-family: "Almarai", "Rubik", "Baloo Bhaijaan 2", sans-serif;                              /* 圆润友好风格 */
font-family: "Noto Naskh Arabic", "Amiri", serif;                                             /* 编辑/经典风格 */

仅加载实际用到的阿拉伯语字重（至少加载400/700）。
绝不要给阿拉伯语应用
```
font-style: italic
```
（伪斜体会破坏脚本结构），也不要依赖
```
text-transform
```
（阿拉伯语没有大小写之分）。

Rule 3 — Line-height must clear the diacritics

规则3——行高必须留出足够空间容纳变音符号

Bold display Arabic needs vertical room, or dots/diacritics collide with the line above.

Context	Safe line-height
Display headline (large, bold)	1.3
Mid headline	1.35
Body / captions	1.5–1.7

If unsure, go looser. Clipped diacritics are an instant "looks broken" tell.

粗体显示的阿拉伯语需要足够的垂直空间，否则点符/变音符号会与上方行的内容重叠。

使用场景	安全行高
标题（大字号、粗体）	1.3
中等标题	1.35
正文 / 说明文字	1.5–1.7

不确定的话，行高设置得更大一些。变音符号被截断是“显示异常”的直接信号。

Rule 4 — Direction & bidi (the "words are reversed" family of bugs)

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

Set direction once at the root (
```
<html dir="rtl">
```
for Arabic-first pages) — children inherit. Don't sprinkle
```
dir
```
attributes on every element.

Use logical CSS properties so layout flips correctly:

margin-inline-start

padding-inline-end

text-align: start

— instead of

margin-left

text-align: left

Wrap embedded Latin words/numbers inside Arabic text in an isolated span so the bidi algorithm doesn't reorder them:
css
```
.ltr { display: inline-block; direction: ltr; }
```
html
```
حدد أول <span class="ltr">MVP</span> قبل ما تبدأ
```
The
direction: ltr
parent leak (root cause of reversed word order): layout containers set to
```
direction: ltr
```
for card/column order leak LTR into the Arabic text inside — so
```
Marketplace مدمج
```
renders as
```
مدمج Marketplace
```
. Fix: LTR only for layout order; every Arabic text block inside gets explicit
```
direction: rtl
```
.
The
الـ
+ Latin-word trap: never place the Arabic definite-article prefix (
```
الـ
```
,
```
بالـ
```
,
```
للـ
```
) immediately before an isolated Latin word — the detached letters jump to the wrong side. Drop the article (
```
عبر CLI
```
not
```
عبر الـ CLI
```
) or rephrase.
Flip directional icons (arrows) in RTL contexts; a "next" arrow points left in Arabic UI.

在根元素统一设置文本方向（阿拉伯语优先的页面设为
```
<html dir="rtl">
```
）——子元素会继承该属性。不要在每个元素上都添加
```
dir
```
属性。

使用逻辑CSS属性确保布局正确翻转：使用

margin-inline-start

、

padding-inline-end

、

text-align: start

——而非

margin-left

、

text-align: left

。

将阿拉伯语文本中嵌入的拉丁语单词/数字包裹在独立的span标签中，避免双向排版算法打乱顺序：
css
```
.ltr { display: inline-block; direction: ltr; }
```
html
```
حدد أول <span class="ltr">MVP</span> قبل ما تبدأ
```
direction: ltr
父元素泄漏问题（单词顺序颠倒的根本原因）：为卡片/列布局设置
```
direction: ltr
```
的容器会将LTR属性泄漏到内部的阿拉伯语文本中——导致
```
Marketplace مدمج
```
显示为
```
مدمج Marketplace
```
。修复方法：仅为布局顺序设置LTR；内部的每个阿拉伯语文本块都显式设置
```
direction: rtl
```
。
الـ
+ 拉丁语单词陷阱：绝不要将阿拉伯语定冠词前缀（
```
الـ
```
、
```
بالـ
```
、
```
للـ
```
）直接放在独立的拉丁语单词前——分离的字母会跳到错误的一侧。去掉冠词（用
```
عبر CLI
```
而非
```
عبر الـ CLI
```
）或改写句子。
在RTL环境中翻转方向性图标（如箭头）：阿拉伯语UI中“下一页”箭头指向左侧。

Rule 5 — Punctuation & line breaks

规则5——标点符号与换行

Use Arabic punctuation in Arabic sentences:
```
؟
```
not
```
?
```
,
```
،
```
not
```
,
```
.
If a
```
?
```
or
```
،
```
floats to the wrong side, the cause is almost always a straddling Latin token — wrap it in
```
.ltr
```
or rephrase so the sentence doesn't break mid-clause around it.
When splitting a headline across lines, each line must continue the sentence naturally — Arabic readers read stacked lines as one flowing thought.

在阿拉伯语句中使用阿拉伯语标点：用
```
؟
```
而非
```
?
```
，用
```
،
```
而非
```
,
```
。
如果
```
?
```
或
```
،
```
显示在错误的一侧，原因几乎总是跨语言的拉丁语标记——将其包裹在
```
.ltr
```
标签中，或改写句子避免从句被打断。
标题换行时，每行必须自然延续句子——阿拉伯语读者会将多行视为连贯的语义整体。

Rule 6 — Mobile legibility

规则6——移动端可读性

Arabic letterforms are denser than Latin at the same px size. For social/mobile canvases (e.g. 1080px wide), keep body text ≥ ~36–40px and prefer heavier weights (600–800) for display text.

在相同像素尺寸下，阿拉伯语字形比拉丁语更密集。对于社交/移动端画布（如1080px宽），正文字体大小保持≥约36–40px，标题文本优先使用更粗的字重（600–800）。

Pre-ship checklist

上线前检查清单

No negative
```
letter-spacing
```
on any Arabic-containing selector:
bash
```
grep -nE "letter-spacing:\s*-" file.html
```
Every hit must be pure-Latin/numeric. If it wraps Arabic →
```
normal
```
.
Every Arabic element has an explicit Arabic-capable
```
font-family
```
.
Display Arabic has line-height ≥ 1.3; body ≥ 1.5.

Embedded Latin words/numbers wrapped in

.ltr

; no

الـ/بالـ/للـ

directly before a Latin word:

bash

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

No
```
direction: ltr
```
ancestor leaking into Arabic text blocks.
Render and look. Screenshot the result and inspect: letters connected (not crushed, not separated), diacritics not clipped, punctuation on the correct side, word order correct.

所有包含阿拉伯语的选择器都没有使用负
```
letter-spacing
```
：
bash
```
grep -nE "letter-spacing:\s*-" file.html
```
每个匹配结果必须是纯拉丁语/数字元素。如果包含阿拉伯语 → 改为
```
normal
```
。
每个阿拉伯语元素都显式声明了支持阿拉伯语的
```
font-family
```
。
标题阿拉伯语的行高≥1.3；正文行高≥1.5。
嵌入的拉丁语单词/数字已包裹在
```
.ltr
```
标签中；没有
```
الـ/بالـ/للـ
```
直接放在拉丁语单词前：
bash
```
grep -noE "(الـ|بالـ|للـ) ?<?[A-Za-z]" file.html
```
没有
```
direction: ltr
```
父元素将属性泄漏到阿拉伯语文本块中。
渲染并检查。截取结果截图并查看：字母连贯（不挤压、不断开）、变音符号未被截断、标点符号位置正确、单词顺序正确。

arabic-design

Original

Translation

Arabic Design — clean Arabic in AI-generated UI

阿拉伯语设计——AI生成UI中的清晰阿拉伯语显示

Rule 1 — NEVER negative
`letter-spacing`
on Arabic (the #1 bug)

规则1——阿拉伯语文本绝对不能使用负
`letter-spacing`
（头号问题）

Rule 2 — Use a real Arabic font (never Latin-font fallback)

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

Rule 3 — Line-height must clear the diacritics

规则3——行高必须留出足够空间容纳变音符号

Rule 4 — Direction & bidi (the "words are reversed" family of bugs)

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

Rule 5 — Punctuation & line breaks

规则5——标点符号与换行

Rule 6 — Mobile legibility

规则6——移动端可读性

Pre-ship checklist

上线前检查清单

arabic-design

Original

Translation

Arabic Design — clean Arabic in AI-generated UI

阿拉伯语设计——AI生成UI中的清晰阿拉伯语显示

Rule 1 — NEVER negative letter-spacing on Arabic (the #1 bug)

规则1——阿拉伯语文本绝对不能使用负letter-spacing（头号问题）

Rule 2 — Use a real Arabic font (never Latin-font fallback)

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

Rule 3 — Line-height must clear the diacritics

规则3——行高必须留出足够空间容纳变音符号

Rule 4 — Direction & bidi (the "words are reversed" family of bugs)

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

Rule 5 — Punctuation & line breaks

规则5——标点符号与换行

Rule 6 — Mobile legibility

规则6——移动端可读性

Pre-ship checklist

上线前检查清单

Rule 1 — NEVER negative
`letter-spacing`
on Arabic (the #1 bug)

规则1——阿拉伯语文本绝对不能使用负
`letter-spacing`
（头号问题）