الخطوط العربية
بسم الله الرحمن الرحيم،
مؤخراً ظهرت العديد من التقنيات الجديدة التي تقوم على مبدأ تحويل النصوص التي تريدها في صفحتك لصور بخط أنت تحدده، لتظهر للزائر صورة النص بالخط المطلوب وبذلك تصمم اجمل التصاميم لموقعك بدون استخدام محرر الصور، كلنا يعلم أنه عند تصميمك لصفحة تقوم بتحديد الخط المستخدم بحيث تضمن وجوده على أجهزة زائري الموقع وإلا فلن يظهر الخط لديهم وغالباً مايتم تحديد عدة خطوط، وهذه الخطوط معروفة للمصممين وهي موجودة في كل نظام تشغيل.
تقنية typeface.js تقوم على فكرة تحويل الخط إلى ملف جافاسكربت لتقوم باستخدامه، جربت هذه التقنية ولكنها اعطت حروفاً منفصلة (مثلاً: ح ر و ف).
تقنية sIFR الشهيرة والتي تعتمد على وضع الخط داخل ملف فلاش (swf) لتقوم باستخدامه لم تعمل مع العربية أبداً (إذا عملت مع أحدكم رجاء أخبروني).
تقنية cufon أيضاً تقوم على تحويل الخط إلى ملف جافاسكربت ولكن نفس مشكلة typeface.js تظهر الحروف العربية بالخط المطلوب ولكن مقطعة.
كل هذه التقنيات ينقصها دعم العربية، لذلك واصلت البحث حتى وصلت لـ Facelift وهو عبارة عن خليط بين javascript و php ولكن يعتمد بشكل رئيسي على مكتبة GD في PHP.
حملت المكتبة وكتبت بالعربية لأصل لنفس مشكلة مكتبة GD وهي إظهار الأحرف العربية بشكل مقطع، طبعاً فوراً توجهت لمكتبة الأستاذ الكبير خالد الشمعة وحملت آخر إصدار من مكتبته الكبيرة حيث اردت استخدام الصنف الذي كتبه لحل مشكلة العربية في GD، والحمد لله بخطوات بسيطة اتممت العمل لأصل إلى هدفي وهو توليد صور مكافئة للنصوص التي تكتبها بالخط الذي تريده وهو ماتفعله جميع التقنيات التي ذكرت، تقوم بتحويل الكتابة بشكل آلي إلى صورة بالنص الذي تريده.
يوجد الآن ملف لكي تحمله وتقوم ببعض التجارب عليه، لكن أولاً يجب أن تتأكد من وجود مكتبة GD لديك عن طريق استدعاء ملف generate.php الموجود في الحزمة وستظهر لك صورة مكتوب فيها كلمة null:
شكل الصورة
إذا لم تظهر لديك الصورة فمكتبة GD ليست موجودة لديك وفي هذه الحالة لاتكمل قراءة هذه التدوينة
الآن توجه إلى صفحة index.php وشاهد النتيجة:
النتيجة
مكتبة Facelift جيدة إذ تستعمل الكاش لحفظ الصور لأن مكتبة GD تستهلك الكثير من الموارد ولكن جودة النص المصدري ليست كما ينبغي وسأقوم في الأيام المقبلة بالكثير من التعديلات عليها وكتابة تدوينة مفصلة لاستخدامها في تصاميمك القادمة (ويمكن إضافة للوردبريس!)، تصور أن تزين موقعك بعناوين بخط النسخ!
حمل المكتبة المعدلة (634)
عزيزي خالد،
أنا استخدم كلاس الزميل خالد منذ زمن (مثال للرسام – طريقة استخدامه ومثال للفلاش وجرب 101281111 دبلوم هنا) بعدما عدلت عليها بعض البقز، وقام الأخ خالد مشكوراً باعتماد تلك التعديلات.
الشاهد هنا أن عيب هذا الكائن أنه لا يدعم الحركات
لكني وقعت بالصدفة على مكتبة TCPDF والتي ساعد الأخ صالح المطرفي على تطويرها لتدعم العربي بشكل أفضل (مثال PDF عربي)
كما أن كود البرمجة أقل بكثير نظراً لعدم الحاجة للتحويل بين utf8 و cp1256 كما في كائن الشمعة.
لذا أنصحك باعتماد الخيار الثاني فقد قمت بتجربته بنجاح ولكني لم أضفه إلى برامجي القديمة بعد (قاتل الله الكسل).
سعيد جداً بطرقك لهذا الباب الذي يرقى بأمة كاملة
شكراً لك أخوي خالد للتطرق لهذا الموضوع المهم والجميل في عالم تصميم وتطوير الويب ولقد استفدت من المكتبه التي طرحها الأستاذ خالد الشمعة سابقاً وكانت رائعة ومفيده وشكراً للأخ عبدالعزيز على تعليقه ودعمه بالأمثله والتجارب وأشكر الأخ صالح المطرفي الذي دائماً أرى دعمه ووجوده في كثير من الأمور
اتضح الأن أن TCPDF هي أفضل حل لأنها تدعم الحركات ولعدة أسباب منها الكود البرمجي الأقل لكن أين نجد كلاس TCPDF بعد تطويره حيث انني حملت الكلاس الموجود في الموقع ورأيته لم يدعم العربي بالشكل الصحيح
اطيب تحياتي
شكراً لك أستاذ عبد العزيز دائماً سباق في كل الأمور، تجربتك رائعة بكل المقاييس. لكن لم اقتنع بميزات الفلاش
@عبد الملك: أنا اتكلم عن تحويل النصوص العادية في متصفحك إلى صور كي يتم عرضها للزوار وليس عن تحويلها PDF أو أني أخطأت بفهمك!
بالنسبة للكلاس المعدل لا أدري ولكن أكيد الأخ صالح المطرفي عنده الجواب وإذا توصلت للرابط شاركنا به
أستاذي خالد، في الفلاش منافع كثيرة، أهمها الحجم..
ففي فلاش يتم تضمين الخط مرة واحدة واستخدام النص كـ”نص” من حيث الحجم وكصورة من حيث العرض والألوان (وأضف إلى ذلك كله “الحركة”)
مثال يوضح فائدة دعم فلاش:
مواقيت الصلاة – مرتل القرآن 1 – مرتل 2 وهنالك مصمم بطاقات الأعمال
ملاحظة: الأمثلة عبارة عن مشاريع غير مكتملة << يعني استروا على ما واجهتوا :/
أتمنى اني فهمت السؤال
اها تلخبطت الأمور علي توقعت ان الكلاس الأخير برضوا يشغل على صفحات الإنترنت غير الـ PDF لكن توقعي اعتقد مو في محله,
قمت بتجربة الكلاس الذي طرحته بعد التعديل أخوي خالد وظهر لي انه لا يدعم الحركات
لكن بالفعل يدعم اللغة العربية بشكل رائع
شكراً لك
وضعت خلفيه سوداء لأرى إن كان هناك أي كسور وكانت النتيجه مذهله ولا يوجد اي عيوب فيها
اتسائل لو أردنا لاحقاً عمل بعض التأثيرات عليها مثل ضل وتدرج هل هذه الطريقه ممكنه ؟
وشكراً
موضوع جميل أخي خالد
بالفعل جربت sIfr ولم تعمل مع العربية
لكن لم اتعمق فيها
واختيار جيد بالنسبة لمكتبة Facelift ولكن لا احبذ استخدام الـGD فهي تستهلك موارد النظام كما ذكرت
وارى ان يتم استخدم الفلاش كتقنية sIFR حل ممتاز جداً
سبب انني افضّل الفلاش على الـGD
اولاً استخدام الباندويث
ثانياً مسألة تحديد النص فهي معدومة في الصور:)
كذلك يوجد اسباب اخرى لكن هذه اهمها
و مثال الفلاش الذي وضعه الاستاذ عبدالعزيز العريج اعتقد يحل نصف المشكلة
اشكرك اخي خالد واشكر اخواني الذين علقوا قبلي
بالنسبة للـTCPDF فهي تعمل تلقائياً مع العربية ولكن يجب ان يكون ترميز النص UTF-8
أخوكم/صالح المطرفي
@أ. عبد العزيز: نعم الفلاش له استخداماته وماشاء الله مشاريع مميزة وينقصها فقط الإعلان عنها.
@عبد الملك: لم أفهمك لحد الآن! بالنسبة للتأثيرات الآن أقوم ببعض التعديلات عليه وسأرى مايمكن عمله.
@صالح: لذلك يوجد ميزة الكاش، أضف إلى أنه في sIFR ستحتاج لتحويل كل خط إلى ملف فلاش وهذا شيء متعب. وبالنسبة لتحديد الخط فمعك حق.
السلام عليكم خالد ..
هل جربت مكتبة ArabicGD .. تحتاج لبعض المراجعة لدعم اللغة الإنجليزية وسط النص العربي، اما غير ذلك لإاظنها تعمل بشكل جيد ..
يمكنك تحميل آخر نسخة من هنا :
http://www.swalif.net/softs/attachment.php?attachmentid=15502&d=1107414011
دمت بخير ..
وعليكم السلام ورحمة الله وبركاته، قبل دقيقة كنت افكر بتجربة مكتبتك! سبحان الله. أقوم الآن بالتعديلات وسأجربها فوراً واضع كل التعديلات في تدوينة منفصلة.
فكرة جميلة, لم أسمع عنها من قبل, شكراً أخي خالد
موضوع جميل، أنا لم أجرب التقنية مع الخطوط العربية ولكن بعض المواقع لعل موقع الجزيرة.نت أشهرها قد استعملها بنجاح وهي ليست عبارة عن فلاش على ما أعتقد !
على العموم موضوع يحتاج للبحث الجاد شكرا لك.
أخي خالد هل تسمح لي بإرسال رسالة على إيميلك حول تقنية معينة في JQUERY أم أن وقتك لا يتسع ؟ شكرا لك
@سعيد: من زمان شرفنا بهالزيارة!
@cosinus: أين في موقع الجزيرة؟ وبالتأكيد لاتحتاج لسؤال لمراسلتي، استخدم نموذج الاتصال في المدونة وسأرد عليك بأسرع وقت.
إمكانية تكبير الخط وتغييره إلى خط أسهل للقراءة من أهم الأمور التي يحتاجها من لا يمتلكون قوة إبصار جيدة. هذه التقنية ستكون مزعجة جدا لهم. أيضا إمكانية القراءة الآلية. ألا يكفي فلاش؟
حياك الله اخوي
بالصدفه اليوم استعرض موقعي على جهاز واحد من الشباب عليه ويندز سفن
فلاحظت بعض الخطوط بالمنتدى بلغه غير معروفه
ماهو حلها ؟
فكرة مميزة
شكرا لك
شكرا لك اخ خالد على طرق هذا الموضوع المتقدم.
في الواقع ان تقنية sIFR على وشك ان تصبح شيء من الماضي
رغم انها مازالت في مرحلة التطور بعد ، الان ان تقنية TypeFace.js الحديثه جدا على تنبيء بمقدم تقنية بارعة.
اليك المزيد هنا .. وارجوا منك ان تفرد موضوعا عنها لنشر هذه التقنية التي تتميز بموائتهما لكل اللغات دونما الحاجة لبرامج وسيطة.
أهلاً لك “د. أبو ابراهيم” … جربت TypeFace وهي تعاني من نفس المشكلة.
وأرجو في المرة القادمة أن توجه كلامك للشخص المعني مباشرة عن طريق موقعه المعروف.
السلام عليكم
بارك الله فيك أستاذي الكريم، أنا من مدة طويلة أحاول مع الsifr ووصلت لحل مرضي لكن بقلب اتجاه الكتابة العربية على php المشكلة هي محركات البحث ستقرأ كل شيء مقلوب و من يبحث عن كلمة في موقعك فلن يجدها.
سأحاول إن شاء الله حلولكم و أشكر الدكتور أبو إبراهيم الذي دلني على مدونتكم.
بارك الله فيكم و لكم
السلام عليكم
تقنية جديدة مشابهة للsifr لكنها ستدعم اللغات المكتوبة من اليمين لليسار في المستقبل
http://cameronmoll.com/archives/2009/03/cufon_font_embedding/
لقد جربت تقنية facelift و تعمل بشكل جيد مع الفايرفوكس أما باقي المتصفحات فإنها لا تظهر نهائياً .. جربت السيرفر الشخصي و كذلك قمت بتجربتها على الموقع مع اتباع كل التعليمات المذكورة في الـ documentation الخاصة بالتقنية .
هل انا فقط من يعاني من هذه المشكلة أم أنها واجهت الجميع .. أرجو التوضيح أو ذكر الحل إن أمكن ..
شكراً لك أخي خالد و شكراً لكل المشاركين .
نعم لازال العمل فيه تجريبياً والأخطاء موجودة، إن شاء الله سأحاول إيجاد الوقت الكافي لاستبداله بطريقة أسهل وأسرع ولاتتطلب سيرفر أي تنفذ عند المستخدم.