بهینه سازی نسخه چاپ در CSS3

تا به حال برای خیلی از افراد 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;

}

کلمات کلیدی :

درست کردن نسخه چاپی با CSS مقالات CSS نکته های CSS3 چاپ بهتر صفحات وب طراحی سایت

دسته بندی : مقالات > طراحی سایت

( بدون کامنت - اولین کامنت را شما بنویسید )