بهینه‌سازی کدهای 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)

—

—

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

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

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

۱. چرا باید به فکر پرینت صفحات وب باشیم؟

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

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

۲. روش‌های اضافه کردن کدهای CSS مخصوص چاپ

برای اعمال استایل‌های چاپی، دو روش استاندارد و ساده وجود دارد که بر اساس ساختار پروژه خود می‌توانید یکی از آن‌ها را انتخاب کنید.

### روش اول: استفاده از تگ “ مجزا در HTML

در این روش، شما یک فایل CSS کاملاً جداگانه برای حالت چاپ ایجاد می‌کنید و آن را با استفاده از تکه‌کدهای HTML استاندارد در بخش “ سایت خود صدا می‌زنید. نکته کلیدی استفاده از ویژگی `media=”print”` است:

“`html

“`

این روش برای پروژه‌های بزرگ بسیار عالی است چون کدهای مربوط به چاپ را از کدهای نمایشگر مجزا کرده و خوانایی سورس شما را بالا می‌برد.

### روش دوم: استفاده از Media Query در فایل CSS اصلی

اگر نمی‌خواهید یک درخواست HTTP اضافی برای بارگذاری فایل جدید ایجاد کنید، می‌توانید دستورات مربوط به چاپ را مستقیماً داخل فایل استایل اصلی خودتان با استفاده از کدهای آماده CSS قرار دهید:

“`css
@media print {
/* تمام کدهای مربوط به چاپ اینجا قرار می‌گیرند */
body {
background: white;
color: black;
}
}
“`

این روش به شما کمک می‌کند تمام کدهای استایل خود را یکجا مدیریت کنید و برای پروژه‌های کوچک و متوسط بسیار پرکاربرد است.

۳. اصول اساسی بهینه‌سازی کدهای CSS برای چاپ

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

* **مخفی کردن عناصر تعاملی:** فرم‌ها، دکمه‌ها، منوهای کشویی، سایدبارهای کناری و پاپ‌آپ‌ها هیچ نیازی روی کاغذ ندارند. آن‌ها را با `display: none;` حذف کنید.
* **حفظ کنتراست بالا:** متن‌ها حتماً باید مشکی تیره (`#000`) و پس‌زمینه کاملاً سفید گچی (`#fff`) باشد تا جوهر پرینتر بیهوده هدر نرود و خوانایی به حداکثر برسد.
* **استفاده از فونت‌های سری سریف (Serif):** بر خلاف نمایشگرها که فونت‌های بدون دندانه (Sans-Serif) در آن‌ها بهتر دیده می‌شوند، در چاپ کاغذی فونت‌های دندانه‌دار مانند لوتوس یا میترا خوانایی بسیار بالاتری دارند.
* **استفاده از واحد pt (Point) برای اندازه فونت:** در طراحی وب از px، rem یا em استفاده می‌کنیم؛ اما واحد استاندارد ماشین‌های چاپ در دنیا pt است. معمولاً سایز ۱۲pt برای متن بدنه عالی است.

۴. کدهای کاربردی CSS برای بهبود چاپ صفحات

در ادامه، چند قطعه کد بسیار کاربردی و نجات‌دهنده را مرور می‌کنیم که ظاهر خروجی چاپی شما را دگرگون خواهند کرد.

### نمایش آدرس لینک‌ها در برگه چاپی
کاربر روی کاغذ نمی‌تواند روی لینک‌ها کلیک کند! بنابراین باید آدرس واقعی لینک‌ها را جلوی آن‌ها چاپ کنیم. این کار با شبه‌عنصر `:after` و متد `attr` در CSS به سادگی قابل پیاده‌سازی است:

“`css
@media print {
a[href]:after {
content: ” (” attr(href) “)”;
font-size: 90%;
color: #555;
}
}
“`

### مدیریت شکست صفحات با Page Breaks
یکی از بزرگ‌ترین مشکلات در زمان پرینت، نصف شدن تصاویر یا پاراگراف‌ها در مرز بین دو صفحه است. با استفاده از کدهای زیر می‌توانید به پرینتر بگویید که چه بخش‌هایی نباید شکسته شوند:

“`css
@media print {
/* جلوگیری از نصف شدن تصاویر و جداول */
img, table, blockquote {
page-break-inside: avoid;
break-inside: avoid;
}

/* ایجاد شکست صفحه قبل از هدرهای اصلی برای شروع یک بخش جدید */
h2 {
page-break-before: always;
break-before: always;
}
}
“`

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

۵. جدول مقایسه تغییرات استایل در نمایشگر و نسخه چاپی

برای درک بهتر تفاوت‌های استایل‌دهی در نمایشگر (Screen) و کاغذ (Print)، جدول مقایسه‌ای زیر اصول کار را به شما نشان می‌دهد:

۶. آموزش گام‌به‌گام ساخت یک سند چاپی بی‌نقص

برای اینکه صفحات وب شما به زیباترین شکل ممکن روی کاغذ چاپ شوند، این مراحل را گام‌به‌گام در شیوه نامه‌ نویسی خود دنبال کنید:

1. **یک فایل استایل چاپی بسازید یا بلاک اختصاصی آن را تعریف کنید:**
ابتدا محدوده کدهای پرینت را مشخص کنید. استفاده از تمپلیت‌های آماده در توسعه وب سرعت شما را به شدت بالا می‌برد.
2. **عناصر غیرضروری را پاکسازی کنید:**
با کدهای ساده تمام نوار ناوبری بالا، پابرگ‌ها و بخش‌های تبلیغاتی را پنهان کنید.
3. **اندازه کاغذ و حاشیه‌ها را تعریف کنید:**
با استفاده از دستور `@page` می‌توانید حاشیه بیرونی صفحات چاپی را به دلخواه تنظیم کنید:
“`css
@page {
size: A4 portrait; /* تنظیم کاغذ در ابعاد A4 و حالت عمودی */
margin: 2cm; /* دو سانتی‌متر فاصله از لبه‌ها */
}
“`
4. **دکمه پرینت اختصاصی با جاوااسکریپت قرار دهید:**
برای بهبود تجربه کاربری، می‌توانید دکمه‌ای با محتوای “چاپ این صفحه” قرار دهید که با کلیک روی آن، دستور پرینت مرورگر صادر شود. برای پیاده‌سازی این بخش می‌توانید از متدهای کدهای جاوا اسکریپت کمک بگیرید:
“`html
پرینت این صفحه
“`

۷. عیب‌یابی سریع (Troubleshooting) مشکلات پرینت صفحات

در فرآیند طراحی استایل‌های چاپ، معمولاً با چالش‌های ریز و درشتی مواجه می‌شوید که در اینجا راه‌حل‌های سریع آن‌ها آورده شده است.

۸. سوالات متداول (FAQ)

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