Quran text fonts .ttf

[iBasit]

As salaamu wa alaikum wr wb

Brother I wanted to know how Quran.com Quran arabic text font http://quran-1f14.kxcdn.com/fonts/ttf/p1.ttf. is created and used.

I wanted to use this on our website also.

Can you please guide on this.

[mmahalwy]

@ahmedre is probably best to answer this

[mmahalwy]

@iBasit its here: https://github.com/quran/quran.com-images

[iBasit]

https://github.com/quran/quran.com-images is very old and It's not the one which is getting used.

Brother @ahmedre can you help?

[mmahalwy]

@iBasit it is in the font folder. that's what we are using

[iBasit]

Excellent, Thank you thats exactly what I was looking for.

I'm not a .pl coder, but is there demonstration or documentation on how to use these fonts.

I see that they are Quran pages which are split into 604 pages (which I can get each verse from surah). but how can I get each ayah line from start to end of the verse? Is it by verse no?

[ahmedre]

quran/quran.com-images is what all the pngs on both legacy.quran.com (and the images themselves when enabled on quran.com, though these are not the defaults) use. quran/quran.com-images uses the fonts from King Fahd Quran Complex.

so let's back up a step - what are you trying to do? do you want an image per ayah, or do you not want images at all? if you want an image per ayah, you want the master branch of quran/quran.com-images. if you want an image per page, you want the nextgen branch of quran/quran.com-images.

if you don't want images and want fonts, then you need the fonts from either quran/quran.com-images or from quran/quran.com-frontend, and then you need the glyph code for each word in each verse, which you can get from the data present in quran/quran.com-images.

[iBasit]

I want Quran fonts and display it. I'm not sure how to display Quran fonts after downloading it from https://github.com/quran/quran.com-images/tree/master/data/fonts

I know there is data set, but I'm not sure how to get that data set. Do I need to run some script to get that data set? or is it available in cvs format?

Mainly getting the data set and using it to display the Quran fonts will be huge help for me.

jazak'Allah for helping out on this.

[ahmedre]

the data is there in the repo in sqlite format already, which is easy to convert to anything else - for example, if you download text.sqlite3.db, you'll see:

sqlite> .schema
CREATE TABLE sura_ayah_page_text (
    sura integer,
    ayah integer,
    page integer,
    text text,
    primary key (sura, ayah)
);
sqlite> select count(1) from sura_ayah_page_text;
6236
sqlite> select * from sura_ayah_page_text limit 1;
1|1|1|ﭑﭒﭓﭔﭕ

in that database, there's one line per ayah - the text here is what you need to display that (making sure that you use the font corresponding to page).

keep in mind that each word in the quran is represented by a single glyph - that's why, for the first ayah of fatiha, that's 5 characters - 4 words (bism, Allah, alra7man, alra7eem) plus one for the ayah marker at the end. that's the way qurancomplex's fonts worked (and their old website as well worked this way), we just took their data and made it a little more friendly to work with.

hope that helps insha'Allah.

[iBasit]

Perfect, This is exactly the info I needed. Jazak'Allah bro for helping out on this. :+1:

[iBasit]

Brother @ahmedre I had another question related these fonts.

If I wanted to color these fonts like following image, to make them tajweed, do you know how can I do that or how can I achieve that?

[ahmedre]

wa3laikum alsalam, unfortunately, you can't use those fonts to achieve this, because those fonts are word by word, and in order to do this, you need a font that works letter by letter. you can use one of the existing uthmani fonts and write code to color accordingly.

some of us started a project not too long ago to work on this, but it's really early on. insha'Allah if Allah makes it easy and we finish it, we'll likely open source it for people to benefit insha'Allah.

walsalam 3alaikum.

[ahmedre]

see also http://tanzil.net/wiki/Quranic_Fonts

[iBasit]

wa salaamu wa aliakum

Sorry, I was not clear on my question I think.

We do already have tajweed on our website, which is using uthmani fonts, which is color coded by css. But we get problem on different devices / browsers. Which end up not displaying properly.

At the moment we are converting tajweed word by word into svg format.

Question & Solution

I'm not sure how to create such fonts as you guys did for word by word and group them into pages. If you can show us how we can create such fonts, maybe we can color code them as well.

Then it will be same format for plain and tajweed Quran text.

as for grouping them into pages, surah, or juz. we can do that easily.

[ahmedre]

wa3laikum alsalam, ah ok, i see - yep, i ran into the same problem with the experimental tajweed stuff i mentioned (only worked in firefox basically, there's a webkit bug that causes it not to work in chrome/safari/etc).

so about the fonts, we didn't make them - these fonts came from qurancomplex - am not sure about the details on how they made them. the only thing we did was that we used libgd to draw the fonts directly on images as pngs, which we then serve to people. that was likely going to be the approach we'd take for this tajweed experimentation as well.

i am guessing there are libraries that can convert images to fonts, but am not sure since i haven't used any of these. walsalam 3alaikum.

[mmahalwy]

@iBasit I'm curious to learn, and if you don't mind, sharing the content that you have on your website as we are sharing ours. I think we can mutually benefit each other.

[iBasit]

wa salaamu wa alaikum

@ahmedre Jazak'Allah for all the help you gave, Thanks again.

We did fix major bug for tajweed for the browser, but I still prefer SVG or Fonts format, because any new device or browser can break normal fonts. Try Tajweed on our website globalquran.com to Experiment with it.

@mmahalwy

Our project and data is open source since 2006. Following are links that you can use. Currently we are working on v5.

Site v3 and v4 code https://github.com/GlobalQuran/site

http://v3.globalquran.com - demo http://v4.globalquran.com - demo

API Doc to download complete Quran http://docs.globalquran.com/API:Data/Complete_Quran

The translations & Quran we are using https://github.com/GlobalQuran/data

Tajweed file https://github.com/GlobalQuran/data/blob/master/Quran/quran-tajweed.txt For Tajweed you will need a javascript parser, which you will find inside our code on GQ.js https://github.com/GlobalQuran/site/blob/master/upload/js/gq.js

parse: {

// ....

_color: 1, // internal use with parse kids word by word

            /**
             * parse the tajweed text
             * @param quranBy
             * @param object verseObject {surah: 2, ayah: 4, verse: 'verse text here..'}
             * @returns {String}
             */
            parseTajweed: function (quranBy, verseObject)
            {
                var text = verseObject.verse;
                text = text.replace(/\[h/g, '<span class="ham_wasl" title="Hamzat Wasl" alt="').replace(/\[s/g, '<span class="slnt" title="Silent" alt="').replace(/\[l/g, '<span class="slnt" title="Lam Shamsiyyah" alt="').replace(/\[n/g, '<span class="madda_normal" title="Normal Prolongation: 2 Vowels" alt="').replace(/\[p/g, '<span class="madda_permissible" title="Permissible Prolongation: 2, 4, 6 Vowels" alt="').replace(/\[m/g, '<span class="madda_necessary" title="Necessary Prolongation: 6 Vowels" alt="').replace(/\[q/g, '<span class="qlq" title="Qalqalah" alt="').replace(/\[o/g, '<span class="madda_obligatory" title="Obligatory Prolongation: 4-5 Vowels" alt="').replace(/\[c/g, '<span class="ikhf_shfw" title="Ikhfa\' Shafawi - With Meem" alt="').replace(/\[f/g, '<span class="ikhf" title="Ikhfa\'" alt="').replace(/\[w/g, '<span class="idghm_shfw" title="Idgham Shafawi - With Meem" alt="').replace(/\[i/g, '<span class="iqlb" title="Iqlab" alt="').replace(/\[a/g, '<span class="idgh_ghn" title="Idgham - With Ghunnah" alt="').replace(/\[u/g, '<span class="idgh_w_ghn" title="Idgham - Without Ghunnah" alt="').replace(/\[d/g, '<span class="idgh_mus" title="Idgham - Mutajanisayn" alt="').replace(/\[b/g, '<span class="idgh_mus" title="Idgham - Mutaqaribayn" alt="').replace(/\[g/g, '<span class="ghn" title="Ghunnah: 2 Vowels" alt="').replace(/\[/g, '" >').replace(/\]/g, '</span>');
                verseObject.verse = text;
                return text;
            },

            /**
             * parse the gq tajweed text
             * @param quranBy
             * @param object verseObject {surah: 2, ayah: 4, verse: 'verse text here..'}
             * @returns {String}
             */
            parseGQTajweed: function (quranBy, verseObject)
            {
                var text = verseObject.verse;
                text = this.buck2arabic(text);
                verseObject.verse = text;
                return text;
                //return text.replace(/\[h/g, '<span class="ham_wasl" title="Hamzat Wasl" alt="').replace(/\[s/g, '<span class="slnt" title="Silent" alt="').replace(/\[l/g, '<span class="slnt" title="Lam Shamsiyyah" alt="').replace(/\[n/g, '<span class="madda_normal" title="Normal Prolongation: 2 Vowels" alt="').replace(/\[p/g, '<span class="madda_permissible" title="Permissible Prolongation: 2, 4, 6 Vowels" alt="').replace(/\[m/g, '<span class="madda_necessary" title="Necessary Prolongation: 6 Vowels" alt="').replace(/\[q/g, '<span class="qlq" title="Qalqalah" alt="').replace(/\[o/g, '<span class="madda_obligatory" title="Obligatory Prolongation: 4-5 Vowels" alt="').replace(/\[c/g, '<span class="ikhf_shfw" title="Ikhfa\' Shafawi - With Meem" alt="').replace(/\[f/g, '<span class="ikhf" title="Ikhfa\'" alt="').replace(/\[w/g, '<span class="idghm_shfw" title="Idgham Shafawi - With Meem" alt="').replace(/\[i/g, '<span class="iqlb" title="Iqlab" alt="').replace(/\[a/g, '<span class="idgh_ghn" title="Idgham - With Ghunnah" alt="').replace(/\[u/g, '<span class="idgh_w_ghn" title="Idgham - Without Ghunnah" alt="').replace(/\[d/g, '<span class="idgh_mus" title="Idgham - Mutajanisayn" alt="').replace(/\[b/g, '<span class="idgh_mus" title="Idgham - Mutaqaribayn" alt="').replace(/\[g/g, '<span class="ghn" title="Ghunnah: 2 Vowels" alt="').replace(/\[/g, '" >').replace(/\]/g, '</span>');
            },

            /**
             * parse the translation text
             * @param quranBy
             * @param object verseObject {surah: 2, ayah: 4, verse: 'verse text here..'}
             * @returns {String}
             */
            parseTranslation: function (quranBy, verseObject)
            {
                var text = verseObject.verse;
                text = text.replace(/\]\]/g, '$').replace(/ *\[\[[^$]*\$/g, '');
                verseObject.verse = text;
                return text;
            },

            /**
             * method for tanzil text
             * @param text
             * @returns {String}
             */
            addSpaceTatweel: function (text)
            {
                text = this.pregReplace('($SHADDA|$FATHA)($SUPERSCRIPT_ALEF)', '$1$TATWEEL$2', text);
                text = this.pregReplace('([$HAMZA$DAL-$ZAIN$WAW][$SHADDA$FATHA]*)$TATWEEL($SUPERSCRIPT_ALEF)', '$1$ZWNJ$2', text);
                return text;
            },

            /**
             * method for tanzil text
             * @param text
             * @returns {String}
             */
            addTatweel: function (text)
            {
                text = this.pregReplace('($SHADDA|$FATHA)($SUPERSCRIPT_ALEF)', '$1$TATWEEL$2', text);
                text = this.pregReplace('([$HAMZA$DAL-$ZAIN$WAW][$SHADDA$FATHA]*)$TATWEEL($SUPERSCRIPT_ALEF)', '$1$2', text);
                return text;
            },

            /**
             * method for tanzil text
             * @param text
             * @returns {String}
             */
            removeExtraMeems: function (text)
            {
                text = this.pregReplace('([$FATHATAN$DAMMATAN])$LOW_MEEM', '$1', text);
                text = this.pregReplace('($KASRATAN)$HIGH_MEEM', '$1', text);
                return text;
            },

            /**
             * highlight the words based on pattern
             * @param pattern
             * @param str
             * @returns {string}
             */
            highlight: function (pattern, str)
            {
                pattern = new RegExp('(' + pattern + ')', 'g');
                str = str.replace(pattern, '◄$1►');
                str = str.replace(/◄\s/g, ' ◄').replace(/\s►/g, '► ');
                str = str.replace(/([^\s]*)◄/g, '◄$1').replace(/►([^\s]*)/g, '$1►');

                while (/◄[^\s]*◄/.test(str))
                    str = str.replace(/(◄[^\s]*)◄/g, '$1').replace(/►([^\s]*►)/g, '$1');

                str = str.replace(/◄/g, '<span class="highlight">').replace(/►/g, '</span>');
                return str;
            },

            /**
             * internal usage
             * @param fromExp
             * @param toExp
             * @param str
             * @returns {String}
             */
            pregReplace: function (fromExp, toExp, str)
            {
                fromExp = new RegExp(this.regTrans(fromExp), 'g');
                toExp = this.regTrans(toExp);
                return str.replace(fromExp, toExp);
            },

            /**
             * internal usage
             * @param str
             * @returns {String}
             */
            regTrans: function (str) {
                return str.replace(/\$([A-Z_]+)/g, function (s, i, ofs, all) {
                    return Quran._data.UGroups[i] || Quran._data.UChars[i] || '';
                });
            }

}

[iBasit]

Brother @mmahalwy @ahmedre, We were thinking to create new Tajweed version of Quran Complex fonts using http://dm.qurancomplex.gov.sa/hafsdownload/ and obviously make it opensource.

I wanted to ask you guys, would you be interested in contributing or working together on this task, joining resources to build this will help done quickly.

We just need figure out how we can use ia files or ttf files to color code them and save them again to ttf format or svg format, which can be reference as word by word. Then other team members will start color coding them and put it on github insha'Allah.

I know you guys would hardly have time for anything, but helping on just giving your expertise advice and just looking out on it, that would still be big help.

It's just putting more brain on the task, to help archive better result insha'Allah.

[mmahalwy]

@iBasit unfortunately for me, I am too swarmed these days with many things and this would be outside my expertise.

[AsamAhmad]

Salam Aleykoum brothers, I hope you are well?

I would like to know if there has been any progress on these projects?

May God make it easier for you

[ahmadfantastic]

Assalamu Alaikum brothers,

Read through the discussion, learned alot and hopely the details here will help me in the project i am working on.

Jazakallahukhair.