quran-madina-html 0.1.2

package/Gruntfile.js

@@ -0,0 +1,52 @@
+module.exports = function(grunt) {
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    concat: {
+      options: {
+        separator: ';'
+      },
+      dist: {
+        src: ['src/**/*.js', 'demo/**/*.js'],
+        dest: 'dist/<%= pkg.name %>.js'
+      }
+    },
+    uglify: {
+      options: {
+        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
+      },
+      dist: {
+        files: {
+          'dist/<%= pkg.name %>-<%= pkg.version %>.min.js': ['<%= concat.dist.dest %>']
+        }
+      }
+    },
+    jshint: {
+      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
+      options: {
+        // options here to override JSHint defaults
+        globals: {
+          jQuery: true,
+          console: true,
+          module: true,
+          document: true
+        },
+        esnext: true
+      }
+    },
+    watch: {
+      files: ['<%= jshint.files %>'],
+      tasks: ['jshint']
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+
+  grunt.registerTask('test', ['jshint']);
+
+  grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
+
+};

package/README.md

@@ -0,0 +1,41 @@
+# Quran Madina Html (no-images)
+[![pylint](https://github.com/tarekeldeeb/quran-madina-html-no-images/actions/workflows/pylint.yml/badge.svg)](https://github.com/tarekeldeeb/quran-madina-html-no-images/actions/workflows/pylint.yml)
+[![db_test](https://github.com/tarekeldeeb/quran-madina-html-no-images/actions/workflows/db_test.yml/badge.svg)](https://github.com/tarekeldeeb/quran-madina-html-no-images/actions/workflows/db_test.yml)
+[![npm-grunt](https://github.com/tarekeldeeb/quran-madina-html-no-images/actions/workflows/npm-grunt.yml/badge.svg)](https://github.com/tarekeldeeb/quran-madina-html-no-images/actions/workflows/npm-grunt.yml)
+
+A Madina Quran HTML Renderer without images
+
+Theres a pre-processing python script to generate Json databases with quran text with special metadata. The preprocessing is based on text from [Tanzil](tanzil.net), and the OCR DB from [Murtaza Raja](https://github.com/murtraja/quran-android-images-helper) helper project.
+Afterwards, the JS library uses those Json objects to render Madina-based Quran pages and lines.
+
+The main purpose of this library is:
+* Render Quran text that's visually similar to Madina Printed Pages
+* Efficient Loading of Quran Visual Text (Not image-based, but pure Html)
+* Easy to use: just a simple HTML tag! Example
+```html
+<quran-madina-html sura="2" aya="8-10"></quran-madina-html>
+```
+
+# Dev Setup
+
+```
+Fork this repo, rename it, then clone it.
+
+$ npm install	// install bower tasks
+$ bower install	// install components
+$ grunt build   // build the dependencies
+
+```
+## Project Status
+
+In early stages, no releases yet. Check the demo for PoC.
+
+# Demo
+
+https://tarekeldeeb.github.io/quran-madina-html-no-images/demo/index.html
+
+Don't forget to see the page source!
+
+# Links
+
+[X-Tags Docs](http://x-tags.org/docs)

package/bower.json

@@ -0,0 +1,16 @@
+{
+  "name": "quran-madina-html",
+  "description": "",
+  "version": "0.1.1",
+  "keywords": [
+    "web-components",
+    "x-tag"
+  ],
+  "main": [
+    "src/main.js",
+    "src/main.css"
+  ],
+  "dependencies": {
+    "x-tag-core": "*"
+  }
+}

package/build_all.py

@@ -0,0 +1,30 @@
+"""Iterates over build_db.py with multiple configurations
+   Fonts covered: Uthman, Amiri Quran Colored
+   Font Sizes: Multiple
+
+   Returns:
+        None
+"""
+from multiprocessing import Pool
+from argparse import Namespace
+from tqdm import tqdm
+from build_db import run, DEFAULTS, REPO
+
+amiri24 = DEFAULTS.copy()
+amiri24['font_size']=24
+amiri24['line_width']=400
+
+uthman16 = DEFAULTS.copy()
+uthman16['font_family'] = 'Uthman'
+uthman16['font_url'] = REPO+"assets/fonts/UthmanTN_v2-0.woff2"
+
+uthman14 = uthman16.copy()
+uthman14['font_size'] = 14
+uthman14['line_width'] = 240
+
+cfgs = [ DEFAULTS, amiri24, uthman16, uthman14 ]
+
+if __name__ == '__main__':
+    #TODO: Fix the nested progress bar
+    with Pool(4) as p:
+        r = list(tqdm(p.imap(run, list(map(lambda x: Namespace(**x) ,cfgs))), total=len(cfgs)))

package/build_db.py

@@ -0,0 +1,269 @@
+"""Builds the JSON DB for Quran-Madina-HTML-No-Images project
+    It downloads all dependencies, process the Quran String, OCR data
+    and finally spits out the JSON DB.
+
+    Raises:
+        Exception: Unexpected Quran Content from DB
+
+    Returns:
+        None
+"""
+import os
+import math
+import json
+import re
+import argparse
+import sqlite3
+import requests
+import tqdm
+from bs4 import BeautifulSoup
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+
+# Internal Constants: Do not edit!
+TMP = "tmp_download"
+OUT = "DBs"
+DB = "AyahInfo_1024.db"
+TXT = "Uthmani.txt"
+TEST_HTML_TEMPLATE = "part_width_test.html"
+STRETCH_ROUNDING = 3
+REPO = 'https://raw.githubusercontent.com/tarekeldeeb/quran-madina-html-no-images/main/'
+DEFAULTS = {'name':'Madina', 'published': 1985,
+           'title':"مصحف المدينة الإصدار القديم - مجمع الملك فهد لطباعة المصحف الشريف",
+           'font_family':'Amiri Quran Colored',
+           'font_url':REPO+'assets/fonts/AmiriQuranColored.woff2',
+           'font_size':16, 'line_width':260}
+
+def _query(query):
+    conn = sqlite3.connect(os.path.join(TMP,DB))
+    cursor = conn.cursor()
+    cursor.execute(query)
+    result = cursor.fetchall()
+    cursor.close()
+    return result
+
+def _get_aya_data(sura, ayah):
+    result = _query(f'select page_number, line_number from glyphs '
+                    f'where sura_number={sura} and ayah_number={ayah}')
+    return list(map(list, result))
+
+def _get_test_filename(font, size):
+    suffex = f'-{font}-{size}'
+    return "test"+suffex+".html"
+
+def _get_surah_name(sura_id):
+    sura_name = ["الفاتحة", "البقرة", "آل عمران",
+      "النساء", "المائدة", "الأنعام", "الأعراف", "الأنفال", "التوبة",
+      "يونس", "هود", "يوسف", "الرعد", "إبراهيم", "الحجر", "النحل",
+      "الإسراء", "الكهف", "مريم", "طه", "الأنبياء", "الحج", "المؤمنون",
+      "النور", "الفرقان", "الشعراء", "النمل", "القصص", "العنكبوت",
+      "الروم", "لقمان", "السجدة", "الأحزاب", "سبأ", "فاطر", "يس",
+      "الصافات", "ص", "الزمر", "غافر", "فصلت", "الشورى", "الزخرف",
+      "الدخان", "الجاثية", "الأحقاف", "محمد", "الفتح", "الحجرات", "ق",
+      "الذاريات", "الطور", "النجم", "القمر", "الرحمن", "الواقعة",
+      "الحديد", "المجادلة", "الحشر", "الممتحنة", "الصف", "الجمعة",
+      "المنافقون", "التغابن", "الطلاق", "التحريم", "الملك", "القلم",
+      "الحاقة", "المعارج", "نوح", "الجن", "المزمل", "المدثر", "القيامة",
+      "الإنسان", "المرسلات", "النبأ", "النازعات", "عبس", "التكوير",
+      "الانفطار", "المطففين", "الانشقاق", "البروج", "الطارق", "الأعلى",
+      "الغاشية", "الفجر", "البلد", "الشمس", "الليل", "الضحى", "الشرح",
+      "التين", "العلق", "القدر", "البينة", "الزلزلة", "العاديات",
+      "القارعة", "التكاثر", "العصر", "الهمزة", "الفيل", "قريش",
+      "الماعون", "الكوثر", "الكافرون", "النصر", "المسد", "الإخلاص",
+      "الفلق", "الناس"
+    ]
+    return "سورة " + sura_name[sura_id]
+
+def _make_html(font, font_url, font_sz, line_width):
+    with open(TEST_HTML_TEMPLATE, "r", encoding="utf8") as template:
+        soup = BeautifulSoup(template.read(), 'html.parser')
+    style_elem = soup.find("style").string # type: ignore
+    style_elem = style_elem.replace("me_quran", font) # type: ignore
+    style_elem = style_elem.replace("Amiri Quran Colored", font)
+    style_elem = re.sub(r"https.*woff", font_url, style_elem)
+    style_elem = style_elem.replace("260", str(line_width))
+    style_elem = style_elem.replace("16", str(font_sz))
+    soup.find("style").string = style_elem # type: ignore
+    with open(_get_test_filename(font, font_sz), 'w', encoding="utf8") as file:
+        file.write(str(soup))
+
+def _update_html_text(web_driver, text):
+    web_driver.execute_script(f'document.getElementById(\'test\').textContent = \'{text}\'')
+
+def _get_width(web_driver):
+    return web_driver.execute_script("return document.getElementById('test')"
+                                     ".getBoundingClientRect().width")
+
+def _update_line_data(work_pointer, cfg):
+    """Calculate the stretching factor (s), then apply to all previous line
+    parts and updates their offsets (o).
+    Finally, the returns (s,o) for the last part to be written later.
+
+    Args: work_pointer
+        suras (JSON): with complete Ayas
+        parts (list): parts of an Aya
+        sura (int): Current Surah number
+        aya (int): Current Ayah number
+        current_line (int): Line Number to update in page
+        current_line_width (float): Sum of widths of all line parts
+    """
+    suras, parts, page, sura, aya, current_line, current_line_width = work_pointer
+    look_back = 5
+    if current_line_width<20:
+        _save_json("", suras, cfg)
+        raise ValueError(f'Problem with [short] aya={aya} of sura={sura} at line={current_line}')
+    stretch = cfg.line_width/(current_line_width) if page>2 else 1
+    aya_look_back = aya-look_back if aya>look_back else 1
+    offset = 0
+    if aya > 1:
+        search_ayas = filter(lambda a: a["p"] == page, suras[sura-1]['ayas'][aya_look_back-1:aya-1])
+        for search_aya in search_ayas:
+            for search_aya_part in search_aya['r']:
+                if search_aya_part['l'] == int(current_line):
+                    tmp = search_aya_part['o']*stretch
+                    search_aya_part['o'] = math.ceil(offset)
+                    offset = offset + tmp
+                    search_aya_part['s'] = round(stretch, STRETCH_ROUNDING)
+    if len(parts) > 0:
+        parts[-1]["o"] = math.ceil(offset*stretch)
+        parts[-1]["s"] = round(stretch, STRETCH_ROUNDING)
+    return suras, parts
+
+def _get_json_filename(cfg):
+    json_file = f'{cfg.name}-{cfg.font_family.split()[0]}-{cfg.font_size}px.json'
+    return os.path.join(OUT, json_file)
+
+def _save_json(json_header, suras, cfg):
+    j = json.loads(json_header)
+    j.update({"suras":suras})
+    with open(_get_json_filename(cfg), 'w', encoding="utf-8") as json_file:
+        json.dump(j, json_file, ensure_ascii = False, indent=2)
+    print(f'Saved: {_get_json_filename(cfg)}')
+
+def run(cfg):
+    """Runs the build_db module
+    """
+    try:
+        os.mkdir(TMP)
+        # Start with downloading the Glyph DB
+        url = "https://raw.githubusercontent.com/murtraja/quran-android-images-helper"\
+            "/master/static/databases/" + DB.lower()
+        response = requests.get(url, timeout=500)
+        with open(os.path.join(TMP,DB), "wb") as file_db:
+            file_db.write(response.content)
+        print("Downloaded Quran DataBase")
+        #
+        # Then download the text from Tanzil.net
+        txt_url = "https://tanzil.net/pub/download/index.php?marks=true&sajdah=true"\
+                    "&rub=true&tatweel=true&quranType=uthmani&outType=txt-2&agree=true"
+        req = requests.get(txt_url, timeout=500, allow_redirects=True)
+        text = req.content
+        with open(os.path.join(TMP,TXT), "wb") as file_txt:
+            file_txt.write(text)
+        print("Downloaded Quran Text file.")
+    except OSError:
+        print("Skipping download ..")
+    _make_html(cfg.font_family, cfg.font_url, cfg.font_size, cfg.line_width)
+    #
+    # Finally Load the Html Template and Driver
+    chrome_options = Options()
+    chrome_options.add_experimental_option("excludeSwitches", ['enable-automation'])
+    web_driver = webdriver.Chrome(options=chrome_options)
+    dir_path = os.path.dirname(os.path.realpath(__file__))
+    web_driver.get("file://" + os.path.join(dir_path,
+                                            _get_test_filename(cfg.font_family, cfg.font_size)))
+    # Lets start building the json output ..
+    json_header = f'\
+        {{"title": "{cfg.title}",\
+        "published": {cfg.published},\
+        "font_family": "{cfg.font_family}",\
+        "font_url": "{cfg.font_url}",\
+        "font_size": {cfg.font_size},\
+        "line_width": {cfg.line_width}}}'
+    suras = []
+    page = aya = current_line_width = current_line = 0
+    print("Processing ..")
+    with tqdm.tqdm(total=os.path.getsize(os.path.join(TMP,TXT)), leave=False) as progress_bar:
+        with open(os.path.join(TMP,TXT), encoding="utf8") as file_txt:
+            for aya_line in file_txt:
+                progress_bar.update(len(aya_line.encode('utf-8')))
+                tokens = aya_line.strip().split('|')
+                if len(tokens) == 3:
+                    prev_aya = aya
+                    sura, aya, aya_text = tokens
+                    if "Amiri" in cfg.font_family:
+                        aya_text = aya_text + f' \u06DD{aya}'
+                    else:
+                        aya_text = aya_text.replace("ٱ", "ا") + f' \uFD3F{aya}\uFD3E'
+                    sura = int(sura)
+                    aya = int(aya)
+                    #Add a Sura
+                    if len(suras)<sura:
+                        suras.append({"name": _get_surah_name(sura-1), "ayas":[]})
+                    ayah_data = _get_aya_data(sura, aya)
+                    if page < ayah_data[0][0]: #new page
+                        prev_line = current_line
+                        prev_line_width = current_line_width
+                        prev_sura = sura-1 if aya==1 else sura
+                        current_line = 1 if page>1 else 3 if page==1 else 2 #first line in page
+                        current_line_width = 0
+                        page = ayah_data[0][0]
+                        new_page = page>0
+                    else:
+                        new_page = False
+                    lines = {} # Key=LineNumber, Value=Number of glyphs
+                    parts = [] # Break each ayah into parts/lines
+                    for glyph in ayah_data:
+                        if str(glyph[1]) not in lines:
+                            lines.update({str(glyph[1]):1})
+                        else:
+                            lines[str(glyph[1])] = lines[str(glyph[1])] + 1
+                    if aya==1 and sura!=1 and sura!=9:
+                        skip_words = 4 #Skip Basmala from first aya. TODO: Add Basmala Manually
+                    else:
+                        skip_words = 0
+                    if len(ayah_data) != len(aya_text.split())-skip_words:
+                        print(f'Mismatch at {sura}-{aya}: Glyphs={len(ayah_data)} for:{aya_text}')
+                    for line in lines:
+                        if line != str(current_line): #new line
+                            #Override (o,s) of previous line parts
+                            if new_page:
+                                work_pointer = (suras, parts, page, prev_sura,
+                                                prev_aya, prev_line, prev_line_width)
+                            else:
+                                work_pointer = (suras, parts, page, sura, aya,
+                                                current_line, current_line_width)
+                            suras, parts = _update_line_data(work_pointer, cfg)
+                            current_line_width = 0
+                        current_line = int(line)
+                        aya_text_part = " ".join(aya_text.split()
+                                                 [skip_words:skip_words+lines[line]])
+                        _update_html_text(web_driver, aya_text_part)
+                        aya_part_width = _get_width(web_driver)
+                        current_line_width = current_line_width + aya_part_width
+                        parts.append({"l":int(line), "t":aya_text_part,
+                                      "o":aya_part_width, "s": 1.0})
+                        skip_words = skip_words + lines[line]
+                    suras[sura-1]["ayas"].append({"p":page, "r":parts}) # New completed ayah
+    print("Closing Chrome ..")
+    web_driver.close()
+    os.remove(_get_test_filename(cfg.font_family, cfg.font_size))
+    _save_json(json_header, suras, cfg)
+
+if __name__ == '__main__':
+    parser = argparse.ArgumentParser(description='Build JSON DB for HTML Quran Rendering.')
+    parser.add_argument("--name", required=False, default=DEFAULTS["name"],
+                        help="Mus'haf Short Name")
+    parser.add_argument("--title", required=False, default=DEFAULTS["title"],
+                        help="Mus'haf Long Name")
+    parser.add_argument("--published", type=int, required=False, default=DEFAULTS["published"],
+                        help="Mus'haf Publish Date")
+    parser.add_argument("--font_family", required=False, default=DEFAULTS["font_family"],
+                        help="Font Family")
+    parser.add_argument("--font_url", required=False, default=DEFAULTS["font_url"],
+                        help="Font URL to use")
+    parser.add_argument("--font_size", type=int, required=False, default=DEFAULTS["font_size"],
+                        help="Font Size to render")
+    parser.add_argument("--line_width", type=int, required=False, default=DEFAULTS["line_width"],
+                        help="Page width to render")
+    run(parser.parse_args())

package/db_test.py

@@ -0,0 +1,32 @@
+"""Testing the Generated JSON DB including all Quran data
+"""
+import unittest
+import glob
+import json
+
+
+class Test(unittest.TestCase):
+    """Testing the Generated JSON DB including all Quran data
+    """
+    db = []
+    for f in glob.glob('./*px.json'):
+        with open(f, 'r', encoding="utf-8") as file_handler:
+            db.append({"name":f,"data":json.load(file_handler)})
+
+    def test_0_db_fields(self):
+        """Test all JSON header fields if exist
+        """
+        for field in ['title','published','font_family','font_url',
+                      'font_size','line_width','suras']:
+            # check if the obtained field is null or not
+            for data in self.db:
+                self.assertIsNotNone(data["data"][field])  # null will fail the test
+
+    def test_1_sura_count(self):
+        """Test Sura Count
+        """
+        for data in self.db:
+            self.assertEqual(len(data["data"]['suras']), 114, "Missing Suras!")
+
+if __name__ == '__main__':
+    unittest.main()

package/demo/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html dir="rtl" lang="ar">
+
+<head>
+  <meta charset="utf-8" />
+  <title>quran-madina-html مشروع</title>
+  <script type="text/javascript" src="../dist/quran-madina-html-0.1.2.min.js" data-name="Madina" data-font="Uthman"></script>
+</head>
+
+<body>
+	<h2>عرض لإمكانية مشروع قران المدينة Html بدون صور</h2>
+
+  يمكن عرض نص القران قصير بشكله الجميل وسط الكلام مثل قوله تعالى: 
+	<quran-madina-html sura="1" aya="3"></quran-madina-html> 
+  واذا تم اختيار ايات تمتد لأكثر من سطر، فيتم عرض عدة أسطر متوافقة مع ترتيب كلمات مصحف المدينة بشكل تلقائي 
+  <quran-madina-html sura="2" aya="8-10"></quran-madina-html> 
+  يتميز المشروع بأنه مفتوح المصدر ويسهل تغيير الفونت، كما يعمل على مصاحف غير مصحف المدينة
+</body>
+
+</html>