This document explains how Tajweed parsing. In a nutshell, it takes something like:
[h:9421[ٱ]
which is part of the data returned by the API for a Quran verse and converts it to:
<tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":9421">ٱ</tajweed>Code Examples are available in the main Readme file.
Data returned by the Global Quran and Al Quran Cloud APIs for the Tajweed edition. For example:
- https://api.alquran.cloud/ayah/24:35/quran-tajweed
- https://api.globalquran.com/ayah/24:35/quran-tajweed
A sample of this data can also be found in the data folder in tajweed.json.
This library takes the output of the Tajweed edition, and makes HTML and human being friendly.
It uses the table below to parse what the API returns and converts it to something you can understand and style with CSS.
| Type | Identifier | Colour | CSS | Description |
|---|---|---|---|---|
| hamza-wasl | [h | #AAAAAA | ham_wasl | Hamzat ul Wasl |
| silent | [s | #AAAAAA | slnt | Silent |
| laam-shamsiyah | [l | #AAAAAA | slnt | Lam Shamsiyyah |
| madda-normal | [n | #537FFF | madda_normal | Normal Prolongation: 2 Vowels |
| madda-permissible | [p | #4050FF | madda_permissible | Permissible Prolongation: 2, 4, 6 Vowels |
| madda-necesssary | [m | #000EBC | madda_necessary | Necessary Prolongation: 6 Vowels |
| qalaqah | [q | #DD0008 | qlq | Qalqalah |
| madda-obligatory | [o | #2144C1 | madda_obligatory | Obligatory Prolongation: 4-5 Vowels |
| ikhafa-shafawi | [c | #D500B7 | ikhf_shfw | Ikhafa' Shafawi - With Meem |
| ikhafa | [f | #9400A8 | ikhf | Ikhafa' |
| idgham-shafawi | [w | #58B800 | idghm_shfw | Idgham Shafawi - With Meem |
| iqlab | [i | #26BFFD | iqlb | Iqlab |
| idgham-without-ghunnah | [a | #169777 | idgh_ghn | Idgham - With Ghunnah |
| idgham-without-ghunnah | [u | #169200 | idgh_w_ghn | Idgham - Without Ghunnah |
| idgham-mutajanisayn | [d | #A1A1A1 | idgh_mus | Idgham - Mutajanisayn |
| idgham-mutaqaribayn | [b | #A1A1A1 | idgh_mut | Idgham - Mutaqaribayn |
| ghunnah | [g | #FF7E1E | ghn | Ghunnah: 2 Vowels |
See the code in examples/tajweed.php.
But in a nutshell, it takes:
"۞ ٱللَّهُ نُورُ [h:9421[ٱ][l[ل]سَّمَ[n[ـٰ]و[n[َٲ]تِ وَ[h:177[ٱ]لْأَرْضِۚ مَثَلُ نُورِه[n[ِۦ] كَمِشْكَ[s[و][n[ٲ][f:9422[ةٍ ف]ِيهَا مِصْبَاحٌۖ [h:9423[ٱ]لْمِصْبَاحُ فِى زُجَاجَةٍۖ [h:9424[ٱ][l[ل]زُّجَاجَةُ كَأَ[g[نّ]َهَا كَوْكَ[f:9425[بٌ د]ُرِّ[a:9426[ىٌّ ي]ُوقَدُ مِ[f:9427[ن ش]َجَرَ[a:9428[ةٍ م]ُّبَ[n[ـٰ]رَكَ[f:9429[ةٍ ز]َيْتُونَ[u:9430[ةٍ ل]َّا شَرْقِيَّ[a:9431[ةٍ و]َلَا غَرْبِيَّ[a:9432[ةٍ ي]َكَادُ زَيْتُهَا يُض[o[ِى]ٓءُ وَلَوْ لَمْ تَمْسَسْهُ نَا[a:9433[رٌۚ ن]ُّورٌ عَلَىٰ نُو[a:9434[رٍۗ ي]َهْدِى [h:2084[ٱ]للَّهُ لِنُورِه[n[ِۦ] م[a:476[َن ي]َش[o[َا]ٓءُۚ وَيَضْرِبُ [h:7110[ٱ]للَّهُ [h:6948[ٱ]لْأَمْثَ[n[ـٰ]لَ لِل[g[نّ]َاسِۗ وَ[h:72[ٱ]للَّهُ بِكُلِّ شَىْءٍ عَل[p[ِي]مٌ"and returns:
۞ ٱللَّهُ نُورُ <tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":9421">ٱ</tajweed><tajweed class="slnt" data-type="laam-shamsiyah" data-description="Lam Shamsiyyah" data-tajweed="">ل</tajweed>سَّمَ<tajweed class="madda_normal" data-type="madda-normal" data-description="Normal Prolongation: 2 Vowels" data-tajweed="">ـٰ</tajweed>و<tajweed class="madda_normal" data-type="madda-normal" data-description="Normal Prolongation: 2 Vowels" data-tajweed="">َٲ</tajweed>تِ وَ<tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":177">ٱ</tajweed>لْأَرْضِۚ مَثَلُ نُورِه<tajweed class="madda_normal" data-type="madda-normal" data-description="Normal Prolongation: 2 Vowels" data-tajweed="">ِۦ</tajweed> كَمِشْكَ<tajweed class="slnt" data-type="silent" data-description="Silent" data-tajweed="">و</tajweed><tajweed class="madda_normal" data-type="madda-normal" data-description="Normal Prolongation: 2 Vowels" data-tajweed="">ٲ</tajweed><tajweed class="ikhf" data-type="ikhafa" data-description="Ikhafa'" data-tajweed=":9422">ةٍ ف</tajweed>ِيهَا مِصْبَاحٌۖ <tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":9423">ٱ</tajweed>لْمِصْبَاحُ فِى زُجَاجَةٍۖ <tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":9424">ٱ</tajweed><tajweed class="slnt" data-type="laam-shamsiyah" data-description="Lam Shamsiyyah" data-tajweed="">ل</tajweed>زُّجَاجَةُ كَأَ<tajweed class="ghn" data-type="ghunnah" data-description="Ghunnah: 2 Vowels" data-tajweed="">نّ</tajweed>َهَا كَوْكَ<tajweed class="ikhf" data-type="ikhafa" data-description="Ikhafa'" data-tajweed=":9425">بٌ د</tajweed>ُرِّ<tajweed class="idgh_ghn" data-type="idgham-without-ghunnah" data-description="Idgham - With Ghunnah" data-tajweed=":9426">ىٌّ ي</tajweed>ُوقَدُ مِ<tajweed class="ikhf" data-type="ikhafa" data-description="Ikhafa'" data-tajweed=":9427">ن ش</tajweed>َجَرَ<tajweed class="idgh_ghn" data-type="idgham-without-ghunnah" data-description="Idgham - With Ghunnah" data-tajweed=":9428">ةٍ م</tajweed>ُّبَ<tajweed class="madda_normal" data-type="madda-normal" data-description="Normal Prolongation: 2 Vowels" data-tajweed="">ـٰ</tajweed>رَكَ<tajweed class="ikhf" data-type="ikhafa" data-description="Ikhafa'" data-tajweed=":9429">ةٍ ز</tajweed>َيْتُونَ<tajweed class="idgh_w_ghn" data-type="idgham-without-ghunnah" data-description="Idgham - Without Ghunnah" data-tajweed=":9430">ةٍ ل</tajweed>َّا شَرْقِيَّ<tajweed class="idgh_ghn" data-type="idgham-without-ghunnah" data-description="Idgham - With Ghunnah" data-tajweed=":9431">ةٍ و</tajweed>َلَا غَرْبِيَّ<tajweed class="idgh_ghn" data-type="idgham-without-ghunnah" data-description="Idgham - With Ghunnah" data-tajweed=":9432">ةٍ ي</tajweed>َكَادُ زَيْتُهَا يُض<tajweed class="madda_pbligatory" data-type="madda-obligatory" data-description="Obligatory Prolongation: 4-5 Vowels" data-tajweed="">ِى</tajweed>ٓءُ وَلَوْ لَمْ تَمْسَسْهُ نَا<tajweed class="idgh_ghn" data-type="idgham-without-ghunnah" data-description="Idgham - With Ghunnah" data-tajweed=":9433">رٌۚ ن</tajweed>ُّورٌ عَلَىٰ نُو<tajweed class="idgh_ghn" data-type="idgham-without-ghunnah" data-description="Idgham - With Ghunnah" data-tajweed=":9434">رٍۗ ي</tajweed>َهْدِى <tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":2084">ٱ</tajweed>للَّهُ لِنُورِه<tajweed class="madda_normal" data-type="madda-normal" data-description="Normal Prolongation: 2 Vowels" data-tajweed="">ِۦ</tajweed> م<tajweed class="idgh_ghn" data-type="idgham-without-ghunnah" data-description="Idgham - With Ghunnah" data-tajweed=":476">َن ي</tajweed>َش<tajweed class="madda_pbligatory" data-type="madda-obligatory" data-description="Obligatory Prolongation: 4-5 Vowels" data-tajweed="">َا</tajweed>ٓءُۚ وَيَضْرِبُ <tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":7110">ٱ</tajweed>للَّهُ <tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":6948">ٱ</tajweed>لْأَمْثَ<tajweed class="madda_normal" data-type="madda-normal" data-description="Normal Prolongation: 2 Vowels" data-tajweed="">ـٰ</tajweed>لَ لِل<tajweed class="ghn" data-type="ghunnah" data-description="Ghunnah: 2 Vowels" data-tajweed="">نّ</tajweed>َاسِۗ وَ<tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":72">ٱ</tajweed>للَّهُ بِكُلِّ شَىْءٍ عَل<tajweed class="madda_permissible" data-type="madda-permissible" data-description="Permissible Prolongation: 2, 4, 6 Vowels" data-tajweed="">ِي</tajweed>مٌSee it in Firefox: Add alquran.cloud/tajweed-guide. It won't work in Chrome or Safari (yet). See the known issues section in the main Readme file.
Using the css file at css/tajweed.css.