نکات و ترفندهایی برای قالب دهی به نمای چاپ صفحات وب

در فایل css می‌توان استایل مجزایی برای نمای مخصوص پرینت یک صفحه تهیه کرد:

@media print {
   *{
      color: #000;
      background: #fff;
   }
   #header, #sideBar, #footer, .dont-print{
      display: none;
   }
}

مثلا با قرار دادن کد ساده فوق، زمانی که کاربر صفحه شما را پرینت می‌کند، رنگ تمام متون مشکی و بکگراند آنها سفید می‌شود. همچنین بنر بالا و ستون کناری و جعبه انتهای صفحه شما را نیز در موقع پرینت نمایش نمی‌دهد. همچنین من عادت دارم کلاسی مثلا به نام dont-print هم در این بخش از استایل چاپ سایتم تعریف می‌کنم که اگر المانی را برای چاپ مناسب ندیدم، کلاس فوق را به آن اختصاص دهم تا در موقع چاپ ظاهر نشود.
علاوه بر دو کار عمومی فوق (تغییر رنگ و مخفی کردن عناصر زائد و غیراصلی)، کارهای دیگری نیز برای استایل چاپ انجام می‌دهند از جمله:

تغییر ابعاد صفحه و المانها
مثلا معمول است که width مربوط به مطلب اصلی را 100% و padding, margin آن را صفر می‌کنند تا از فضای کاغذ پرینت شده استفاده بیشتری شود و کاربر رضایت بیشتری از پزینت مطالب صفحه شما داشته باشد و به این کار رغبت داشته باشد.
تغییر نام و سایز قلم (فونت)
همانطور که قبلا درباره استفاده از فونت دلخواه در صفحات وب گفته شد، ما می‌توانیم فونتی مثل Nazanin را در صفحات وب استفاده کنیم ولو در دستگاه کاربر این فونت نصب نشده باشد اما بسیاری از فونت‌هایی که ما داریم (مثل همین فونت زیبای نازنین) برای نمایش روی مانیتور مناسب نیستند اما در عوض برای پرینت مناسب هستند.
علاوه بر نام، سایز قلم و فاصله خطوط نیز می‌تواند در پرینت متفاوت و متناسب برای چاپ بهتر تنظیم شود.
اجبار به شکستن/نشکستن صفحه قبل/میان/بعد از یک المان
مثلا ممکن است ما نخواهیم در بین لیست‌ها (ul/ol ها) شکست رخ دهد و بخشی از آن در یک صفحه و بخشی در صفحه بعدی چاپ شود. در اینصورت می‌توان ul,ol{page-break-inside:avoid;} را به استایل پرینت افزود.
یا مثلا ما دوست ندارم که عنوان اصلی در ته یک صفحه و توضیحات ذیل آن در صفحه بعد بیاید لذا کد h1,h2{page-break-after:avoid;} به ما کمک خواهد کرد.
تمایل به چاپ ابتدای مطلب اصلی با بخش خاصی از صفحه در ابتدای کاغذ نیز گاهی احساس می‌شود که کد article,#main{page-break-before:always;} به همین منظور کافی خواهد بود.
مشکل لینکها
یکی از مشکلات پرینت این است که در متن پرینت شده، لینک‌ها از دست می‌روند. برای حل این مشکل می‌توان از css3 کمک گرفت و با افزودن کد a[href^=http]:after{content:" [" attr(href) "] ";} مشکل را حل کرد و البته کد a[href^="#"]:after{content:"";} را هم اضافه کرد تا برای لینک‌های مربوط به همان صفحه این امر انجام نشود.
درج آدرس صفحه به صورت بارکد QR
زمانی که کسی مقاله چاپ شده شما را ببیند، اگر بخواهد آدرس همان مقاله را (که معمولا توسط براوزر بالای صفحه چاپ می‌شود) ببیند، لازم است تمام آن آدرس را تایپ کند لذا داشتن یک بارکد در نمای پرینتی، امری مطلوب است. قبلا در مورد روش تولید بارکد دو بعدی QR به وسیله API گوگل صحبت شد. لذا کافی است کدی شبیه کد زیر را به شیوه‌نامه پرینت خود بیفزایید تا این مشکل نیز حل شود:

header h1:after{
  content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://9px.ir&choe=UTF-8);
  position:absolute;left:0;top:0;
}

البته بجای 9px.ir در آدرس فوق لازم است آدرس صفحه فعلی را با php تولید و جایگزین آن کنید.

تنظیم صفحه وب برای چاپ شدن در قطع خاصی مانند A4

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

یادداشت‌های مرتبط

علیرضا معظمی

مجری پروژه‌های خاص طراحی و برنامه‌نویسی وب

آموزش‌ها

نکات و ترفندهایی برای قالب دهی به نمای چاپ صفحات وب

تنظیم صفحه وب برای چاپ شدن در قطع خاصی مانند A4

مدیریت

یادداشت‌های کوتاه فنی تخصصی

آموزش‌هایی برای ارتقاء فنی سایت و سرور

تبلیغات

ربات‌های تلگرامی:

دامنه‌های فروشی: