قابل چاپ کردن مطالب وبلاگ با استفاده از CSS و html

مطالب مفید و خواندنی همیشه طرفداران زیادی دارند و البته عده‌ی زیادی برای چاپ و استفاده‌ی بهتر از این مطالب اقدام می کنند. پس قابل چاپ بودن مطالب برای یک وبلاگ خوب شرط مهمی است. اما چگونه می توانیم به سادگی مطالب خود را قابل چاپ کنیم؟ اصلا قابل چاپ کردن یعنی چه؟ اصولا مطالب چاپی (مثل یک متنی که در Word تایپ کرده ایم) در ساده ترین حالت باید به نحوی باشد که روی برگه‌ی کاغذ به خوبی قابل خواندن باشد یعنی دارای style خاصی نباشد و فقط دارای یک زمینه‌ی سفید، فونت مناسب چاپ و برای متون فارسی راست به چپ باشد کفایت می کند.

آیا می دانستید که با کمک css و html می‌توانید یک style خاص فقط برای صفحات چاپی تعریف کنید؟

با کمک یکی از خاصیت های برچسب link در هنگام تعریف style شما می توانید تعریف کنید که style مورد نظرتان برای صفحات چاپی استفاده می شود. به عنوان مثال اگر شما بخواهید این قابلیت را به وبلاگ خود اضافه کنید باید زیرِ خط مربوط به style پوسته‌تان این خط را اضافه کنید:

[code lang=”html”]<link rel="stylesheet" type="text/css" href="/print.css" media="print" />[/code]

همانطور که در کد بالا مشاهده می کنید خاصیت media=”print” باعث می شود تا شیوه نامه (استایل) print.css به صفحات قابل چاپ اختصاص داده شود و برای صفحاتی که قرار است چاپ شود از این شیوه نامه استفاده خواهد شد.

اما خاصیت media ویژگی دیگری هم با نام screen دارد که این ویژگی برای شیوه نامه‌های عادی که روی صفحات وب نمایش داده می شود استفاده می شود.

نکته مهم: اما نکته‌ی مهمی در اینجا وجود دارد که باید حتما رعایت شود. زمانی که ما برای تعریف شیوه نامه هایمان از خاصیت media استفاده نمی کنیم، شیوه نامه‌ی تعریف شده، هم برای صفحات چاپی استفاده می شود و هم برای صفحات عادی. پس باید حتما حتما خاصیت media را برای شیوه نامه هایمان تعریف کنیم. به عنوان مثال:

[code lang=”html”]<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />[/code]

روش های مختلف استفاده از خاصیت media

به صورت های مختلف می‌توان از خاصیت media در شیوه نامه هایمان استفاده کرد. از معمول ترین این راه ها روشی است که در بالا گفته شد. یکی دیگر از این روش ها تعریف media در فایل css است که به صورت زیر در فایل css نوشته می‌شود:

[css]@media print {
h1 {
color: black;
}
h2 {
color: gray;
}
}[/css]

روش دیگر٬ روش import کردن است که می توان به صورت زیر از آن استفاده کرد:

[code lang=”html”]<style type="text/css">
@import url("/print.css") print;
</style>[/code]

ساخت فایل شیوه نامه‌ی چاپ

تا اینجا طریقه‌ی تعریف فایل شیوه نامه را یاد گرفتیم. اما حالا در فایل استایل print.css مان چه بنویسیم؟

ما می‌توانیم هر جور که بخواهیم برای صفحه چاپی مان استایل بنویسیم. اما برخی نکات را باید راعایت کنیم تا صفحه‌ی چاپی خوبی داشته باشیم. برای مثال باید صفحه مان راست به چپ باشد که با استفاده از کد زیر این کار را به راحتی انجام می دهیم:

[css]body {
direction: rtl;
}[/css]

یکی دیگر از کارهای مهمی که باید انجام دهیم حذف قسمت های غیر ضروری از صفحه چاپی است، مثل: sidebar ، header ، footer ، بخش نظرات و از این قبیل قسمت ها که وجودشان در صفحه چاپ لازم نیست بلکه برای این صفحه مضر هم هست.

برای حذف این قسمت ها کافی است تا ID یا Class آنها را پیدا کنیم و آنها را به صورت زیر حذف کنیم:

[css]#sidebar, #header, #footer, #comments {
display: none;
}[/css]

حالا مطالب شما قابل چاپ شده است درست مثل مطالب وبلاگ من برای مثال می توانید همین مطلب را با فشردن کلید های Ctrl+P چاپ کنید و تغییرات حاصل شده را در آن ببینید.