Tajweed Highlight

A lightweight, zero-dependency JavaScript library for dynamic Tajweed highlighting of Arabic text.

Unlike font-based solutions (which require pre-encoded text) or simple coloring tools, tajweed-highlight parses standard Arabic strings and applies coloring based on Tajweed rules (Ghunna, Qalqalah, Idgham, Madd, etc.).

🚀 Features

• Dynamic Parsing: Works on any standard Arabic string with Tashkeel (diacritics).
• No Special Fonts: Works with your favorite Arabic font (Amiri, Uthman Taha, System default).
• Zero Dependencies: Pure ES6 logic.
• Lightweight: < 5KB minified.

📦 Installation

npm install tajweed-highlight

🛠️ Usage

1. Import the library and CSS

import Tajweed from 'tajweed-highlight';
import 'tajweed-highlight/src/style.css'; // Or copy CSS to your project

2. Parse your text

const arabicText = "مَن يَقُولُ"; // Standard text: Nun Sakinah + Ya (Idgham)
const html = Tajweed.parse(arabicText);

// Result:
// <span class="tajweed-idgham-ghunna">مَن ي</span>َقُولُ

3. Render it (React Example)

<p className="arabic-font" dangerouslySetInnerHTML={{ __html: html }} />

🎨 Supported Rules & Colors

| Rule | Color | Trigger | | :--- | :--- | :--- | | Ghunna (Nasalization) | 🟩 Green | Nun/Meem + Shadda (نّ, مّ) | | Ikhfa (Hiding) | 🟩 Green | Nun Sakinah + Ikhfa Letters | | Qalqalah (Echo) | 🟦 Blue | Qaf, Twa, Ba, Jeem, Dal + Sukoon (قْ) | | Madd (Prolongation) | 🟥 Red | Madd Sign (~) | | Idgham (Merging) | ⬜ Grey / 🟩 Green | Nun Sakinah + Y, R, M, L, W, N | | Iqlab (Conversion) | 🟦 Cyan | Nun Sakinah + Ba (ن + ب) | | Silent Letters | ⬜ Grey | Various silent markers |

📖 Pronunciation Guide

See the Reading Guide for detailed pronunciation instructions.

🤝 Contributing

Contributions are welcome! Please submit a PR with test cases for new rules.

📄 License

MIT