The challenge of making a Quran App

It was a ruinous experience on my Android phone that started all this off. That and not being able to zoom text. There are many Quran applications available. Amazing, admirable efforts in fact, and I do not want to take away anything from these whatsoever.

However on that particular day and at that particular time using one such application through the garish UI, adverts splattered across the bottom of the screen (🤢), and the inability to simply change the size of the text sparked something in me!

I’m quite sure you’d know many such Quran apps. It occurred to me – largely out of frustration – if I might also develop a Quran app. I mean I knew how to code and with some research and determination I might well be able to figure out how to actually display the Quranic text itself. (Typical developer 😂😂)

I was off down a rabbit hole of R&D attempting to understand how the other Quran apps were doing their magic.

Many of the Quran apps use an ingenious and yet mischievously simple method of displaying the Quran. Instead of what you might expect, complex typography, they are simply displaying an image for each page of the Mushaf! (Yes that’s right) and it’s amazing how far you can get with this approach once you have the images of course.

But being images they have a singular flaw: the inability to reflow text.

This means: You can’t set a font size. Text will not wrap around onto a new line when you zoom. And the words per line are fixed. All zooming will actually do is to enlarge the image, and because text will not wrap you inevitably have to awkwardly scroll the image side to side.

The text will forever be static and fixed. The best you might be able to do is to orient your device horizontally/vertically to suit. My main gripe with many of the Quran apps stemmed from this precise issue.

No matter I thought, the full Arabic text MUST be available as text somewhere and I can simply use that instead. 

Modern operating systems support Unicode and I could simply display the text and let the OS handle everything. Unicode for those that don’t know is a fantastic idea and it’s the reason you can view: English, Arabic, Chinese, Russian, Hindi and many more languages on your device. In fact it provides the ability to display text in all of the world’s writing systems.

It does this by assigning a specific code to each character of a writing system. A committee oversees the process of assigning codes and generally looking after what is called the Unicode Standard.

For example the uppercase character ‘A’ has a Unicode character code of 65. Over 1.1 million characters are a part of the standard! One can write in latin script or русский just as easily as हिन्दी or عربي or even 中国人. There are specific codes for emojis ☺️ and symbols 🕋 and new ones are being added all the time. To my surprise, there are specific Unicode characters to display common Islamic elements too. A few examples:

Allah         ﷲ  

Salawat       ﷺ  

Bismillah     ﷽

Jallajalalouhou   ﷻ

Next time, in lieu of writing PBUH you might try ﷺ instead (go ahead and copy and paste that).

Unfortunately there is a catch to this wonderful system: The fonts installed on your device have to have matching glyphs (characters) for each Unicode character code for it to be displayed. Unicode has over a million characters, however I can assure you, your device does NOT have all of these. It would waste a lot of your device memory to do so.

Your device will have fonts for most of the common languages and even with these, the fonts will likely not contain every possible character combination or glyph for that particular language. This is the reason you might come across the following symbol from time to time: , □

Now that you understand Unicode let’s get back on track procuring the Quranic text in Arabic.

Here I’d like to introduce Tanzil.net. it’s a site that provides type checked Quranic Arabic text as well as translations of the Quran into the many of the worlds languages. I’m blown away by the work they are doing and cannot thank them enough. Most all the Quran applications available are using the translations provided by Tanzil.net.

Arabic is quite a peculiar language, it is written cursively and letters that adjoin each other can dramatically alter the ligatures that are possible. Unicode caters for this and you’re able to, easily enough, browse an Arabic website. Arabic uses triliteral roots for verbs and nouns such as كاتب and it is only with the use of diacritical marks (or context) that allow the determination of a word. كاتب could refer to a book or a writer. See the example below and note the difference in the diacritics.

Book:    كِتَاب → K-T-B → Kitab → Book

Writer:  كاتِب → K-T-B  → Katib → Writer

So it did come as surprise when I sent out a version of my Quran app for testing, that immediate feedback concerning the Quranic text itself came back. Specifically issues with missing diacritical marks. Missing a fathah (ﹶzabar) or kasrah (zehr) is a big deal let me tell you. It can alter the meaning of a word or a whole sentence!

I should point out, the issue does not lie with the Quranic text from Tanzil.net. The root cause proceeds from the limitations of the Arabic fonts installed on devices.

They simply do not have the glyphs for the various possible combinations of ligatures necessary for the correct display the Quranic text.

My first thought was to find Arabic fonts that were more fleshed out and use them rather than leaving it to the default on device font. I tried quite a few but none of them took. With every attempt there were instances and edge cases where the text failed to properly match the Quranic text. 😔

I’ll digress a little only to remark that the landscape of digital Arabic typography is barren wasteland. Given the rich heritage of Islamic calligraphy, discovering this first hand was very heart breaking. Things are improving and there are many projects underway hoping to address these shortcomings. 

I had thought I had reached the end of my journey. Try as I might I could not get the Quranic text to display correctly and precisely. I knew though, that others were doing just that. Quran.com for example. How did they mange to pull it off given the difficulties that Quranic Arabic poses with its myriad of ligature combinations and confluence of diacritical marks?

The King Fahd Complex in Saudia Arabia provides a standardised print edition of the Quran. You will find this edition in the two Harams, Mecca and Medina. Digital editions of which are also available in various formats.

Interestingly the font used in the digital and print editions are the same. The font used is beautiful and I suppose like many I had incorrectly assumed that the printing was an exclusively digital exercise. That is to say the fonts, production, typesetting everything was done on a computer.

It was with astonishment then that I made the discovery that it was hand written by a single individual, Uthman Taha: (Wiki details) a renowned master calligrapher in the traditional style. I was curious to learn how the digital editions were produced. Were they essentially facsimiles of the print edition?

The King Fahd Complex also produces a separate digital font to be used for the printing of the Quran. Font files are simple enough, you can think of them as lookup tables. Given a specific Unicode character code it will return the appropriate glyph for that character (if one exists).

Unicode characters codes are standarised. ع already has a code and is already available to map to a glyph of your choice depending on the language. That’s sort of the point of The Unicode Standard. 

In order to fully, precisely and accurately display the Quran the master stroke by The King Fahd complex was not to attempt to create a more perfect Arabic font. But to bend the font format to the more precise needs of the Quranic text. Instead of using a standard Unicode character code for each character it used a code to encode each word of the Quran! Yes this font contains the Quran word by word and yes this is probably one of the longest fonts 😉.

It was down an alley way of Google searches I happened on a few open source GitHub repositories and the King Fahd Complex website. I chanced upon the panacea. The magical font possessed of absolute genius! Thus Wahi App was born.