🖋 Arabic Rendering Engine — Documentation

The ACE system includes a powerful Arabic rendering engine that converts Latinized input (ktb, ya, ta, a, i, u, etc.) into fully formatted Arabic script such as:

This module is used by:

• ACE Analyzer (ace_main.php)
• Stem Tester (ace_stem_tester.php)
• Reverse Analyzer
• Quran View + Token Highlighter

---

1️⃣ Purpose of the Arabic Renderer

The rendering engine solves four major problems:

• Convert Latin root + pattern into Arabic letters.
• Insert correct vowels (fatḥa, ḍamma, kasra).
• Automatically add sukun (ْ) when two consonants occur together.
• Apply shaddah (ّ) when two identical consonants appear.
• Color radicals (r₀, r₁, r₂) and affixes based on ACE color rules.
• Apply Tajweed coloring (Qalqalah, throat letters, tafkhīm).

---

2️⃣ Latin → Arabic Letter Mapping

ACE uses the same consistent transliteration rules across the system. Each Latin token maps to an Arabic letter, including digraphs:

Latin	Arabic
AA	ع
H	ح
gh	غ
kh	خ
sh	ش
dh	ذ
th	ث
T	ط
D	ض
S	ص
Z	ظ

The parser always checks digraphs before single letters.

---

3️⃣ Vowel Handling

Latin	Arabic
a	َ (fatḥa)
i	ِ (kasra)
u	ُ (ḍamma)
(blank)	ْ (sukun)

Special long vowels:

• aA → long alif → َا
• iy → long yā’ → ِي
• uw → long wāw → ُو

---

4️⃣ Automatic Sukun Insertion

If two consonants occur consecutively:

---

5️⃣ Automatic Shaddah

When two identical consonants occur:

This includes:

• Form II (doubled radical)
• Form V and VIII assimilation
• Tajweed Idghām with ghunnah rules

---

6️⃣ Tajweed Coloring Rules

The renderer supports Tajweed class-based coloring:

Category	Description	Color
Qalqalah	ق ط ب ج د	Blue
Throat letters	ء ه ع ح غ خ	Red
Tafkhīm	ص ض ط ظ ق غ خ	Orange

The CSS classes are inside `ace_styles.css`: ```css .ar-throat { color: #e11d48; } .ar-qalqalah { color: #1d4ed8; } .ar-tafkhim { color: #ea580c; }