بسم الله الرحمن الرحيم ، اليوم سأحاول أضع بعض القواعد ، أفكار و حيل للتعامل مع الخطوط في اللغة العربية ، ولقلة دعم هذه اللغة من طرف المتصفحات ، أو حتى المواقع العالمية ، او إهمالها ، إلا أنه لذلك أثر سلبي على نفسية الزائر ، لأن الخط من بين العناصر التي توفر بها الراحة لزوارك المحترمين .

عادة ، و على المستوى العربي ، الخطوط التي تلائم المتصفحين ، وتدعم بشكل جيد في اللغة العربية في المتصفحات ، وهي مجموعتي serif و sans-serif ، و جميع الخطوط التي في كل مجموعة هي متشابهة فيما بينها ، لذلك لا نفرق بين استعمالنا بين arial و verdana في بعض المرات ، لأنهما من نفس المجموعة sans-serif ، مشكلة غالب مصممي الويب ، انهم لا يلتفتون للقيمة الملائمة لهذه الحروف ، حتى تظهر بشكل جيد وتلائم الزوار العرب ، سأحاول أن ألفت النظر لبعض الأشياء التي قد لا تخطر على بالك ، و سأتكلم عن الخطوط الملائمة للمحتوى العربي بشروطها :

Tahoma

وهو الخط العربي الأول المفضل للزوار العرب ، والذي يدعم بشكل جيد من برامج التصفح ، إلا أن استعماله الخاطئ في بعض المرات يخرجه من خط مسالم إلا خط مأذ أو مشوه للمنظر العام للموقع ، فيفضل عند استعمالك لهذا الخط :

• أن تكون القيمة الدنيا منه لا تقل على 10px و القيمة العليا منه لا تزيد عن 12px ، بحيث لا يبقى له معنى عند التكبير أو التصغير المفرطين
• الا يكون في حالة Bold ، لأنه من مميزات هذا الخط ، انه على شكل مربع للحروف ، فإذا اخذ قيمة bold في خصائص font-weight فإنه يصبح أعرض من اللازم
• لا تستعمله في العناوين ، لأن العناوين من عادتها تكون كبيرة ، وهو لا يصلح له هذا المقام

Times New Roman

وهو خط جيد ، تكمل جماليته في كبره ، فمن ضوابطه :

• ألا تقل القيمة الدنيا منه على 18px ، و 15px عندما يأخذ قيمة bold من font-weight
• غير مقيد من ناحية الكبر ، لأنه كلما كبر زادت جماليته
• يصلح للعناوين الكبيرة و اللامعة

verdana و arial

تاخذ نفس ملاحظات التي تمت على times new roman إلا أنها:

• تفضل الا تكون مضغوظة إلا إذا كانت صغيرة ، مثل 14px .
• تستعمل في عرض المحتوى في القياس السابق ، وتكون جيدة جدا .

Traditional Arabic

وهو خط عربي أصيل :

• يصلح للمحتويات الإسلامية ، أو ذات طابع تاريخي
• أن لا تقل قيمته الدنيا عن 20px في حالته العادية ، و عن 16px في حالة bold

أفكار و حيل

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

• اجتنب كل الاجتناب أمر letter-spacing و الذي نستعمله كالتالي :

  letter-spacing: 3px;

  وظيفة هذا الأمر ، انه يقوم بالتفريق بين حروف الكلمة الواحدة بالمقدار الذي تعطيه له أنت ( في المثال عملت 3px ) ، وهذا لا يصلح بتاتا في اللغة العربية لأن جل حروفها تلتصق مع غيرها داخل الكلمة الواحدة ، وإذا فرقنا بين الحرف و اخيه ، فنحصل على فقرات من الحروف و ليس من الكلمات .

• نريد في بعض الأحيان كتابة بعض العناوين المهمة ، بخطوط مميزة ، قد لا توجد على جهاز الزائر ، فنضطر إلى عمل العنوان داخل صورة بتصميم قد يعجبنا ، إلا ان هذه تبقى فكرة قديمة ، وهي الآن غبية بعض الشيء ، للعواقب التي ستخلفها على موقعك :
  1. من ناحية زيادة وقت تحميل الصفحة ، لأنه يتم تحميل صور إضافية للصفحة ،
  2. عدم الديناميكية ، لأنه سيبقى النص جامدا ، ولا يمكنني أن اعدل عليه إلا بالرجوع إلى الملف المفتوح للصورة أو أصمم واحدة جديدة ،

  ما رأيك بأن نضع لك حلين مفيدين و فعالين :

  1. حاول أن تستعمل اسم الخط الذي استعملته في تصميم الصورة ، مباشرة في ملف التنسيق css ، ثم اعمل بعده مجموعة خطوط توجد دائما في الأجهزة العادية ، و اعط الأولوية للخط الذي تريده ، هكذا :

     font-family:  SC_DUBAI , arial , verdana , sans-serif ;

     ميزة هذه الطريقة ، وهي أنه يتم البحث في جهاز الزائر عن هذا النوع من الخطوط ، فإذا لم يجده مثبتا ، سبحث عن الذي يليه ، ثم الذي يليه ، إلى أن ينتهي إلى آخر خط او مجموعة تم ترتيبها في الأمر ، كما عملت في المثال مع خط SC_DUBAI ، ونحن نعلم أن غالبية زوار المواقع التطويرية هم مطورون ، وغالبية زوار مواقع التصميم ، هم مصممون ، فليس بالبعيد ان تكون اجهزتهم تحتوي على هذه الخطوط المميزة في نظرك ،
     ( طبعا هذه الطريقة أنضح بها من يعلم ان غالبية زوار موقعه يثبتون هذه الخطوط ، من خلال المحتوى الذي يقدمه ، فلكل محتوى زواره )

  2. الطريقة الثانية ، جرب أن تستعمل تقنية siFr ، و هي إضافة رائعة لمكتبة jQuery ، حيث يمكنك ان تجعل عناوينك المميزة بخطوطك المميزة ، وتظهر بالشكل الذي تريده من دون أن نشترط عل جهاز الزائر أن يحتوي على هذا الخط ، فقط بملف jQuery و ملفات الإضافة ، وملف Flash مفتوح ، ساحاول ان أتوسع في الكلام عن هذه التقنية في درس مخصص بها إن شاء الله ،
• لمحبي عمل سطر أو خط تحت جملة أو عنوان معين : اجتنب underline في text-decoration ، وحاول استعمال border-bottom ، فائدة هذه الحركة ، وهي التخويل باستعمال الـ padding حتى اتمكن من إبعاد هذا االسطر بالمسافة التي أريد عن الجملة ، وهذا الذي لا يوجد عند استعمال text-decoration : underline
• حاول أن تستعمل خاصية الظل التي اتت مع جيل css3 في العناوين ، حيث يمكنني استعمالها في التأثير على جملة معينة ، بحيث تظهر كانها محفورة في الصفحة ، بجعل لون الظل أبيضا في حالة ما كانت الخلفية غامقة ، يمكنك استعمال هذا الأمر :

  text-shadow: 2px 1px 0px #fff;
  background: #eee;

  حاول أن ترى النتيجة على صفحة تطبيقك ، ولايضرك عدم دعم بعض برامج التصفح لهذا الجيل من css ، فهي إضافة صغيرة تضيفها لجملك لا يتمتع بها إلا أصحاب المتصفحات المحترمة و الحديثة .

أخيرا لا أنس أن أنبه أنني كلما ذكرت محتوى فإنني أقصد به هنا محتوى المقال غير العناوين الكبيرة أو الرئيسية .
و من الآن فصاعدا حاول ان تلاحظ في المواقع التي تزورها ، كيف أن الاستعمال الخاطئ للخطوط ، و اوامرها و قيمها ، يؤدي إلى التشويه في منظرها ، إضافة إلى نفسية الزائر الغير مرتاحة عند القراءة في مثل هذه المواقع ،
إلى هنا أكون قد أزلت على عاتقي عبئا كبيرا ، ( لأنني من زمن وانا أفكر في هذا الدرس ) ، والحمد لله ان انتهيت منه ، آمل ان تكون استفدت ولو شيئا قليلا ،
و صلى الله على محمد وعلى آله وصحبه و سلم تسليما كثيرا ، و السلام عليكم ورحمة الله وبركاته .

هذه التدوينة نُشرت في الجمعة, 9 أكتوبر, 2009 عند 10:39 م و مصنفة تحت تصنيف تطوير. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :أفكار, تنسيق, حيل, خطوط عربية