Tajweed colors

[AskYous]

Assalaamu 'Alaikum,

It would be really beneficial to have Tajweed colors on the letters. Here's two sites that do so:

• http://www.quranflash.com/books/Tajweed/?en&skin=night#
• http://www.recitequran.com/1:1

[ATouhou]

Agreed :-) recitequran.com is relatively easy to copy due to .gif and jsonp indexable ayat

[ahmedre]

please don't copy recitequran - we've talked to them before and, if i recall, they explicitly don't want to share their data, and i don't feel it's right for us to take it. we're working on an alternative solution.

[mmahalwy]

CC: @cpfair on this.

[ATouhou]

A longer version to accomplish the tajweed color coding, could be acquiring HQ tajweed book scan and using the tool, you extracted the font with. Then instead of compiling a font, could be SVG data or pictures

[mwiederrecht]

https://github.com/cpfair/quran-tajweed

All the data is available in JSON format!!!

[sharabash]

Jazak Allahu khayran thank you Melissa!

On Sat, Oct 7, 2017 at 1:28 PM Melissa Wiederrecht notifications@github.com wrote:

https://github.com/cpfair/quran-tajweed

All the data is available in JSON format!!!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/quran/quran.com-frontend/issues/504#issuecomment-334963629, or mute the thread https://github.com/notifications/unsubscribe-auth/AABUh8vNHQciTQdYnLqahI6EYM0DhXfuks5sp97PgaJpZM4K6FrK .

--

nour

[cpfair]

I think the bigger issue now is rendering the text with colour coding. Most sites just use a standard Arabic font, but this misses out on all the attention to detail put into the KFGQPC font that Quran.com uses, where each word is a single (hand-lettered?) glyph. A while back I did some work automatically breaking down the glyphs into their component letters, so that certain letters could be highlighted. This by itself isn't too difficult:

The problem I ran into was: the way some words are written in the current typeface, there isn't very much room to perform clear highlighting of the selected letter without bleeding into adjacent letters. These cases are relatively rare (and probably depend on one's eyesight...), but I couldn't figure out a satisfactory way of handling them. Maybe there are better ways of identifying the tajweed rules that don't involve colour-coded letters? Or maybe it's better just to go the well-trodden route here?

[mwiederrecht]

@cpfiar Could you provide examples of the problem words? If we could see them maybe we could play with different ways of displaying the highlighting and come up with something that works well. Certainly the well-trodden route is good for most cases, but maybe with some creativity we could do even better.

[cpfair]

There were two problem cases. The first being a simple lack of image area:

(2nd meem)

The second was ambiguity in letter boundaries:

(where does the meem end and the reh begin?)

Dealing with the former case could be as easy as a larger default font size, or as complicated as using a different font entirely in 'tajweed mode'. The latter can be resolved with some human intuition, but that's difficult to apply algorithmically (the most direct approach might just be a database of hand-cut glyph fragments that are automatically matched to the target).

Ultimately, with 17,000+ unique glyphs, I'd be hesitant in trusting any automatic approach to get it right 100% of the time, and I don't believe anything below 100% would be acceptable.