Quran.js

The Glorious Quran seems to attract more misinformation, rage , fear and reverence than any other book in the 21st Century. And yet, this subtle text which repeatedly exhorts its reader to ponder and think, is rarely discussed in a meaningful, intelligent discourse, even among those who consider it the unaltered word of God. This project is a humble attempt to make it more accessible to all, by offering a javascript API to the sacred text.

Examples

Here's the snippet of code you need to display verse 9 from chapter 15.

    <script 
      chapter=15 verse=9 
      src="http://qzaidi.github.io/quran/js/quran.js">
    </script>
    

And here's that snippet, in action. Please report an issue if you do not see the arabic text below.

A div is automatically created to hold the arabic text, and the default styling is applied. Thats mostly about setting the direction to rtl and using a nice web font like Scheherazade.

When the defaults aren't good enough, you could create and style the container element yourself, and pass its selector to quran.js. For example, if you want finer control on background color, you could do something like this

    <script 
      chapter=15 verse=9 selector="#verse"
      src="http://qzaidi.github.io/quran/js/quran.js">
    </script>
    <div id="verse" style="font-size: 28px; padding: 5px; direction: rtl;"></div>
    

Sometimes, its important to see a verse in its context, for context adds to the meaning. Add a count to fetch multiple verses.

    <div id='verses'></div>
    <script 
      chapter=93 verse=6 count=4 selector='#verses'
      src="http://qzaidi.github.io/quran/js/quran.js">
    </script>
    

... Loading

While no translation can capture the subtle meanings, for lesser mortals who don't understand Arabic, the english helps. To see the translation, add another parameter called trans, and set it to the element where you would like to show the translation.

    <div id='verses2'></div>
    <div id='translation'></div>
    <script 
      chapter=93 verse=6 count=5 selector='#verses2' trans='#translation'
      src="http://qzaidi.github.io/quran/js/quran.js">
    </script>
    

... Loading

Finally, if you want to listen, you can set audio to true like this. Clicking on the verse then would play it.

    <script 
      chapter=93 verse=6 
      audio="true"
      src="http://qzaidi.github.io/quran/js/quran.js">
    </script>
    

How it works

Unlike the old and the new Testaments, Quran is only 6236 verses long(or 6348, depending on how you count). I have imported the arabic text from tanzil.net in a public google spreadsheet, and the quran.js script uses the json API of google spreadsheets. Hosting of the script is courtsey github.

There is also a webSQL API and a Node.js API for Holy Quran. For feedback - find me at qzaidi.github.io