نسخه مخصوص چاپ با CSS

برای نمایش سایتها رسانه های گوناگونی وجود دارد که هر یک خصوصیات خاص خود را دارند. و شما به عنوان یک طراح وب یا مدیر سایت میتوانید نحوه نمایش سایت را در این رسانه ها کنترل کنید و ازنمایش صحیح سایت در هر یک از این رسانه ها مطمئن باشید.
یکی از این رسانه ها چاپ است. اگر شما صاحب سایت مرجعی هستید یا مقالات و محتوای متنی زیادی در سایت شما وجود دارد و کاربران حق چاپ این مطالب را دارند قطعا تمایل دارید که نسخه قابل چاپ مناسبی به کاربران خود ارائه کنید.
طراحان و توسعه دهندگان وب روشهای گوناگونی برای ایجاد نسخه مناسب چاپ برای وب سایتها دارند. با استفاده از برنامه های سمت سرویس دهنده و یا با شیوه نامه های چاپ ! بله شما با استفاده از CSS میتوانید نمایش سایت خود را در هر رسانه ای کنترل کنید.
چاپ جزو رسانه های ایستا است و مطالب بعد از چاپ قابل تغییر نیستند. و قطعا در نسخه چاپ شده از سایت شما بخشهای زیادی هستند که معنی خود را از دست میدهند.
به عنوان مثال تبلیغاتی که صرفا برای کلیک کردن در نظر گرفته شده ، عناصر گرافیکی صفحه و تصاویر متحرک نمایشی ، منوهای مختلف سایت و یا هر عنصری که مناسب چاپ نیست. و لازم است که این موارد از نسخه مخصوص چاپ شما حذف شوند. و شما مطالب مورد نظر را در یک ستون واحد و با رنگ زمینه و اندازه فونت مناسبی داشته باشید.
و حالا چطور این موارد را اجرا کنیم ؟
قبل از توضیح مراحل انجام لازم به تذکر است که اگر سایت شما بر اساس استانداردهای وب طراحی شده و بخش نمایشی (Presentation) توسط CSS کاملا از بخش ساختاری (Structural) سایت جدا باشد شما با کمترین زحمت و در کوتاه ترین زمان میتوانید نسخه مخصوص چاپ داشته باشید.

مراحل کلی از این قرار است :

1. نمایش و دسته بندی بخشهای مختلف سایت
2. جدا کردن عناصر دربرگیرنده مطالب
3. مخفی کردن کردن عناصر و بخشهای اضافی توسط CSS
4. شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS

که در ادامه به شرح هر مورد میپردازیم.

۱ نمایش و دسته بندی بخشهای مختلف سایت
شما باید بخشهای مختلف سایت را از لحاظ کاربرد و محتوا دسته بندی کنید ما برای نمونه یک وبلاگ را در نظر میگیریم. به عنوان مثال وبلاگ بخشهایی مثل سرآیند (Header) ، منوی کناری (Side Menu) ، بخش مطالب و بخش پاورقی (Footer) دارد که در بین هر مطلب هم یک کادر تبلیغاتی وجود دارد.
شما لازم است که که به این شکل دسته بندی کنید و مواردی که لازم است حذف شوند را مشخص کنید.
در این مثال عناصر گرافیکی بخش سرآیند ، منوی کناری ، بخش پاورقی و تبلیغات مابین مطالب باید حذف شوند.
۲ جدا کردن عناصر دربرگینده مطالب
در این مرحله باید از لحاظ ساختاری عناصر دربرگینده مطالبتان را پیدا کنید. که معمولا یک Div یا Table cell هستند. همانطور که گفته شد اگر طراحی سایت استاندارد باشد این کار را به آسانی و به کمک نوارابزار Web Developer’s Toolbar مخصوص مرورگر FireFox میتوانید انجام دهید.
برای این کار کافی است که نوارابزار مورد نظر را دریافت کرده و بر روی فایرفاکس نصب کنید. و با استقاده از قسمت Outline و با انتخاب گزینه Outline block level elements تمامی عناصر بلوکی صفحه را مشاهده کنید در آخر با استفاده از قسمت Information و گزینه Display ID & Class Details میتوانید به راحتی ID یا Class عنصر مورد نظر را پیدا کنید !
و اگر برای طراحی از CSS استفاده نکردید متاسفانه باید وقت بیشتری بگذارید و با مرور کردن Source صفحه قسمتهای مورد نظر را پیدا کنید.
۳ مخفی کردن عناصر بخشهای اضافی توسط CSS
الان که به وضوح از مشخصات عنصر حاوی مطالب آگاهی دارید میتوانید به سادی توسط CSS بخشهای دیگر را مخفی کنید. شما باید تک تک عناصر اضافی را حذف کنید :

#header, #sidemenu, #footer , .ads {
display: none;
}

و این برای حالتی بود که شما از CSS استفاده کردید ! و اگر غیر از این است کار شما کمی پیچیده تر میشود و باید با استفاده زیرکانه از CSS Selectorها عناصر مورد نظر را تحت تاثیر قرار بدهید :
مثلا این Selector دومین سلول جدول در اولین ردیف از سومین جدول داخل صفحه را در حالی که اولین و دومین سلولهای جدول قابل نمایش و سومین سلول مخفی هستند را تحت تاثیر قرار میدهد !

html body table+table+table tr td+td {
visibility: visible;
}
html body table+table+table tr td+td+td {
visibility: hidden;
}

۴ شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS
حالا نوبت شکل دهی صفحه است. شما میتوانید با سلیقه خود نسخه مخصوص چاپی ایجاد کنید.
واگر این موارد را در نظر بگیرید نسخه چاپ شده زیباتر و بهتر خواهد بود.
سعی کنید برای نوشته ها عرض مشخصی تعیین کنید مثلا با درصد ۸۰% صفحه و یا با مقادیر ثابت ۶٫۵ اینچ تا متن شما از کناره های کاغذ چاپ فاصله مناسبی داشته باشد.
بهتر است رنگ پس زمینه مطالب سفید و رنگ متنها مشکی باشد.
در صورت نیاز اندازه فونت ها را کمی درشت تر کنید.

بله ، الان شما نسخه قابل چاپی برای سایت دارید پس امتحان کنید !

نکات قابل توجه :

• با مطالعه مراجعی چون مرجع CSS در W3C میتوانید از امکانات حرفه ای تری استفاده کنید و کنترل بهتری روی اجزای صفحه داشته باشید.
• اگر هنوز در طراحی سایت خود از CSS و مدلهای استاندارد استفاده نمیکنید باید به فکر نیروهای اضافی و هزینه بیشتر و وقت زیادی برای مدیریت و نگه داری سایت خود باشید !
• از مزایای این روش برای ایجاد نسخه قابل چاپ سهولت ویرایش و آماده کردن برای شما و سرعت در انجام کار برای کاربر نهایی خواهد بود ! زیرا برای چاپ محتوا نیازی به ارتباط مجدد با سایت شما و دریافت نسخه قابل چاپ از یک برنامه سمت سرور نیست.

> اگر امکانات پیشرفته تری میخواهید :
ما اغلب حالتهایی که برای نسخه چاپ بی مورد بودند را حذف و ویرایش کردیم ولی برای لینکها و حروف اختصاری چه طور ؟!
فکر نمیکنید کلمه ای که در مطلب شما به مرجع دیگری از طریق لینک متصل شده است برای نسخه قابل چاپ نا مفهوم میشود ؟! بله ، ولی شما میتوانید این مشکل را با CSS حل کنید !
شما میتوانید آدرس لینکهای داخل صفحه را در کنار مطلب خود داشته باشید و یا عنوان کامل کلمه اختصاری را . به این مثال توجه کنید :

…

some texts as paragraph text here

…

و یا

…

Tim Berners lee is the inventor of web and the main W3C Leader

…

شما میتوانید از طریق CSS به این شکل متن را برای چاپ اصلاح کنید :

acronym:after, abbr:after {
content: " ( " attr(title) " ) ";
font-size: smaller;
color: #666666;
}
a:after {
content: " ( " attr(href) " ) ";
font-size: smaller;
color: #666666;
}


و میتونید این آدرس را کمی کوچکتر از متن اصلی و کمرنگتر نمایش بدهید.
که متنی شبیه به این خواهید داشت :

some texts as paragraph (http://example.com) text here

و

Tim Berners lee is the inventor of web and the main W3C (World Wide Web Consortium) Leader

در این مطلب سعی شد که شما با اصول کار آشنا شده و یک نمونه ساده از نسخه مخصوص چاپ داشته باشید. ادامه کار به سلیقه شما بستگی دارد. CSS یاد بگیرید و بهترین نسخه چاپ را درست کنید.

برای نمونه در همین وبلاگ برای نسخه قابل چاپ از همین روش استفاده شده است ، امتحان کنید !