quran-madina-html 0.3.0 → 0.3.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/README.md +10 -3
- 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/assets/img/sura_border_sym4.svg +8 -0
- package/demo/img/p106-amiri-colored.JPG +0 -0
- package/demo/img/p106-amiri.JPG +0 -0
- package/demo/img/p106-hafs-part.JPG +0 -0
- package/demo/img/p106-hafs.JPG +0 -0
- package/demo/img/p106-image.JPG +0 -0
- package/demo/img/p106-me_quran.JPG +0 -0
- package/demo/index.html +81 -0
- package/dist/quran-madina-html.js +55 -29
- package/dist/quran-madina-html.min.css +1 -1
- package/dist/quran-madina-html.min.js +2 -2
- package/package.json +1 -2
- package/requirements.txt +1 -1
- package/src/db/build_db.py +8 -2
- package/src/quran-madina-html.css +12 -1
- package/src/quran-madina-html.js +55 -29
package/README.md
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
# Quran Madina Html (no-images)
|
|
2
2
|
[](https://github.com/tarekeldeeb/quran-madina-html/actions/workflows/github-code-scanning/codeql)
|
|
3
3
|
[](https://github.com/tarekeldeeb/quran-madina-html/actions/workflows/pylint.yml)
|
|
4
|
-
[](https://github.com/tarekeldeeb/quran-madina-html/actions/workflows/py_test.yml)
|
|
5
5
|
[](https://github.com/tarekeldeeb/quran-madina-html/actions/workflows/npm-grunt.yml)
|
|
6
6
|
|
|
7
7
|
A Madina Quran HTML Renderer without images
|
|
8
8
|
|
|
9
9
|
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.
|
|
10
|
-
Afterwards, the JS library uses those Json objects to render Madina-based Quran pages and lines.
|
|
10
|
+
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.
|
|
11
11
|
|
|
12
12
|
The main purpose of this library is:
|
|
13
13
|
* Render Quran text that's visually similar to Madina Printed Pages
|
|
14
14
|
* Efficient Loading of Quran Visual Text (Not image-based, but pure Html)
|
|
15
15
|
* Easy to use: just a simple HTML tag!
|
|
16
16
|
|
|
17
|
-
<img src="
|
|
17
|
+
| <img src="demo/img/p106-image.JPG" width="200px"> <br />Reference Image | <img src="demo/img/p106-me_quran.JPG" width="200px"> <br /> HTML: Font=me_quran |<img src="demo/img/p106-hafs.JPG" width="200px"> <br />HTML: Font=Hafs |<img src="demo/img/p106-amiri-colored.JPG" width="200px"> <br /> HTML: Font=Amiri Quran Colored |
|
|
18
|
+
| -------------------------------------------------------------------|--------------------------------------------------|-------------------------------------------------------------------|--------------------------------------------------|
|
|
19
|
+
| <img src="demo/img/p106-amiri.JPG" width="200px"> <br />HTML: Font=Amiri Quran | <img src="demo/img/p106-hafs-part.JPG" width="200px"> <br /> HTML: Range of Ayas |
|
|
18
20
|
|
|
19
21
|
# Getting Started
|
|
20
22
|
In your Html header, add this script:
|
|
@@ -30,6 +32,11 @@ Then in your body, just add the tag.
|
|
|
30
32
|
<quran-madina-html sura="2" aya="8-10"></quran-madina-html>
|
|
31
33
|
```
|
|
32
34
|
If the selected aya(s) fit on a single line, the default is to generate an inline ``<span>`` element, otherwise a ``<div>`` is generated.
|
|
35
|
+
|
|
36
|
+
Another option exists to render a complete quran page:
|
|
37
|
+
```html
|
|
38
|
+
<quran-madina-html page="106"></quran-madina-html>
|
|
39
|
+
```
|
|
33
40
|
|
|
34
41
|
# Dev Setup
|
|
35
42
|
|