بهینه سازی نسخه چاپ در CSS3
پیغام مدیر :
با سلام خدمت شما بازديدكننده گرامي ، خوش آمدید به سایت من . لطفا براي هرچه بهتر شدن مطالب اين وب سایت ، ما را از نظرات و پيشنهادات خود آگاه سازيد و به ما را در بهتر شدن كيفيت مطالب ياري کنید.
تبلیغات
.
PaidVerts



بهینه سازی نسخه چاپ در CSS3
نوشته شده در دو شنبه 19 آبان 1393
بازدید : 1369
نویسنده : alinn
در 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 , چاپ بهتر صفحات وب ,



مطالب مرتبط با این پست
.



می توانید دیدگاه خود را بنویسید


نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: