طراحي سايت- تا به حال براي خيلي از افراد hفاق افتاده که بخواهند صفحه اي را از سايتي چاپ کنند ولي وقتي که نسخه چاپي صفحه را مشاهده مي کنند به آن خوبي و واضحي که در صفحه نمايش مي بينند نيست.
در اين مطلب آموزشي ما قصد داريم تا به شما آموزش دهيم تا چطور با استفاده از CSS3 نسخه چاپي وب سايت خود را گسترش دهيد.

روش کار
1- تعريف چاپگر به جاي نمايشگر به عنوان خروجي
محل نوشتن تنظيمات مربوط به چاپ را با استفاده از دستور media مشخص مي کنيم:
@media print {
}

2- حذف رنگ هاي اضافه
بسياري از مرورگرها به صورت پيش فرض در زمان چاپ رنگ ها را مديريت (معکوس) مي کنند تا در مصرف تونر يا کارتريج پرينتر صرفه جويي شود. اما براي داشتن بهترين خروجي، بهتر است رنگ ها به صورت مجزا براي چاپ تعريف شوند.

@media print {
body {
color: #000;
background: #fff;
}
}

3- حذف اجزاي اضافه در زمان چاپ

در يک صفحه سايت قسمت هايي وجود دارد که براي نمايشگر طراحي شده اند. مواردي مانند تبليغات، منوي سايت، تصاوير زمينه و ... با توجه به نياز بهتر است در زمان چاپ حذف شوند.
دستورات display: none و background: none انتخاب هاي مناسبي براي حذف اين موارد از نسخه چاپي هستند.
/* Default styles */
h1 {
color: #fff;
background: url("/banner.jpg");
}

@media print {
h1 {
color: #000;
background: none;
}

nav, aside {
display: none;
}
}

4- واحدهاي اندازه گيري در چاپ

در CSS واحدهاي اندازه گيري متنوعي وجود دارد که پرکاربردترين آن پيکسل است. در زمان چاپ بهتر است از واحدهايي مانند سانتي متر و ميلي متر استفاده شود تا بهترين خروجي را روي کاغذ داشته باشيم. يکي از بهترين روش ها، تعريف فاصله محتويات با لبه کاغذ با استفاده از page و margin است.
@media print {
h1 {
color: #000;
background: none;
}

nav, aside {
display: none;
}

body, article {
width: 100%;
margin: 0;
padding: 0;
}

@page {
margin: 2cm;
}
}

5- يکپارچه بودن قسمت هاي مهم


زمان چاپ به صورت خودکار محتويات سايت صفحه بندي مي شوند. براي بعضي از قسمت هاي سايت بهتر است صفحه بندي را مديريت کنيم. به عنوان مثال، از چاپ شدن تيترها در پايين صفحه با دستور زير جلوگيري مي کنيم.

h2, h3 {
page-break-after: avoid;
}

همچنين براي تصاوير حداکثر عرض تعريف مي کنيم تا تصاوير بزرگتر به صورت خودکار در زمان چاپ متناسب با عرض صفحه چاپ شوند.

img {
max-width: 100% !important;
}

نکته: بهتر است مقالات، اخبار و ... (article) در زمان چاپ از ابتداي صفحه شروع شوند.

article {
page-break-before: always;
}


در نهايت بهتر است از تقسيم شدن بخش هايي مانند ليست ها و تصاوير به چند صفحه جلوگيري کنيم.

ul, img {
page-break-inside: avoid;
}


نکته: چهار موردي که در اين بخش ذکر شد فقط به عنوان نمونه بودند و با توجه به نياز مي توان اين بخش را تکميل کرد.

6- نمايش تصاوير زمينه و رنگ ها در چاپ
در بعضي از سايت ها (نمونه کارها، گالري تصاوير و ...)، تصاوير و رنگ ها اهميت ويژه اي دارند. در صورتي که مرورگر کاربر پشتيباني کند، با استفاده از دستورات CSS مي توانيم آن ها را به همان صورتي که در نمايشگر به نظر مي رسند به چاپگر (رنگي) ارسال کنيم.

@media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
} 

منبع: سرزمين دانلود