Repository navigation
Tajweed support #62
Description
Esalam Alaikum
I know this subject has been thoroughly detailed in the following issue, with all the possible technical possibilities: #12
But, unless I'm wrong, it is still not supported.
I believe something like this simply works (tested in Firefox and Brave):
<p>
<span>مَٰ</span><span style="color: gray;">لِ</span><span>كِ يَوْمِ ٱلدِّي</span><span style="color: red;">نِ</span>
</p>
So the only issue for me is to have the tajweed information in the Quran edition.
For instance, for my needs, I need tajweed data integrated (ideally) in these editions:
ara_quranuthmanihaf : "Quran Uthmani Hafs"
ara_quranwarsh : "Quran Warsh"
ara-quranqaloon : "Quran Qaloon"
Is it possible? Can I found the information elsewhere?
Baraka allahu fik for your very useful project
Activity
bdiouih commentedon Jul 13, 2025
Esalam Alaikum
Can you please help me with issue ?
Baraka allahu fik
fawazahmed0 commentedon Jul 13, 2025
you can try quran cloud
bdiouih commentedon Jul 14, 2025
Thank you for your reply. This should be indeed helpful.
Concerning my request here:
Do you think, I can find this information somewhere?
Since (if I'm not mistaken), this does'nt seem to be available neither in your excellent library nor alquran.cloud
Thank you very much
fawazahmed0 commentedon Jul 14, 2025
For Uthmani Script, you can use this and parse it using tajweed guide provided by quran.cloud.
For Warsh & Qaloon, I don't think tajweed data is available anywhere.
bdiouih commentedon Jul 17, 2025
Thank you for your answer.
This is indeed what I thought.
I hope someone can opensource available Warsh & Qaloon data.
bdiouih commentedon Oct 5, 2025
I used this excellent Quran API in a project and have successfully implemented a Tajweed-colored Quran text renderer using the data from this API.
You can see it in action in this Android application: iqraa
And here's a screenshot:
The implementation is a pure JavaScript class that takes the plain Quran text (from this API) and processes it to output HTML with appropriate CSS classes for different Tajweed rules. This makes it highly portable for use in web apps, React Native, or—as in my case—embedded in an Android WebView.
Key Features of the Implementation:
I believe this could be a valuable addition to the ecosystem and would be happy to open-source the code if there is enough interest from the community.
For anyone searching online:
If you're working on a similar feature or are interested in using this code, please reply to this comment or give it a 👍. This will help gauge interest for the maintainers and me.
A big thank you to @fawazahmed0 for providing the foundational API that makes such projects possible