كتابة شخصية

النص الاصلي

حتى المادة الخام الذي تدخلها في SPIP تنتج علامات HTML معينة. فهذا النص مقسم الى فقرات (كلما تركت سطراً فارغاً). ولكل فقرة يخصص النظام علامة <p class="spip">. يمكننا اذاً تخصيص نمط محدد لهذه الفقرات لا يُطبق على باقي المادة.

فلنبدأ بتخصيص نوع خط باستخدام الخاصية font-family التي تأخد اسم او عدة اسماء خطوط كقيمة. نفضل عادة لنص المادة العادي استخدام خط نسخي ونقرر مثلاً، استخدام خط «العربي الشفاف». فنضيف الى ملف my_styles.css القاعدة التالية:

p.spip {
    font-family: "Transparent Arabic";
}

(لاحظ انه اذا كان اسم الخط يتألف من عدة كلمات، يجب احاطته بعلامات اقتباس) هنا قد تحصل مشكلة اذا كان الخط «العربي الشفاف» غير موجود في جهاز الزائر: فكل جهاز له خصائصه ولا تنسى ان الخطوط «المجانية» التي توزعها مايكروسوفت مع ويندوز غالباً ما تكون غائبة في بيئتي ماكنتوش ولينكس. لذلك يستحسن اخذ هذه المسألة في الحسبان وتحديد اكثر من خط واحد بالتتابع ليحل واحد منها مكان الغائب:

p.spip {
    font-family: "Transparent Arabic", "Geezah";
}

نحدد هنا خط «جيزة» كبديل لخط «العربي الشفاف» في حال عدم وجوده في جهاز الزائر.

تجدر الاشارة الى هذه القاعدة المهمة: في خاصية font-family، يجب دائماً تقديم عدة خيارات متتالية للتكيف مع الخطوط الموجودة في جهاز الزائر. ونذكر ان هذه القاعدة تسري ايضاً على علامة <font face="..."> في لغة HTML التقليدية.

بالطبع هناك خصائص اخرى في تصرفك. يمكنك مثلاً، ضبط حجم النص باستخدام خاصية font-size. ولكن تجدر الملاحظة الى ان برامج التصفح تملك وظيفة ضبط لإعداد حجم النص افتراضياً ولا يجب على مادتك الاساسية ان تتعدى هذا الاعداد لتوفير الراحة البصرية: فالزائر هو الذي يختار الحجم الاساسي لا المصمم.

لاحظ ايضاً ان الانماط التي تطبقها على علامات <p> تنطبق على كل فقرة بصفتها عنصر مستقل. وهذا يتيح بعض المؤثرات الشيقة مثل ازاحة السطر الاول في الفقرة باستخدام خاصية text-indent. افتراضياً، هذه الخاصية تأخذ قيمة صفر اي بدون ازاحة. يمكننا تعديلها للحصول على ازاحة نحو اليسار قدرها 60 نقطة لاول سطر في كل فقرة:

p.spip {
    text-indent: 60px;
}

وصلات هايبرتكست

يعرف الذين تعاملوا ولو قليلاً مع اوراق الانماط انه يمكن تعديل مظهر الوصلات بشكل شامل:

a {
    color: green;
    text-decoration: none;
}

تحدد قاعدة الانماط هذه ان كل وصلات هايبرتكست (يعني كل علامات <a ...> اكان لها صفة class ام لا) ستُعرض باللون الاخضر وبدون سطر تحتها.

ويسمح SPIP بالذهاب ابعد من ذلك. فتستخدم وصلات هايبرتكست، عندما يتم انتاجها بواسطة اختصارات الكتابة، عدة انماط مختلفة:
– عندما تكون الوصلة داخلية (اي تدل الى صفحة اخرى في الموقع نفسه)، تكون العلامة <a class="spip_in">.
– عندما تكون الوصلة خارجية (اي تدل الى موقع آخر)، تكون العلامة <a class="spip_out"> [1].
– اخيراً عندما يتم ادخال عنوان URL دون اسم تصبح العلامة <a class="spip_url">.

يصبح اذاً من السهل ابراز الفرق بين انواع الوصلات الثلاثة هكذا:

a {
    color: green;
    text-decoration: none;
}
a.spip_in {
    color: blue;
}
a.spip_out {
    color: red;
}

فتُعرض الوصلات الداخلية بالازرق والخارجية بالاحمر. وتُعرض سائر الوصلات الاخرى، بما فيها تلك التي لم ينتجها SPIP، بالاخضر. اضافة الى ذلك، تُعرض كل الوصلات دون خط تحتها: فلم يتم تغيير خاصية text-decoration التي تظهر في القاعدة الاولى، في اي من القاعدتين اللاحقتين. فيتم تطبيقها آلياً على كل العناصر من نوع <a ...>.

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

تطبيق معالجة مختلفة

بدلاً من الاستفاضة في مجموعة الانماط الآلية الناتجة عن SPIP من خلال اختصارات الكتابة، والتي يمكنك تعديلها حسب مزاجك (فهي مفصّلة في Spip واوراق الانماط)، فلنحصر انتباهنا في مسألة تطبيق مظهر مختلف للنمط نفسه حسب مكانه في الصفحة النموذجية. فهذه الرغبة مشروعة: نريد مثلاً، عرض نص المادة بخط عربي تقليدي مع ازاحة في اول الفقرة ولكن نريد عرض الملحق بخط عربي مبسط وبحجم اصغر ودون ازاحة.

هذه العملية بسيطة. يجب اولاً تعديل الصفحة النموذجية لإدخال العناصر التي ستميز بين نص المادة والملحق. ويظهر ذلك مثلاص داخل حلقة ARTICLES الاساسية على الشكل التالي:

<div class="text">#TEXTE</div>
<div class="ps">#PS</div>

يجب هنا اعادة تحديث الصفحة (لأننا ادخلنا تعديلات على HTML). لا يحدث شيء. وهذا طبيعي لأننا لم نحدد قواعد لنمطينا الجديدين بعد في ورقة الانماط، فيتجاهلهما المتصفح. نصحح الوضع كالتالي:

.text p.spip {
    font-family: "Traditional Arabic";
    text-indent: 50px;
}
.ps p.spip {
    font-family: "Simplified Arabic";
    font-size: 90%;
}

الجديد هنا ليس في الخصائص الرسومية بل في طريقة تطبيقها على علامات HTML. فتعني «.texte p.spip»: «تُطبق هذه القاعدة على كل علامات <p class="spip"> الموجودة داخل اي علامة تملك صفة class تساوي text». يمكن الحد من هذه القاعدة بالاعلان ان العلامة السلفية (parent tag) يجب ان تكون علامة <div> (نكتب عندها بداية القاعدة «div.texte p.spip»). ولكن بما اننا نتحكم ببنية صفحاتنا النموذجية، ليس من المفيد جعل ورقة الانماط شديدة الحصر.

في جميع الاحوال تعطي ورقة الانماط النتيجة المرجوة: فتظهر فقرات المادة مع ازاحة السطر الاول والملحق بخط اصغر ودون ازاحة. وللتأكد من ان هذه القواعد تنطبق فعلاً على كل فقرة في علامة <p class="spip"> وليس على علامة <div class="..."> الحاوية، يمكن اضافة اطار اسود:

.text p.spip {
    border: 1px solid black;
}

نلاحظ حينها ان كل فقرة من المادة (وليس الملحق) محاطة بإطارها الاسود. لو كتبنا «.texte» فقط بدلاً من «.texte p.spip»، لكان النص بكامله محاطاً بإطار اسود واحد. والشيء بالشيء يذكر، لاحظ هنا استخدام خاصية جديدة هي الاطار border.

ملاحظة: ان فكرة استخدام اطار ملون لمعرفة اي من العناصر نتعامل معه، تكون مفيدة جداً عندما تتوسع ورقة الانماط وتتشعب. فلا تتردد في استخدامها...