عبدالفتاح الصلوي

لغة الانماط في وضع الطباعة

كتبها : عبدالفتاح الصلوي / في رصيف : تطوير ويب

لغة الانماط في وضع الطباعة

#مقالات مختصة

لغة الانماط في وضع الطباعة (CSS) Cascading Style Sheets


#مقالات
هل قمت يوماً بالطباعة من على المتصفح ؟
ان فعلت ذلك ستلاحظ ظهور رابط الموقع والعنوان واشياء اخرى لا تريدها ان تظهر في الطباعة , ان كنت مطور ويب او مهتم بهذا الشأن وتريد بعض الحلول ، سنحاول في هذا المقال تسليط الضوء على هذا الجزء من لغة الأنماط القياسية ، وهي حلول استخدمها شخصياً في أعمالي لمعالجة هذه المشاكل .
في البدء يمكننا وضع جميع الانماط اللازمة للطباعة داخل استعلام وسيط طباعة كما يلي :


<link rel="stylesheet" href="print.css" media="print">



بالإضافة إلى استخدام السمة media في رابط ورقة الأنماط، هناك طريقتان لتطبيق طلبات الوسائط التي يمكن تضمينها في ملف CSS وهما: @media و@import. لأغراض الأداء، يوصى باستخدام أي من الطريقتين الأوليين بدلاً من البنية @import هذه النصيحة من (google developers ) .
الطريقة الثانية :


@media print {


body {


visibility: hidden;


}


}


هنا قمنا بعمل تنسيق في وضع الطباعة للـ body فاحيانا قد تحتوي الصفحة على عناصر لا تريد عرضها فعند الطباعة وعليك عمل تنسيق للمحتوى المخصص للطباعة واسناد القيمة visible للخاصية visibility وللتركيز على :

visibility: hidden;

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

#BrowserPrintDefaults{display:none} 
@Headers{display: none;}
@Fotters{display: none;}
@Titles{display: none;}
.



فيما يخص الصفحة نفسها هذا مثال لعمل تنسيق خاص بها :



@page


{


/* size: 16cm 8cm; */


/* size: 5.5in 8.5in ;*/


/*size: legal portrait;*/


/*size:landscape;*/


/* size: 8cm 14cm !important;*/


size: 100%;


margin: 0;


overflow: hidden;


font-size: 11px;


}



قمنا بعمل عدة تنسيقات للحجم وبوحدات قياس مختلفة للتوضيح ، بالإضافة الى خاصية margin و overflow للتحكم في أي بيانات تتجاوز الصفحة وحددنا حجم الخط ب 11px.
ولفرض صفحة جديدة بعد وسم معين ، مثلاً لو لدينا div يأخذ كلاس ticket ونريد طباعة كل ticket في صفحة منفصلة :


@media print {


.ticket {


page-break-after: always;


}


}


خاصية page-break لديها عدة قيم يمكنك مراجعتها ان لم تكن تعرفها في الرابط اسفل المقال .
للعودة لما تعرضه بعض المتصفحات سيتوجب عليك ان تعود الى صفحة مطوري المتصفح .
وفي سياق الحديث عن دعم المتصفحات ولتعمل التنسيقات السابقة على متصفح Firefox سيتوجب علينا اضافة الوسم

<html moznomarginboxes mozdisallowselectionprint>



في بداية الملف مثال :


<!DOCTYPE html>
<html moznomarginboxes mozdisallowselectionprint>


مثال لعرض أرقام الصفحات هنا سيتم اضافة div كما يلي :




الان لعرض ارقام الصفحات بعده


#pageFooter:after {


counter-increment: page;


content: counter(page);


}

تم تطبيق الامثلة السابقة على متصفحي (firefox , chrome ) .
كتب لكم هذا المقال /
عبدالفتاح الصلوي – فريق تطوير #دروب .
#droub.net
يمكنكم مراجعة الرابط الخاص w3:
https://www.w3.org/TR/1998/REC-CSS2-19980512/page.html


علامات ذات صلة :