This is the web version of Recite for desktop, but for the Quran only, and with much, much more features.

Use it at: noureddin.dev/recite.

1. Two quiz modes:

   1. no-typing Uthmani script, and
   2. typing-only Imlaai script.

2. Opt-in audio recitation after completing every ayah, in either mode. (It can optionally be made before every ayah, which is called the "teacher mode".)

3. Night mode, in addition to the light mode, with your system preference as the default, but easy to change.

4. The ability to quiz yourself on any number of consecutive ayat, including for example a number of complete suar, an entire juz that starts in the middle of a sura and ends in the middle of another, etc.

5. Tajweed–color-coding in the No-typing Uthmani mode, or with no colorization.

6. The ability to use only the keyboard, only the mouse, only the touch-pad, or even only the touch screen.

7. Being responsive and so adapts to virtually any device, from a large TV to a mobile phone.

8. (For geeks) URL parameters to "pre-configure" the preferences and even what to recite. (Detailed below.)

9. (For developers) Easy to embed in other web apps. (Detailed below, under the "Even more advanced URL parameters" heading.)

https://www.noureddin.dev/recite/?PARAMS

Examples of PARAMS:

• s=1: the entire first sura.
• s=2: the entire second sura.
• s=1-2: the first and second suar.
• s=-3: the first three suar (1 is optional here).
• s=78-: all the suar from An-Naba' (sura 78) till the end of the Quran.
• p=1: the entire first page (in Mushaf Medina).
• p=2: the entire second page (in Mushaf Medina).
• p=1-3: the first three pages (in Mushaf Medina).
• j=1: the entire first juz.
• j=30: the entire last juz.
• h=1: the entire first hizb (half juz).
• r=1: the entire first rub (quarter hizb, ie eighth of a juz).
• r=1-4: the first four rubs (in the entire Quran).
• r=10//0: the first rub in the 10th juz (when the Mushaf writes «جزء» in the margin).
• r=10//1: the second rub in the 10th juz (when the Mushaf writes «ربع» (¼) in the margin).
• r=10//2: the third rub in the 10th juz (when the Mushaf writes «نصف» (½) in the margin).
• r=10//3: the fourth rub in the 10th juz (when the Mushaf writes «ثلاثة أرباع» (¾) in the margin).
• r=10//4: the fifth rub in the 10th juz (when the Mushaf writes «حزب» in the margin).
• r=10//5: the sixth rub in the 10th juz (when the Mushaf writes «ربع» (¼) in the margin).
• r=10//6: the seveth rub in the 10th juz (when the Mushaf writes «نصف» (½) in the margin).
• r=10//7: the eighth (last) rub in the 10th juz (when the Mushaf writes «ثلاثة أرباع» (¾) in the margin).
• r=10//0-10//1: the first two rubs in the 10th juz.
• r=10//6-10//7: the last two rubs in the 10th juz.
• r=10//6--7: shorthand for the previous one.
• 1/2: only the second ayah of the first sura.
• 1/1-1/3: from the first ayah of first sura, till the third ayah of the first sura.
• 2/1-4/3: from the first ayah of second sura, till the third ayah of the fourth sura.
• 1/1--4: shorthand for 1/1-1/4; ie, the first four ayat of the first sura.

Any of these parameters can have a= to add ayat from after the specified region, and/or b= to add ayat from before the specified region. Examples:

• p=1-3&a=1: the first three pages (in Mushaf Medina), and one ayah after them.
• j=15&a=36: the entire 15th juz, and 36 ayah after it.
• j=2&b=5: the entire second juz, and five ayat before it.
• p=3&b=1&a=2: the third page, one ayah before it, and two ayat after it.

The a= and b= parameters can be nagative, to subtract ayat from either end. Example:

• p=1&a=-1: the first page except the final ayah.
• p=1&b=-1: the first page except the first ayah.

Other parameters you can add to pre-configure the preferences:

• d, or dark: select the dark mode by default.

• l, or light: de-select the dark mode.

• If neither dark or light is given, it follows system preference, until you change it from the UI if you wish.

• c=, or color=: select the text colorization in the Uthmani mode; it takes the following values:

  1. t, taj, or tajweed: Tajweed–color-coding (the default).
  2. b, bas, or basic: colorize different parts of the letters differently.
  3. n, no, or none: no colorization at all.

• m=, mv=, or mvbtns=: select the placement of the movement buttons in the Uthmani mode; it takes the following values:

  1. b: bottom (the default).
  2. r: right.
  3. l: left.

• q=, qz=, or quizmode=: select the quizmode; it takes the following values:

  1. u, uthm, or uthmani: select the no-typing Uthmani mode (the default; use only to annul a previous quizmode=imlaai).
  2. i, imla, or imlaai: select the typing-only Imlaai mode.

• txt: a shorthand for quizmode=imlaai or qz=i.

• v or preview: just show the ayat; don't start the quiz. Only has effect if you've chosen an ayat range.

• by=: change the feedback rate in the Imlaai mode; it takes the following values:

  1. l or letter: by-letter (the default; use only to annul a previous by=word or by=aaya).
  2. w or word: by-word (hard). So it checks your input only after you finish a word by pressing space or enter.
  3. a or aaya: by-aaya (very hard). So it checks your input only after you finish an entire aaya (verse) by pressing enter. (Notice the spelling of aaya: it starts with two a letters and ends with just an a.)

• t, teach, or teacher: enable the teacher mode (play the audio recitation for the ayah before you start reciting it, not after).

• n, noteach, or noteacher: disable the teacher mode (the default; play the audio recitation for the ayah after you finish reciting it).

• qari=: select the Qari for the audio recitation; any invalid value (including no value) is considered as "no audio recitation". The Qaris file contains, for each audio recitation, its address followed by its name. The valid values for this option are the addresses (the lines that are all-English with no spaces).

  Note: Browsers don't allow any page to play audio before a user starts interacting with it, unless the user gave that domain the permission, so, if you use these parameters to select ayat, and a qari, and enable teacher mode, then you won't hear the first ayah. Click anywhere inside the page then press Escape to hear the first ayah. Or allow www.noureddin.dev to autoplay audio.

  Tip: Pressing Escape anytime repeats the current audio recitation, which is particularly useful in the teacher mode.

• tafsir=: select tafsir or translation; any invalid value (including no value) is considered as the Arabic "التفسير الميسر". The Tafsir file contains, for each tafsir or translation, its ID followed by its title. The valid values for this option are the IDs (the lines that are all lowercase English (ASCII) letters with no spaces), like katheer and en_sahih.

• linebreaks to separate each ayah in its line in the Uthmani mode (the default; use only to annul a previous nolinebreaks).

• nolinebreaks to make all ayat flow in the Uthmani mode.

• tl or tawjeedlegend to show the tajweed colors legend when reciting in the Uthmani mode (the default; use only to annul a previous notajweedlegnd).

• notl or notawjeedlegend to hide the tajweed colors legend.

• nc or numcolor to colorize ayat numbers when reciting in the Uthmani mode (the default; use only to annul a previous nonumcolor).

• nonc or nonumcolor to not colorize ayat numbers.

Please note that all these parameters only change the default; all of them are still changeable from the preferences window. (But take a look at "Even more advanced URL parameters" below.)

Many thanks for Khaled Hosny for his work on Quran Data and Amiri Font.

Arabic Tafsir Muyassar is from KFGQPC. Arabic Tafsir Jalalayn, and all translations, are from Tanzil. All other Arabic Tafasir are from Ayat.

Heartfelt thanks for the Verse By Verse MP3 Quran project, for providing the audio recitations for every project that needs them, including Recite Web and Ayat.

Thanks for my friends Ezz El Din and Ahmad Hassan for helping me in developing these applications and giving me invaluable feedback.

The logo is based on the beautiful Anchor by dwtoch on OpenClipArt.