مشاكل الخطوط القرآنية في بيئة ios

Zghaer

السلام عليكم ورحمة الله وبركاته,
أنا عبدالكريم مطور برمجيات منذ عام ٢٠١٨ متخصص في بيئة React,React Native, SwiftUI.
قمت بتطوير برنامج بسيط لمعرفة مواقيت الصلوات باستخدام SwiftUI و وضعت فيه نسخة من القران الكريم وكانت طريقة العرض باستخدام الصور الكاملة للصفحات بحيث يكون من الصعب بناء نظام بحث متطور او ادراج بيانات للتفسير والترجمة الخ..

بعد ما يقارب سنة من اطلاق هدى للمتقين على منصة AppStore قررت ان اقوم بالتحديث الى نسخة باستخدام Expo تدعم نسخة محسنة باستخدام الخطوط الالكترونية على سبيل المثال qpc_v1, qpc_2, على نظام اندرويد يتم عرض الكلمات بدون مشاكل لكن على نظام iOS هناك بعض او الكثير من الكلمات تظهر بشكل ناقص.

أرجو من اصحاب الخبرة مساعدتي

علا صالح

Zghaer مرحبًا أخ عبدالكريم،

هل يمكنك مشاركة الكود المصدري (أو جزء العرض الخاص بالمصحف) لتشخيص سبب المشكلة بدقة

أيضًا حبذا لو تخبرنا بتفاصيل أكثر مثل مكون العرض المستخدم هل تستخدم ‎Text‎ العادية في React Native، أم مكتبة أخرى مثل ‎react-native-render-html‎ أو ‎expo-text‎ وتوفر لقطة شاشة يظهر فيها الخطأ.

كما أنصحك بمطالعة تحديات عرض الرسم العثماني للقرآن الكريم في التطبيقات
https://community.itqan.dev/d/11

علا صالح

Zghaer حياك الله أخ عبد الكريم

هل سبق لك الاطلاع على هذا المستودع فهو يوفر مكون لقارئ مصحف جاهز للتضمين داخل تطبيق React Native

https://github.com/mohamedshawky982/react-native-quran-hafs

اعتمد فيه المطور على خطوط المصحف العثماني QCF لعرض صفحات القرآن كما تظهر في مصحف المدينة. يقوم المكون بتحميل الخط المناسب لكل صفحة من خادم خارجي، ثم يرسم الصفحة كاملة داخل التطبيق بخلفية المصحف.

أيضًا هنا مستودع تطبيق اوفلاين لقراءة القرآن الكريم تم تطويره باستخدام React Native و Expo يستخدم خط UthmanicHafs.ttf

https://github.com/obeim/react-native-quran-app/

أحمد شمس

حياك الله أخي الكريم عبد الكريم وسط إخوانك في مجتمع إتقان
والشباب بإذن الله بيدخلوك معاهم في تحدي إنتاج متصفح قرآني مفتوح المصدر بحيث تتناقل خبراتكم ونصل جميعا لخدمة متميزة تفيد كل المهتمين

Zghaer

علا صالح
Image description

Zghaer

علا صالح
انا بستخدم Text العادي من React Native والخطوط بعملها لود في الBuild phase وبستخدم expo-fonts
في الصورة الأخيرة مستخدم الdigital-khatt وكان في مشاكل كما تلاحظ كلمة إياك حرف الياء بغير موضعه

كريم ابراهيم

Zghaer سلام عليكم
الخط المستخدم فيه مشاكل ولو لاحظت فهي تتكرر معك في نهاية الكلمة مع بداية الكلمة التالية
Image description

لو لاحظت هنا في الخط تكون كل صفحه عباره عن حروف وكل حرف ( glyph ) وهو بيمثل الكلمة وبيكون في على جانبي الكلمة خطين يحددوا بداية الكلمة ونهايتها

في بعض الخطوط بيكون هناك مشكلة في هذا الخط على جانبي الكلمة مثل هذة الصورة
Image description

فعند عرض كلمة وعملوا ستظهر وعملو فقط ويختفي حرف الألف
وهذا ما حدث معك في كلمة مثلهم أو تكون المشكلة في الكلمة التي تليها كمثل لإنها بدأت في مكان قبل الخط المرسوم لها
تخيل انك تبني جدار وكل كلمة تمثل حجر في الجدار فلو حجر لم يوضع في مكانه سيتم وضعه قبل الحرف الذي قبله

Image description

أتمنى أن تكون الفكرة واضحة
وأيضًا لديك مشكلة في طول السطر لانه لا يأخذ كامل الارتفاع فستجد التشكيل يختفي في العديد من السطور

جرب تغيير الخط لانه غير مناسب لل ios او أخبرني أي خط تستخدم

علا صالح

Zghaer شكرًا على توضيح المشكلة

بعد البحث يبدو أن المشكلة الأساسية هي أن نظام iOS يستخدم محرك عرض النصوص CoreText الذي لا يفعل تلقائيًا خصائص OpenType المتقدمة التي تعتمد عليها الخطوط القرآنية مثل:

calt
rlig
liga

أما نظام أندرويد فيعتمد على مكتبة HarfBuzz التي تدعم هذه الخصائص افتراضيًا لذلك تظهر الكلمات بشكل صحيح هناك.

لهذا السبب تظهر بعض الحروف في غير موضعها أو تنفصل عن الكلمة عند عرضها في iOS

علا صالح

Zghaer من الحلول المقترحة:

تفعيل ميزات OpenType في ‎iOS‎ يدويًا ‎ بدل الاعتماد على السلوك الافتراضي لCoreText‎ لتحسين اتصال الحروف.
استخدام خطوط مهيأة لـ iOS مثل ‎QPC من مجمع الملك فهد المصممة لتتوافق مع ‎iOS‎ بشكل أفضل
رسم النص القرآني كـ SVG، باستخدام مكتبات مثل ‎react-native-skia‎ أو ‎react-native-svg‎ لتجاوز محرك النصوص CoreText‎ ورسم الحروف يدويًا كمسارات متجهة

Zghaer

علا صالح
شكرأ على التوضيح لكن كيف ممكن اتجاوز هي المشكلة؟
سمعت من الأخ احمد @أحمد شمس انهم يستخدمون صور لعرض الكلمات وهذا ما لم اجده من ضمن البيانات مفتوحة المصدر.
اين من الممكن ايجاد مثل هذه البيانات؟ او كيف يمكنني حل مشكلة الخط؟

حسان الأنصاري

حاليا يقوم فريق بالعمل على مشروع مفتوح المصدر اسمه QuranViewer وهو نظام لتصفح المصحف يمكن ان يستخدمه المطورون في تطبيقاتهم والتعديل عليه وتخصيصه.
والنسخة الاولى ستكون على نظام iOS بالأساس.
ومن المفترض ان يستخدم QPC ايضا.
لا زال المشروع في طوره الاولى ولكن نرجو ان يكون هناك مخرج في وقت قريب.

Zghaer

حسان الأنصاري
جزاكم الله خير على المجهود و ان كان ممكن اكون احد المساهمين انا الحمدلله عندي خبرة جيدة ببيئة swift & SwiftUI

حسان الأنصاري

Zghaer
بسم الله ما شاء الله ربنا يبارك فيك
انا بلغت الفريق الذي يعمل على المشروع وهو الان في مراحله الاولية، وهم سيقومون بالعمل على وضع الخطوط العريضة للمشاركة في المشروع حتى نتمكن من استغلال جهودك.

ان شاء الله يكون هذا متاح في الايام القادمة

عادل بن يحي

السلام عليكم أخي @حسان الأنصاري
في برنامج Open Mushaf أستعمل الصور لعرض صفحات المصحف و خط أميري لعرض نص القرآن مع التشكيل في صفحة البحث و صفحة التفسير.
البرنامج يستعمل expo, ويتم معالجة الخط باستعمال expo-font
البرنامج يعمل على الواب https://quran.us.kg
وعلى الاندرويد https://play.google.com/store/apps/details?id=com.adelpro.openmushafnative
على نظام ios لم يتم تجريبه

كود صفحة المصحف
https://github.com/adelpro/open-mushaf-native/blob/main/components/MushafPage.tsx

كود صفحة البحث
https://github.com/adelpro/open-mushaf-native/blob/main/app/search.tsx

حسان الأنصاري

عادل بن يحي
شكرا على تعاونك يا اخ عادل، انا فعلا درست مشروع openmushaf وهي مبادرة قيمة.
وسعدت جدا بالمقابلة التي كانت معك منذ فترة
حاليا نحن نعمل على عرض المصحف بخطوط glyphs and fonts
ولكن نستهدف ان يكون هناك طريقة بديلة لاستخدام الصور للروايات التي لا يتوفر لها خطوط عالية الجودة. واظن ان مشروعك ممتاز في هذه النقطة.
ويمكن ان نتعاون معك في هذه المرحلة حتى نتعلم منك الصعوبات التي واجهتك ويمكن ان نترك لك إدارة ملف react native بحكم خبرتك بها

عادل بن يحي

حسان الأنصاري إن شاء الله، و سأكون سعيدا بالمساهمة معكم.

Zghaer

كريم ابراهيم
وعليكم السلام ورحمة الله, المشكلة الحقيقية هي كما تفضلت ان اخر حرف من كلمات معينة تكون داخلة في الكلمات التالية له مثل قوله تعالى في سورة الفاتحة في الآية الأولى باسم الله الرحمن الرحيم, حرف النون يمتد ليصل الى نهاية كلمة الرحيم وهذا ما لا يفهمه ios بشكل تلقائي حيث يقوم باجتزاء القسم الواصل للكلمة التالية

حسان الأنصاري

هناك احد الاخوة قام بالفعل بصنع مكتبة في iOS بهذا الغرض
يمكنك ان تساهم معه فيها
يمكنك قراءة أكثر عن الموضوع من هنا https://community.itqan.dev/d/98

Zghaer

حسان الأنصاري
لقد قمت بتجربة مسبقة على بيئة SwiftUI واستطعت حل المشكلة حيث انني هناك استطيع التحكم بشكل كامل في خصائص الخطوط وطريقة عرضها. لكن المشكلة عند التعامل معها في بيئات cross platform مثل expo

ثبت مجتمعنا كتطبيق لتجربة افضل

انضم إلى نشرة إتقان 📩

انضم إلى نشرة إتقان 📩

شكراً لك!