CSS و چاپ

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

دو روش برای تعیین شیوه‌نامه‌های ویژه‌ی چاپ وجود دارد. نخست استفاده از صفت media در تگ link است:

<link rel="stylesheet" href="print.css" media="print" />

تگ بالا فایل print.css را تنها هنگام چاپ بر روی صفحه‌ی وب اعمال می‌کند
صفت media می‌تواند به صورت همزمان چند مقدار را بپذیرد:

<link rel="stylesheet" href="main.css" media="screen, print" />

روش دوم استفاده از عبارت‌های شرطی درون فایل css است:

@media screen {
	body {
		font-family: Tahoma;
	}
}
 
@media print {
	body {
		font-family: Arial;
	}
}
 
@media screen, print {
	body {
		font-size: 12pt;
	}
}

برای نسبت دادن شیوه‌نامه به تمامی حالت‌های نمایش از مقدار «all» استفاده می‌شود. تعیین نکردن media نیز همین نتیجه را در بر دارد.

همان‌گونه که برخی از ویژگی‌های css به نمایشگر اختصاص دارد، ویژگی‌هایی مخصوص چاپگر نیز در شیوه‌نامه‌ها قابل استفاده است.
مهم‌ترین ویژگی‌های مخصوص چاپ «page-break-after» و «page-break-before» هستند. دو مقدار «auto» و «always» می‌توانند به این ویژگی‌ها نسبت داده شوند. با انجام این کار به مرورگر اعلام می‌کنید که پیش یا پس از عنصر انتخاب شده باید یک صفحه‌ی جدید ایجاد شود.

h1 {
	page-break-before: always;
}
 
p.news {
	page-break-after: always;
}

پیوندها

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

اندازه‌ی فونت‌ها

سعی کنید برای اندازه‌گیری فاصله‌ها و اندازه‌ی فونت‌ها از واحدهای فیزیکی مانند Point و میلیمتر استفاده کنید.
اطلاعات بیشتر: انتخاب واحد و اندازه‌ی فونت برای طراحی صفحات وب

حذف عنصرهای اضافه

با تغییر ویژگی display برای عنصرهایی که چاپ آن‌ها ضروری نیست، می‌توانید تنها متن اصلی صفحه را به چاپگر بفرستید. بسیاری از بخش‌های سایت مانند سربرگ، منوها و تبلیغات کاندیداهای حذف از خروجی چاپ هستند:

div#menu,
div#footer,
div.ads {
	display: none;
}

تغییر ویژگی‌های صفحه

افزون بر تغییرات قابل اعمال بر روی عنصرها، تغییراتی جزئی در صفحه‌های چاپ نیز امکان‌پذیر است. این تغییرات در حال حاضر به حاشیه‌ی برگه محدود است.

@page {
	margin: 2cm;
}

علاوه بر تنظیمات سراسری روی صفحه، امکان تغییر دادن ویژگی‌های صفحه‌ی اول، صفحه‌های راست و صفحه‌های چپ نیز به شکل زیر وجود دارد.

@page:first {
	margin: 2cm;
}
@page:left {
	margin-right: 3cm;
}
@page:right {
	margin-left: 3cm;
}
این نوشته در CSS ارسال شده است. افزودن پیوند یکتا به علاقه‌مندی‌ها.

۴ دیدگاه برای CSS و چاپ

  1. Amin می‌گوید:

    من با این جمله شما مشکل دارم: “بنابراین اگر قصد دارید صفحه‌ی وب شما در چاپ نیز دارای تصویر باشد، به ناچار تصاویر پس‌زمینه غیرقابل استفاده خواهند بود.”
    چون میشه عکس رو هم توی چاپ نشون دادو چاپ کرد مثلن با قراردادن تگ img که توی css اش مشخص کنی عکس نمایش داده شود.

    • امیرمسعود ایرانی می‌گوید:

      با سلام و سپاس

      ترجمه‌ی «تصاویر پس‌زمینه» می‌شود: «background image» که با عنصر «img» متفاوت است.
      علاوه بر آن عنوان این مطلب «CSS و چاپ» است که به ویژگی‌های CSS می‌پردازد.
      همان طور که می‌دانید قرار دادن یک عنصر img به عنوان پس‌زمینه مشکل‌های خاص خودش را دارد و بسیاری از ویژگی‌های CSS را نمی‌توان با آن پیاده کرد

  2. تورج امین فر می‌گوید:

    آموزشتون در مورد سی اس اس چاپ بسیار عالی بود متشکرم.

  3. امیر می‌گوید:

    ممنون عالی بود

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>