السلام عليكم ورحمة الله وبركاته،
يسرّنا في الموسوعة القرآنية (Quranpedia) أن نعلن عن إطلاق مستودع quran-svg مفتوح المصدر، وهو مشروع يوفّر صفحات المصحف الشريف بصيغة SVG عالية الجودة مع إمكانية التفاعل مع كل آية على حدة، ويدعم خمس قراءات قرآنية.
رابط المستودع: github.com/quranpedia/quran-svg
الفكرة والدافع
كثير من التطبيقات القرآنية تعتمد على خطوط مُصمَّمة خصوصًا لعرض النص القرآني، لكن هذه الطريقة لا تضمن مطابقة الرسم العثماني تمامًا لما في المصاحف المطبوعة. أردنا حلًّا يضمن مطابقة بنسبة 100% لمصاحف مجمع الملك فهد لطباعة المصحف الشريف، فكانت صيغة SVG هي الخيار الأمثل.
كيف طوّرناه؟
اعتمدنا على مصاحف مصوّرة لأعمال الطباعة أصدرها مجمع الملك فهد لطباعة المصحف الشريف بصيغة Adobe Illustrator لعدّة قراءات، ومررنا بالمراحل الآتية:
- التحويل: عالجنا ملفات Illustrator (.ai) بواسطة Inkscape لتحويلها إلى صيغة SVG.
- تحديد مواضع الآيات: استخدمنا كودًا بلغة بايثون لتحديد أماكن علامات السور وحساب مضلّعات التظليل (polygons) لكل آية.
- الضغط: في النسخة الجديدة من موقع الموسوعة القرآنية ضغطنا الملفات باستخدام خوارزمية Brotli، مما وفّر نحو 83% من الحجم الأصلي.
القراءات المدعومة
| المصحف | القراءة | الراوي | عدد الآيات (نظام العدّ) |
|---|
| حفص | عاصم | حفص | 6,236 (الكوفي) |
| ورش | نافع | ورش | 6,214 (المدني) |
| قالون | نافع | قالون | 6,214 (المدني) |
| الدوري | أبو عمرو | الدوري | 6,205 (البصري) |
| شعبة | عاصم | شعبة | 6,236 (الكوفي) |
كل مصحف يتكوّن من 604 صفحة بصيغة SVG.
المزايا التقنية
- رسوم متّجهة (Vector): تبقى حادّة وواضحة عند أي مستوى تكبير.
- تفاعلية: كل آية محاطة بمضلّع شفّاف قابل للنقر يحمل بيانات وصفية (رقم السورة، رقم الآية).
- خفيفة الحجم: النسخ المضغوطة بخوارزمية Brotli أصغر بنحو 83% من الأصلية.
- مطابقة تامّة: تضمن مطابقة الرسم العثماني بنسبة 100% لأنها صور متّجهة من المصاحف المطبوعة ذاتها.
- بيانات وصفية بصيغة JSON: ملفات JSON مرافقة تحتوي على إحداثيات المضلّعات لكل صفحة.
- صفحات مُجزّأة: الصفحات التي تضمّ أكثر من سورة متوفّرة بنسخ مجزّأة لكل سورة.
كيفية الاستخدام
بنية الملفات
mushafs/
├── hafs/
│ ├── svg/ # ملفات SVG الأصلية (001.svg - 604.svg)
│ ├── svg-br/ # ملفات مضغوطة بخوارزمية Brotli
│ └── json/ # بيانات المضلّعات لكل صفحة
├── warsh/
├── douri/
├── qalon/
└── shubah/
إبراز الآية عند التمرير
.ayahPolygon {
fill: transparent;
fill-opacity: 0;
cursor: pointer;
transition: fill-opacity 0.2s ease;
mix-blend-mode: multiply;
}
.ayahPolygon:hover {
fill: #f5e6a3;
fill-opacity: 0.8;
}
التعامل مع النقر على آية
document.querySelectorAll('.ayahPolygon').forEach(polygon => {
polygon.addEventListener('click', (e) => {
const surah = e.target.getAttribute('surah');
const ayah = e.target.getAttribute('ayah');
console.log(`Surah ${surah}, Ayah ${ayah}`);
});
});
ملاحظة مهمّة: اختلاف أنظمة عدّ الآيات
تختلف أنظمة عدّ الآيات بين القراءات بسبب اختلاف العلماء في مواضع الفصل بين الآيات، وفي عدّ البسملة آيةً مستقلّة، وفي التعامل مع الحروف المقطّعة. إذا كنت تبني تطبيقًا يدعم قراءات متعدّدة فننصح بإنشاء جدول ربط (mapping table) للتحويل بين أنظمة العدّ المختلفة.
القيود المعروفة
يعيب هذه الطريقة عدم دعم تحديد الكلمات كلمةً كلمةً، إذ إنّ كل آية تُعامَل وحدةً واحدة. لكنّ هذا القيد لا يؤثّر في معظم حالات الاستخدام مثل: الانتقال إلى آية، وتظليل الآية المقروءة، وربط التفسير بالآيات.
شاهد المصاحف مباشرة
يمكنكم تجربة المصاحف التفاعلية على موقع الموسوعة القرآنية:
المساهمة
المشروع مفتوح المصدر ونرحّب بمساهماتكم في:
- تصحيح مواضع المضلّعات إن وُجد خلل.
- إضافة قراءات جديدة.
- تحسين التوثيق.
رابط المستودع: github.com/quranpedia/quran-svg
نسأل الله أن ينفع بهذا العمل، وأن يجعله في ميزان حسنات كلّ من ساهم فيه.
والسلام عليكم ورحمة الله وبركاته.
