راهنمای کامل صفحات قابل چاپ HTML و CSS
صفحات سایت شما به ویژه اگر حاوی اطلاعات متنی باشند یا شامل جدول و فرم و اطلاعات مفید باشند، ممکن است توسط بازدیدکنندگان روی کاغذ به چاپ برسند. همچنین ممکن است بخواهید برخی گزارشهای مورد نیاز کاربران را به شکلی ایجاد کنید که هنگام چاپ شکل مناسبی داشته باشند.
مرورگرهای جدید قابلیتهای متعددی برای کنترل بیشتر طراحان سایت روی خروجی چاپ در اختیار شما قرار میدهند. در این نوشته به این امکانات و نکتههای فنی که میتواند خروجی چاپ بهتری برای کاربران شما به همراه بیاورد را بررسی میکنیم.
۱- تعریف CSS مخصوص چاپ
شکل نمایش صفحات شما در چاپ میبایست با آنچه در مرورگر دیده میشود تفاوت داشته باشد. برای مثال دیده شدن منوهای سایت یا لینکهای پابرگ سایت روی کاغذ چاپی کمکی به کسی نمیکند. همچنین تفاوتهای متعدد دیگری از جمله تغییر رنگ و اندازهی نوشتهها برای دیده شدن بهتر متنها مورد نیاز هستند که میبایست متفاوت از نسخهی وب قابل تعریف باشند.
تعریف قوانین CSS به دو صورت کلی امکانپذیر است:
- تعریف یک فایل جداگانه CSS که فقط هنگام چاپ بارگزاری میشود
- تعریف قوانین چاپ با استفاده از media داخل CSS اصلی
روش اول به طور کلی بهتر است چون از ایجاد بار اضافی روی صفحات وب جلوگیری میکند و پیچیدگی فایلهای CSS شما را کاهش میدهد. برای انجام این کار فایل CSS را در کدهای خود به شکل زیر تعریف میکنیم:
|
1 2 |
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="print.css" media="print"> |
تعیین مقدار print برای صفت media باعث میشود که مرورگر فقط در زمان چاپ این فایل را بارگزاری کند. توضیحات بیشتر در مورد link و media را در این صفحه میتوانید مشاهده کنید.
و اما روش دوم، درج قوانین چاپ میان کدهای CSS اصلی است. به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 |
header { font-size: 12em; } @media print { header { display: none; } } |
در قطعه کد بالا تعیین کردیم که هنگامی که در حالت چاپ هستیم، عنصر header به طور کامل از خروجی حذف شود. برای مشاهدهی اطلاعات بیشتر میتوانید این صفحه را ببینید.
۲- تفاوت های چاپ و نمایشگر
بیشتر چاپگرهای مورد استفاده به صورت سیاه و سفید چاپ را انجام میدهند و همچنین تفاوتهای دیگری نیز از سمت مرورگرها در زمان چاپ اعمال میشود. برای مثال تصاویر پسزمینه در خروجی چاپ قابل مشاهده نیستند و برای دیده شدن این تصاویر لازم است تا کاربر تنظیماتی را روی مرورگر خود تغییر بدهد.
تفاوت مهم دیگر، واحدهای اندازهگیری است. هرچند مرورگرها تلاش میکنند تا اندازههای تعریف شده در صفحات وب را به صورت خودکار به اندازههای معقول در چاپ تغییر دهند، ولی همیشه در این کار موفق نیستند چون دسترسی کاملی به اندازه و وضوح نمایشگر و نسخهی چاپی وجود ندارد و همیشه احتمال اشتباه وجود دارد.
و آخرین مشکل، تفاوت در عملکرد چاپ روی مرورگرهای مختلف است. به این معنی که چاپ یک صفحهی وب روی مرورگر فایرفاکس با چاپ همان صفحه روی مرورگر گوگل کروم یکسان نیست و تفاوتهایی در این بخش نیز وجود دارد.
برای حل مشکلات توجه به چند نکتهی زیر کمک کننده خواهند بود:
- حالتهای مختلف صفحات را روی مرورگرهای مختلف پیشنمایش چاپ بگیرید و مطمئن شوید که خروجی مورد نظر شما روی کاغذ نیز وجود دارد.
- اندازهی فونتها و تصاویر اصلی را به صورت جداگانه برای نسخهی چاپ تغییر دهید تا خوانایی و وضوح کافی داشته باشند.
- به دلیل کیفیت بالای چاپ روی برخی از چاپگرها ممکن است بخواهید تصاویر با کیفیت بیشتری برای نسخهی چاپ در نظر بگیرید.
۳- واحدهای اندازهگیری
به صورت معمول واحدهای اندازهگیری برای صفحات وب شامل pt و px هستند. این واحدها کارایی ایدهآلی در زمان چاپ ندارند. بهتر است به صورت جداگانه اندازههای فیزیکی مثل cm و mm و in را برای تعیین اندازههای چاپ استفاده کنید تا هم به نتیجهی بهتری دست پیدا کنید و هم دست مرورگرها را برای محاسبات متفاوت ببندید.
به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 |
h1 { font-size: 14px; } @media print { h1 { font-size: 1cm; } } |
همان طور که مشاهده میکنید در نسخهی چاپ اندازهی فونت عنصر h1 را برابر ۱ سانتیمتر قرار دادیم و در نسخهی وب برابر ۱۴ پیکسل. این کار تضمین میکند که خروجی چاپ همیشه به یک مقدار مناسب قابل مشاهده باشد.
۴- چاپ تصاویر و canvas
وضوح تصاویر و canvas در صفحات وب معمولا پایین است و با فرض وضوح 96dpi پیادهسازی میشود. چاپ این عناصر با این وضوح روی چاپگرهایی با وضوح 300dpi یا 600dpi و بیشتر نتیجهی خوبی به دنبال ندارد. برای رفع این مشکل لازم است تا تصاویر را در دو نسخهی وب و چاپ ایجاد کنید. همچنین برای افزایش کیفیت چاپ canvas از قطعه کد زیر استفاده کنید تا وضوح آنها افزایش پیدا کند و در زمان چاپ هم کیفیت مناسبی به دست بیاورید.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function setDPI(canvas, dpi) { // Set up CSS size. canvas.style.width = canvas.style.width || canvas.width + 'px'; canvas.style.height = canvas.style.height || canvas.height + 'px'; // Resize canvas and scale future draws. var scaleFactor = dpi / 96; canvas.width = Math.ceil(canvas.width * scaleFactor); canvas.height = Math.ceil(canvas.height * scaleFactor); var ctx = canvas.getContext('2d'); ctx.scale(scaleFactor, scaleFactor); } |
این تابع میزان کیفیت یا نقطه در اینچ عنصر canvas شما را تغییر میدهد. همان طور که گفته شد، میزان معمول برای نمایشگرها ۹۶ نقطه در اینچ است و برای چاپ این عدد ممکن است ۳۰۰ یا ۶۰۰ یا بیشتر باشد. فراموش نکنید که افزایش بیش از حد و بی دلیل این کیفیت باعث افزایش مصرف حافظه میشود. به ویژه روی گوشیهای موبایل بهتر است این مقدار را به جز در زمانی که نیاز است، افزایش ندهید.
برای مشاهدهی اطلاعات بیشتر در این زمینه، این صفحه را ببینید.
۵- استفادهی صحیح از تگهای HTML
بسیاری از تگهای HTML اگر به درستی استفاده شوند، در نسخهی چاپ، رفتارهای متناسب با چاپ را از خود نشان میدهند. برای مثال هنگامی که شما ردیفهای سربرگ یک جدول را در بخش head تعریف کنید و نه در بخش body، اگر یک جدول در چند صفحه چاپ شود، مرورگر به صورت خودکار، نوار سربرگ را بالای هر صفحه اضافه میکند تا جداول خوانایی بهتری داشته باشند.
با مطالعهی دقیقتر راهنمای HTML و استفاده از تگهای متناسب با هر موقعیت، احتمال چاپ با کیفیتتر را برای کاربران خود فراهم کنید.
۶- فونت مناسب چاپ
شکل نمایش فونتهای وب ممکن است همیشه روی کاغذ خوب نباشد. اگر گزارشهای طولانی و متنهای بلند را چاپ میکنید، بهتر است برای نسخهی چاپ یک فونت مناسب چاپ هم در نظر بگیرید. فونتهای نسخهی چاپ علاوه بر اینکه با چاپگرها سازگاری بهتری دارند، از نظر دیداری نیز روی کاغذ شکل بهتری پیدا میکنند و خواننده با سهولت بیشتری میتواند از محتوای شما روی کاغذ استفاده کند.
۷- درج صفحات جدید در محل مناسب
برگههای کاغذ فضای محدودی دارند. اگر محتوای شما طولانی باشد، ممکن است از محلهای نامناسبی محتوای شما برش بخورد و به صفحهی بعد برود. برای جلوگیری از این اتفاق میتوانید در محلهای مناسب یک صفحهی جدید ایجاد کنید تا از برشهای نامناسب اجباری تا حد امکان جلوگیری شود. درج صفحات جدید در CSS به شکل زیر انجام میشود:
|
1 2 3 4 5 |
@media print { h1 { page-break-after: avoid; } } |
قطعه کد بالا از جدا شدن عنوان و متن دنبالهی آن در صفحات مجزا جلوگیری میکند.
|
1 2 3 4 5 |
@media print { table#big { page-break-after: always; } } |
قطعه کد بالا، محتوای پس از یک جدول خاص را همیشه در صفحهای جدید چاپ میکند. برای دیدن اطلاعات بیشتر در این مورد، اینجا کلیک کنید.
۸- نکات پایانی
- همان طور که گفته شد، بیشتر کاربران از چاپگرهای سیاه و سفید استفاده میکنند. بنابراین بهتر است همیشه رنگ عناصر مختلف را برای چاپ به شکلی تغییر دهید که روی چاپگرهای سیاه و سفید، کارایی کافی را داشته باشند.
- عناصر اضافی مثل تبلیغات، منوها، لینکها و هر عنصر دیگری که در نسخهی چاپ کارایی ندارد را از خروجی چاپ حذف کنید تا کمترین میزان کاغذ مصرف شود و خروجی چاپ شبیه یک سایت اینترنتی نباشد.
- ممکن است بخواهید برخی عناصر خاص را در نسخهی چاپ به صفحه اضافه کنید تا جایگزینی برای کاهش عملکردهای نسخهی وب باشد. این عناصر برعکس حالت قبلی در نسخهی وب مخفی میشوند.
- مجددا یادآوری میشود که نسخهی چاپی روی مرورگرهای مختلف با یکدیگر تفاوت دارد. بهتر است پیش از انتشار سایت، پیشنمایش چاپ صفحات خود را روی مرورگرهای مختلف بازبینی کنید.