quran-madina-html 0.3.3 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/README.md +87 -62
- package/assets/db/Madina05-Amiri_Quran-16px.json +1 -1
- package/assets/db/Madina05-Amiri_Quran_Colored-16px.json +1 -1
- package/assets/db/Madina05-Amiri_Quran_Colored-24px.json +1 -1
- package/assets/db/Madina05-Hafs-16px.json +1 -1
- package/assets/db/Madina05-Uthman-16px.json +1 -1
- package/assets/db/Madina05-me_quran-16px.json +1 -1
- package/demo/index.html +163 -114
- package/dist/quran-madina-html.js +588 -346
- package/dist/quran-madina-html.min.css +1 -1
- package/dist/quran-madina-html.min.js +2 -2
- package/package.json +59 -54
- package/.jshintignore +0 -1
- package/CODE_OF_CONDUCT.md +0 -61
- package/CONTRIBUTING.md +0 -101
- package/Gruntfile.js +0 -77
- package/SECURITY.md +0 -21
- package/assets/fonts/www.unpkg.com/quran-madina-html@0.2.4/dist/quran-madina-html.min.css +0 -1
- package/requirements.txt +0 -6
- package/src/db/build_all.py +0 -38
- package/src/db/build_db.py +0 -483
- package/src/quran-madina-html.css +0 -49
- package/src/quran-madina-html.js +0 -346
- package/template/part_width_test.html +0 -41
- package/template/render_test.html +0 -12
- package/test/db_test.py +0 -79
- package/test/render_test.py +0 -78
package/LICENSE.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Code and assets are licensed under ["Waqf" General Public License 2.0](https://github.com/ojuba-org/waqf/tree/master/2.0), 3 Muharram 1435
|
|
1
|
+
Code and assets are licensed under ["Waqf" General Public License 2.0](https://github.com/ojuba-org/waqf/tree/master/2.0), 3 Muharram 1435
|
package/README.md
CHANGED
|
@@ -1,62 +1,87 @@
|
|
|
1
|
-
# Quran Madina Html (no-images)
|
|
2
|
-
|
|
3
|
-
[](https://github.com/tarekeldeeb/quran-madina-html/actions/workflows/github-code-scanning/codeql)
|
|
4
|
+
[](https://github.com/tarekeldeeb/quran-madina-html/actions/workflows/pylint.yml)
|
|
5
|
+
[](https://github.com/tarekeldeeb/quran-madina-html/actions/workflows/py_test.yml)
|
|
6
|
+
[](https://github.com/tarekeldeeb/quran-madina-html/actions/workflows/npm-grunt.yml)
|
|
7
|
+
|
|
8
|
+
A Madina Quran HTML Renderer without images
|
|
9
|
+
|
|
10
|
+
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](https://github.com/quran/ayah-detection) downloaded from [Murtaza Raja](https://github.com/murtraja/quran-android-images-helper) helper project.
|
|
11
|
+
Every line has a stretch-x factor pre-computed to ensure the best text fitting. Afterwards, the JS library uses those Json objects to render Madina-based Quran pages and lines.
|
|
12
|
+
|
|
13
|
+
The main purpose of this library is:
|
|
14
|
+
|
|
15
|
+
* Render Quran text that's visually similar to Madina Printed Pages
|
|
16
|
+
* Efficient Loading of Quran Visual Text (Not image-based, but pure Html)
|
|
17
|
+
* Easy to use: just a simple HTML tag!
|
|
18
|
+
|
|
19
|
+
| <img src="demo/img/p106-image.JPG" width="200px" alt="Demo"> <br />Reference Image | <img src="demo/img/p106-me_quran.JPG" width="200px" alt="Demo"> <br /> HTML: Font=me_quran |<img src="demo/img/p106-hafs.JPG" width="200px" alt="Demo"> <br />HTML: Font=Hafs |<img src="demo/img/p106-amiri-colored.JPG" width="200px" alt="Demo"> <br /> HTML: Font=Amiri Quran Colored |
|
|
20
|
+
| -------------------------------------------------------------------|--------------------------------------------------|-------------------------------------------------------------------|--------------------------------------------------|
|
|
21
|
+
| <img src="demo/img/p106-amiri.JPG" width="200px" alt="Demo"> <br />HTML: Font=Amiri Quran | <img src="demo/img/p106-hafs-part.JPG" width="200px" alt="Demo"> <br /> HTML: Range of Ayas |
|
|
22
|
+
|
|
23
|
+
## Getting Started
|
|
24
|
+
|
|
25
|
+
In your Html header, add this script:
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<script type="text/javascript" src="https://unpkg.com/quran-madina-html"></script>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
* Supported ``data-name`` parameters are: Madina05 (default), others are under development (Shemerly, Qaloon, Newer Madina)
|
|
32
|
+
* Supported ``data-font`` parameters are: Hafs (default), Uthman, Amiri Quran, Amiri Quran Colored
|
|
33
|
+
* Other options include: ``data-font-size`` which defaults to 16 (px)
|
|
34
|
+
|
|
35
|
+
Then in your body, just add the tag.
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<quran-madina-html sura="2" aya="8-10"></quran-madina-html>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
If the selected aya(s) fit on a single line, the default is to generate an inline ``<span>`` element, otherwise a ``<div>`` is generated.
|
|
42
|
+
|
|
43
|
+
You can also restrict the output to a specific word sequence with the ``words`` attribute (1-based, inclusive; ``start-end``, ``start:end`` or a single ``index``). Word indices are counted starting from the given ``sura``/``aya`` and may run past it, so the rendered selection can span multiple ayas — and even cross page and sura boundaries (the sura name/basmala are shown for context but not counted as words). The non-selected words are kept in place so the original Madina line layout is preserved — only the chosen words are shown. Aya-number markers are not counted.
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<quran-madina-html sura="1" aya="1" words="1:2"></quran-madina-html> <!-- first two words only -->
|
|
47
|
+
<quran-madina-html sura="1" aya="1" words="3-10"></quran-madina-html> <!-- words 3..10, spanning ayas 1-3 -->
|
|
48
|
+
<quran-madina-html sura="1" aya="7" words="1-10"></quran-madina-html> <!-- spans Al-Fatiha into Al-Baqara -->
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
The ``words`` attribute is ignored when rendering a full ``page``.
|
|
52
|
+
|
|
53
|
+
Another option exists to render a complete quran page:
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<quran-madina-html page="106"></quran-madina-html>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
By default a header (sura name + copy/translate icons, on a multiline render) or a copy button (on an inline render) is added. Set ``headless="true"`` to drop that chrome and render only the Quran text:
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<quran-madina-html sura="2" aya="8-10" headless="true"></quran-madina-html> <!-- no header -->
|
|
63
|
+
<quran-madina-html sura="1" aya="1" headless="true"></quran-madina-html> <!-- no copy button -->
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Dev Setup
|
|
67
|
+
|
|
68
|
+
The project is published on npm ``npm install quran-madina-html``, with sources, assets and distributables.
|
|
69
|
+
Alternatively, you can fork this repo, then clone it.
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
apt install python3-distutils nodejs npm chromium-driver
|
|
73
|
+
npm install // install components and scripts
|
|
74
|
+
npm run build-db // build all json Db files
|
|
75
|
+
npm run release // build the dist with dependencies
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Demo
|
|
80
|
+
|
|
81
|
+
<https://tarekeldeeb.github.io/quran-madina-html/demo/index.html>
|
|
82
|
+
|
|
83
|
+
Don't forget to see the page source!
|
|
84
|
+
|
|
85
|
+
## Links
|
|
86
|
+
|
|
87
|
+
[X-Tags Docs](http://x-tags.org/docs)
|