بهینه‌سازی کدهای CSS برای چاپ برگه (Print Style Sheet) ( کدهای CSS برای پرینت صفحه)

رفیق برنامه‌نویس، تا حالا شده مشتری یا مدیرت ازت بخواد که وقتی صفحه‌ش رو پرینت می‌گیرن، یه چیز دیگه از آب دربیاد؟ یا شاید خودت خواستی یه صفحه رو برای چاپ آماده کنی و دیدی که همه‌چی بهم ریخته و عکس‌ها نیستن و متن‌ها از کادر زدن بیرون؟ نگران نباش، این یه چالش رایجه، ولی راه حلش خیلی ساده‌تر از چیزیه که فکر می‌کنی: پرینت استایل شیت (Print Style Sheet). اگه دنبال یه راه حل کامل و بی‌دردسر برای این مشکل می‌گردی، باید بگم که ابزارهای ما می‌تونن حسابی کمکت کنن. یه سر به فروشگاه ابزارها بزن، مطمئنم اونجا چیزایی پیدا می‌کنی که کارتو راه می‌ندازه و از وقتت محافظت می‌کنه!

—

—

—

۱. اهمیت استایل‌های چاپی: چرا اصلا باید بهش فکر کنیم؟

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

پرینت استایل شیت دقیقاً همینجاست که به کمکت میاد. این یه فایل CSS جداگونه یا بخشی از CSS اصلی توئه که فقط وقتی کاربر دکمه “پرینت” رو میزنه، فعال میشه. هدفش چیه؟

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

خلاصه اینکه، فکر کردن به پرینت استایل شیت دیگه یه آپشن نیست، بلکه یه ضرورت تو دنیای وب امروزه.

۲. قاعده @media print: قلب تپنده پرینت استایل

همونطور که برای واکنش‌گرایی وب‌سایت‌ها از `@media screen` استفاده می‌کنیم، برای چاپ هم یه Media Query مخصوص داریم: `@media print`. این قاعده به مرورگر میگه که استایل‌های داخل این بلاک رو فقط زمانی اعمال کنه که داره محتوا رو برای چاپ آماده می‌کنه.

می‌تونیم استایل‌های چاپی رو به دو روش اضافه کنیم:

<!-- فایل CSS اصلی برای نمایش در صفحه -->
<link rel="stylesheet" href="style.css" media="screen">

<!-- فایل CSS مخصوص چاپ -->
<link rel="stylesheet" href="print.css" media="print">

/* استایل‌های عمومی برای نمایش در صفحه */
body {
    font-family: Arial, sans-serif;
    color: #333;
}

/* استایل‌های مخصوص چاپ */
@media print {
    body {
        font-family: Georgia, serif;
        color: #000;
        margin: 1cm; /* حاشیه ۱ سانتی‌متر از هر طرف */
    }
    nav, aside, footer {
        display: none; /* مخفی کردن منو، سایدبار و فوتر */
    }
}

۳. ویژگی‌های CSS کلیدی برای چاپ: شاه‌کلید کنترل

حالا که با `@media print` آشنا شدیم، بریم سراغ اون ویژگی‌های CSS که به دردمون می‌خورن. اینا رو میشه تو فایل print.css یا داخل بلوک `@media print` به کار برد.

۳.۱. کنترل چیدمان و صفحه بندی

اولین کاری که باید بکنیم، اینه که چیدمان صفحه رو برای کاغذ تنظیم کنیم.

* **`margin` و `padding`:** حاشیه‌های اطراف صفحه و بین عناصر رو تنظیم می‌کنیم. یادت باشه که مرورگرها برای پرینت معمولاً یه حاشیه پیش‌فرض دارن.

@media print {
    body {
        margin: 2cm; /* ۲ سانتی‌متر از هر طرف */
        padding: 0;
    }
}

* **`width`:** معمولاً بهتره که `width` عناصر رو روی `auto` یا `100%` تنظیم کنیم تا کل عرض صفحه رو بگیرن و از هم نپاشن.

@media print {
    #main-content {
        width: 100%;
        float: none; /* اگه float دارن، حذفشون کن */
    }
    .container {
        max-width: none; /* حداکثر عرض رو بردار */
    }
}

۳.۲. کنترل دیداری عناصر

اینجا جاییه که می‌تونی عناصر مزاحم رو از دید پنهان کنی.

* **`display: none;`:** این مهم‌ترین خاصیته! هرچیزی که نمی‌خوای تو پرینت باشه رو با این خاصیت مخفی کن. مثلاً ناوبری، سایدبار، تبلیغات، دکمه‌های اشتراک‌گذاری و…

@media print {
    header, nav, aside, footer, .sidebar, .ad-banner, .share-buttons, form {
        display: none;
    }
}

* **`visibility: hidden;`:** این هم مثل `display: none;` عمل می‌کنه، با این تفاوت که فضای عنصر رو نگه می‌داره. معمولاً `display: none;` ترجیح داده میشه، چون کلاً عنصر رو از جریان سند حذف می‌کنه.

۳.۳. مدیریت تایپوگرافی

فونت‌ها روی کاغذ باید خوانا باشن و جوهر کمی مصرف کنن.

* **`font-family`:** فونت‌های سریف (Serif) مثل Georgia یا Times New Roman معمولاً برای چاپ مناسب‌ترن، چون خوانایی بهتری روی کاغذ دارن.
* **`font-size`:** اندازه فونت رو تنظیم کن. معمولاً کمی بزرگتر از حالت نمایشگر برای متن اصلی بهتره (مثلاً ۱۲pt یا ۱۶px). یادت باشه واحد `px` برای چاپ هم کار می‌کنه ولی `pt` (پوینت) واحدی مخصوص چاپه و ۱pt برابر با 1/72 اینچه.
* **`line-height`:** فاصله بین خطوط رو برای خوانایی بهتر تنظیم کن.
* **`color`:** رنگ متن رو حتماً مشکی خالص (`#000`) یا خاکستری تیره (`#333`) کن. رنگ‌های روشن یا فانتزی رو روی کاغذ هیچکس دوست نداره.

@media print {
    body {
        font-family: 'Times New Roman', Times, serif;
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: Georgia, serif;
        color: #333;
        page-break-after: avoid; /* تیترها رو تنها نذاریم ته صفحه */
    }
    p {
        orphans: 3; /* حداقل ۳ خط پاراگراف در بالا و پایین صفحه باقی بماند */
        widows: 3; /* حداقل ۳ خط پاراگراف در بالا و پایین صفحه باقی بماند */
    }
}

۳.۴. رنگ‌ها و پس‌زمینه‌ها

معمولاً پس‌زمینه‌های رنگی و عکس‌ها روی کاغذ خوب درنمیان و جوهر زیادی مصرف می‌کنن.

* **`background-color: transparent;` و `background-image: none;`:** همه پس‌زمینه‌های رنگی و عکس‌های پس‌زمینه رو حذف کن تا هم جوهر ذخیره بشه و هم متن‌ها واضح‌تر باشن.
* **`color: #000;`:** رنگ پیش‌فرض متن‌ها رو مشکی کن.
* **`box-shadow: none;` و `text-shadow: none;`:** سایه‌ها رو حذف کن.

@media print {
    * { /* اعمال به همه عناصر */
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a {
        text-decoration: underline !important; /* لینک‌ها رو زیرخط‌دار کن */
    }
}

۴. نکات کاربردی و بهترین روش‌ها برای پرینت بی‌نقص

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

۴.۱. حذف عناصر اضافی و حاشیه‌ای

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

@media print {
    /* کل هدر، ناوبری، سایدبار و فوتر */
    header, nav, aside, footer, #navbar, #sidebar, #ads, #social-share {
        display: none;
    }
    /* دکمه‌ها، فرم‌ها، ورودی‌ها */
    button, input[type="submit"], .print-hidden, form {
        display: none;
    }
    /* آیکون‌ها و برخی تصاویر کوچک */
    .icon, img[src*="icon"], .no-print {
        display: none;
    }
    /* پس‌زمینه‌های رنگی و سایه‌ها */
    body {
        background-color: #fff !important;
        -webkit-print-color-adjust: exact; /* برای نگه‌داشتن رنگ‌های خاص اگه لازمه */
    }
}

۴.۲. بهینه‌سازی تصاویر برای چاپ

تصاویر میتونن موقع چاپ مشکل‌ساز بشن.

* **کاهش اندازه (اختیاری):** اگه تصویر خیلی بزرگه و فقط برای زیبایی بصریه، شاید بهتر باشه `max-width: 100%;` بدی یا کلاً حذفش کنی.
* **واترمارک (اختیاری):** اگه لازم داری، میتونی با CSS یه واترمارک ساده اضافه کنی.
* **`object-fit`:** مطمئن شو تصاویر به درستی درون کادرشون جای میگیرن.

@media print {
    img {
        max-width: 100% !important; /* تصاویر از کادر خارج نشن */
        height: auto !important; /* نسبت ابعادی حفظ بشه */
        display: block; /* برای مدیریت بهتر بلوکی بشن */
        margin: 1em auto; /* در مرکز قرار بگیرن */
        border: 1px solid #ccc; /* اگه لازمه یه کادر داشته باشن */
    }
    img.logo, img.hero-banner { /* حذف تصاویر بزرگ یا غیرضروری */
        display: none;
    }
}

۴.۳. مدیریت لینک‌ها: چاپ آدرس در کنار متن

روی کاغذ، لینک‌ها قابل کلیک نیستن! پس بهتره آدرسشون کنارشون چاپ بشه تا کاربر بتونه بعداً تایپشون کنه.

@media print {
    a[href]:after {
        content: " (" attr(href) ")"; /* آدرس رو بعد از متن لینک نشون بده */
        word-wrap: break-word; /* اگه آدرس طولانیه، بشکونه */
    }
    a[href^="#"]:after, /* لینک‌های داخلی (انکرها) */
    a[href^="mailto:"]:after, /* لینک‌های ایمیل */
    a[href^="tel:"]:after, /* لینک‌های تلفن */
    a[href^="javascript:"]:after {
        content: ""; /* اینها رو نمایش نده */
    }
    /* لینک به فروشگاه ابزارها */
    a[href="https://fa-tools.ir/shop/"]:after {
        content: " (https://fa-tools.ir/shop/ - مشاهده ابزارهای ما)";
    }
    /* لینک به تماس با تیم فنی */
    a[href="https://fa-tools.ir/contact/"]:after {
        content: " (https://fa-tools.ir/contact/ - تماس با ما)";
    }
    /* لینک به صفحه کدهای آماده */
    a[href*="کدهای-آماده-و-اسنیپت"]:after { /* فرض می‌کنیم آدرس این شکلیه */
        content: " (https://fa-tools.ir/snippets - کدهای آماده)";
    }
}

۴.۴. مدیریت شکست صفحه با page-break: اینجا بشکون، اونجا نشکون!

یکی از بزرگترین مشکلات در چاپ، شکسته شدن محتوا در جاهای نامناسبه. مثلاً یه تیتر میفته بالای یه صفحه و بقیه پاراگرافش میره صفحه بعد. CSS برای این مشکل هم راه حل داره:

* **`page-break-before`، `page-break-after`، `page-break-inside`:** این سه ویژگی بهت کمک می‌کنن مشخص کنی کجا صفحه بشکنه و کجا نشکنه.
* `always`: همیشه قبل/بعد از این عنصر صفحه بشکنه.
* `avoid`: از شکستن صفحه قبل/بعد/داخل این عنصر جلوگیری کن.
* `auto`: مرورگر خودش تصمیم بگیره.

@media print {
    h1, h2, h3 {
        page-break-after: avoid; /* تیترها نباید آخر صفحه باشن */
    }
    p, blockquote, pre, table, img {
        page-break-inside: avoid; /* این عناصر نباید از وسط شکسته بشن */
    }
    .chapter { /* اگه فصل‌بندی داری */
        page-break-before: always; /* هر فصل از صفحه جدید شروع بشه */
    }
    .no-break-content { /* برای محتوایی که نباید کلاً شکسته بشه */
        page-break-inside: avoid;
    }
}

۴.۵. شمارنده‌ها و لیست‌ها: آرایش صفحات و بخش‌ها

بعضی وقتا نیاز داری به صورت خودکار شماره صفحه، نام بخش یا هر چیز دیگه‌ای رو اضافه کنی. CSS Counterها اینجا به کارت میان.

* **`counter-reset` و `counter-increment`:** برای ایجاد و افزایش شمارنده‌ها.
* **`content` با `::before` و `::after`:** برای نمایش شمارنده‌ها.

@media print {
    @page { /* برای تنظیمات کل صفحه چاپ */
        margin: 1cm;
        @top-center { content: "عنوان سند"; } /* عنوان در بالای صفحه */
        @bottom-left { content: "Page " counter(page) " of " counter(pages); } /* شماره صفحه */
        @bottom-right { content: url(https://fa-tools.ir/logo.png); } /* لوگو در پایین سمت راست */
    }

    body {
        counter-reset: page;
    }

    /* افزودن آدرس صفحه فعلی به انتهای محتوا */
    body::after {
        content: "منبع: " url(document) " (تاریخ: " date(local) ")";
        display: block;
        text-align: center;
        margin-top: 2em;
        font-size: 0.8em;
        color: #666;
    }
}

۴.۶. تست استایل‌های چاپی: تا چاپ نکردی باور نکن!

مهم‌ترین بخش ماجرا! فکر نکن که چون کد رو نوشتی، پس حله. حتماً و حتماً باید تست کنی.

* **پیش‌نمایش چاپ مرورگر:** تو هر مرورگری (کروم، فایرفاکس، اج)، میتونی با زدن `Ctrl + P` (یا `Cmd + P` تو مک) و انتخاب “Print” یا “Preview” پیش‌نمایش چاپ رو ببینی.
* **DevTools:** تو کروم و فایرفاکس، می‌تونی DevTools رو باز کنی (`F12`) و تو قسمت Styles (یا Inspector)، روی آیکون Media (اغلب شبیه یک چاپگر کوچک) کلیک کنی و `print` رو انتخاب کنی. اینجوری صفحه وب دقیقاً مثل حالت چاپ نمایش داده میشه و میتونی همونجا اشکالات رو پیدا و رفع کنی. واقعا ابزار کاربردی و مفیدی است.
* **پرینت واقعی:** گاهی اوقات، مرورگرها تفاوت‌های کوچکی تو رندر کردن پرینت دارن. بهترین راه اینه که حتماً یه بار یه برگه رو واقعاً چاپ کنی و نتیجه نهایی رو ببینی.

۵. تکنیک‌های پیشرفته برای مواردی خاص‌تر

اگه پروژت بزرگ‌تره یا نیازهای خاصی داری، این تکنیک‌ها ممکنه به کارت بیان.

۵.۱. متغیرهای CSS و پرینت استایل

با استفاده از Custom Properties (متغیرهای CSS)، می‌تونی مقادیر مختلفی برای حالت نمایش و چاپ تعریف کنی. این کار کد رو تمیزتر و قابل مدیریت‌تر می‌کنه.

:root {
    --text-color-screen: #333;
    --bg-color-screen: #f4f4f4;
    --font-size-screen: 16px;
}

body {
    color: var(--text-color-screen);
    background-color: var(--bg-color-screen);
    font-size: var(--font-size-screen);
}

@media print {
    :root {
        --text-color-print: #000;
        --bg-color-print: #fff;
        --font-size-print: 12pt;
    }

    body {
        color: var(--text-color-print);
        background-color: var(--bg-color-print);
        font-size: var(--font-size-print);
    }
}

۵.۲. جاوااسکریپت و چاپ: کی لازم میشه؟

اگه نیاز به دستکاری پیچیده‌تری قبل یا بعد از پرینت داری، جاوااسکریپت به کمکت میاد.

* **`window.onbeforeprint` و `window.onafterprint`:** این ایونت‌ها قبل و بعد از اینکه مرورگر دیالوگ پرینت رو باز کنه، اجرا میشن. می‌تونی ازشون برای مخفی کردن موقتی عناصر، اضافه کردن کلاس‌های خاص یا حتی بارگذاری داده‌های بیشتر استفاده کنی.

window.onbeforeprint = function() {
    console.log('صفحه در حال آماده‌سازی برای چاپ...');
    // مثلاً اضافه کردن کلاسی برای مخفی کردن عناصر خاص
    document.body.classList.add('printing-mode');
};

window.onafterprint = function() {
    console.log('چاپ به پایان رسید یا لغو شد.');
    // بعد از چاپ، کلاس رو حذف کن
    document.body.classList.remove('printing-mode');
};

۶. عیب‌یابی سریع پرینت استایل: مشکلات رایج و راه‌حل‌ها

گاهی اوقات همه‌چی طبق برنامه پیش نمیره و تو با مشکلاتی موقع پرینت مواجه میشی. اینجا چندتا از مشکلات رایج و راه‌حل‌هاشون رو با هم مرور می‌کنیم:

۷. سوالات متداول درباره پرینت استایل شیت (FAQ)

—

—