Tajweed Quran Reader

In the Name of Allah, the Most Beneficent, the Most Merciful.

A simple and accessible web application tailored for reading the Holy Quran with Tajweed rules. This project aims to facilitate the recitation of the Quran by visually highlighting Tajweed rules and providing audio guidance. We hope this tool serves as a beneficial resource for learners and reciters alike.

Features

• Tajweed Highlighting: Automatically parses and highlights Tajweed rules within the Quranic text.
• Audio Playback: Listen to ayah-by-ayah recitation (defaulting to Mishary Alafasy).
• Responsive Design: Works seamlessly on desktop and mobile devices.
• Interactive Learning: Click or hover over highlighted text to see the rule name and definition.
• Bilingual Interface: Supports both Arabic and English languages.

How It Works

The core of this application lies in its ability to parse raw Quranic text and apply visual styles corresponding to specific Tajweed rules.

Tajweed Rule Definition

This is the heart of the application's logic. We use a specific parsing mechanism to identify and render Tajweed rules dynamically.

The Logic: The application fetches Quranic text which contains special markers. These markers are parsed using a regular expression that looks for the pattern: [code[content]] or [code:id[content]].

• code: A unique identifier for the Tajweed rule (e.g., idgham_ghunnah, qalqalah).
• content: The actual Quranic text segment that the rule applies to.

Example: If the text contains a marker like [gh[مَن]]:

1. The system identifies gh as the rule code.
2. It looks up this code in our rules.json definitions to find the associated color (e.g., #FF5733) and description.
3. It wraps the content ("مَن") in a <span> element with the specific styling.

The Result: The user sees the text with the correct color-coded highlight. We use color-mix to blend the rule's color with transparency, creating a subtle yet clear highlight over the text. This ensures the Quranic script remains readable while clearly indicating where a Tajweed rule applies.

Technical Details

Built with simplicity and performance in mind:

• HTML5 & CSS3: Semantic markup and modern styling variables.
• Vanilla JavaScript: Lightweight logic organized into managers and core modules (TajweedManager, Player, UIManager).
• TailwindCSS: For utility-first styling and responsive layout.

Credits

This project is an open effort to serve the Quran.

• Quran Text & Audio: Sourced from Al Quran Cloud, providing reliable data and audio segments.
• Fonts: Uses Uthmanic Hafs for authentic and clear calligraphy.

---

May Allah accept this humble effort.