السلام عليكم ورحمة الله وبركاته،
أهلاً بزملائي المطورين والمهتمين بخدمة كتاب الله.
أعمل حالياً على تطوير تطبيق ويب (Web App) يتضمن ميزة عرض المصحف الشريف بنظام "كلمة بكلمة" (Word by Word). بفضل الله، قمت بجلب بيانات الكلمات، أرقام الأسطر، ومواقع الآيات (Positions) من مصادر موثوقة (مثل بيانات Quran.com)، وأستخدم حالياً خط "حفص عن عاصم".
المشكلة الحالية:
واجهتني مشكلة في تجربة المستخدم (UX) على شاشات الجوال؛ فالخط الحالي يظهر رفيعاً جداً وصغيراً، وعند محاولة تكبيره، يتأثر الـ Layout. عندما أطّلع على منصات مثل "ترتيل" أو "Quran.com"، ألاحظ أنهم يستخدمون خطوط مجمع الملك فهد (الإصدار الثاني V2) بدقة عالية، وتكون القراءة مريحة جداً، سميكة، وسهلة للعين على الشاشات الصغيرة.
أطمح للوصول إلى هذا المستوى من الجودة والوضوح، ولدي بعض الاستفسارات الهندسية وأتمنى من أصحاب الخبرة والتجربة إفادتي:
مصدر الخطوط ونوعها: ما هو أفضل خط (أو مصادر لتحميل خطوط) مخصص للويب يعطي نفس النتيجة المريحة والسميكة على الجوال، ويدعم الرسم العثماني بدقة؟
ملف واحد أم 604 ملفات؟ هل يمكنني الاعتماد على ملف خط واحد (TTF أو WOFF2) لتمثيل المصحف كاملاً بنظام "كلمة بكلمة"؟ أم أن الممارسة الصحيحة (Best Practice) هنا تفرض عليّ استخدام 604 ملفات (خط منفصل لكل صفحة QCF) لضمان دقة الرسم وعدم تداخل الكلمات وعلامات الوقف؟
الأداء والاستضافة (Performance & Caching): التطبيق هو تطبيق ويب (وليس Native App)، مما يعني أن الاعتماد الأكبر سيكون على الـ Browser Caching. شريحة كبيرة من مستخدمي التطبيق متواجدون في سوريا، حيث سرعات الإنترنت بطيئة وغير مستقرة في أغلب الأحيان.
بناءً على ذلك، هل تنصحون برفع ملفات الخطوط وملفات الـ JSON على CDN مثل Cloudflare؟
ما هي أفضل الاستراتيجيات لتحسين الأداء (Performance) وضمان تحميل سريع للخطوط دون أن يرى المستخدم نصوصاً مشوهة أو متأخرة (تجنب الـ FOUT/FOIT)؟
جزاكم الله خيراً مقدماً، وأي توجيه، مقال، أو مشاركة لتجاربكم السابقة في بناء واجهات المصحف ستكون عوناً كبيراً لي في إنجاح هذا المشروع.
بيئة العمل: React Vite
