Thanks for this phenomenal work.
I'm using Javascript to parse the rules and apply CSS classes to colorize the verses.
Nevertheless, it seems I miss something since the result I get (except, of course, that the colours rules are obviously not the same everywhere), is quite different from whatever I can find anywhere else.
This is what I get (using the original othmani json file available on this repository) :
const createTajweedClasses = (classesArray, rules, index) => {
const ruleStart = parseInt(rules[index].start);
const ruleEnd = parseInt(rules[index].end);
const ruleType = rules[index].type;
const limit = ruleEnd - 1;
for (let i = ruleStart; i <= limit; i += 1) {
classesArray[i] = styles[ruleType];
}
};
...
const classesArray = [];
tajweedRules.forEach((rule, index) => createTajweedClasses(classesArray, tajweedRules, index));
// It will fill classesArray with [ { Char Position } => Class Name ] elements
.idghaam_shafawi {
color: rgba(190, 0, 0, 1);
}
.idghaam_mutajaanisain {
color: rgba(190, 0, 0, 1);
}
.idghaam_mutaqaaribain {
color: rgba(190, 0, 0, 1);
}
.idghaam_ghunnah {
color: rgba(190, 0, 0, 1);
}
.idghaam_no_ghunnah {
color: rgba(150, 60, 60, 1);
}
.ghunnah {
color: rgba(0, 180, 0, 1);
}
.qalqalah {
color: rgba(8, 80, 170, 1);
}
.iqlab {
color: rgba(140, 50, 170, 1);
}
.ikhfa {
color: rgba(50, 180, 160, 1);
}
.ikhfa_shafawi {
color: rgba(50, 180, 160, 1);
}
/* Ikhfa mim saakin */
.madd_6 {
color: rgba(200, 0, 0, 1);
}
.madd_246 {
color: rgba(255, 180, 60, 1);
}
.madd_2 {
color: rgba(50, 180, 160, 1);
}
.madd_muttasil {
color: rgba(255, 0, 0, 1);
}
.madd_munfasil {
color: rgba(0, 221, 147, 1);
}
.hamzat_wasl {
color: rgba(150, 252, 0, 1);
}
.lam_shamsiyyah {
color: rgba(175, 0, 221, 1);
}
.silent {
color: rgb(180, 180, 180);
}
And for each verse, I split all the characters this way to apply the rules (simplified version of the code) :
ayah.split('').map((char, index) => applyClassOnChar(classesArray[index]);
Which will output a list of `span` elements with the appropriate class