CSS Print Styles

किसी online receipt या shipping label पर print button click करने की कल्पना करें। लेकिन एक साफ़, readable document के बजाय, आपका printer black sidebar columns, interactive navigation menus, promotional banners, और आधे-खाली sheets से ढके छह pages निकालता है। HTML print styles इस समस्या को solve करती हैं। ये आपको specific design rules लागू करने देती हैं जो सिर्फ तभी चलते हैं जब आपका page physical paper पर print होता है। interactive navigation menus को hide करके, भारी background fills हटाकर, और text colors को साफ़ black-and-white में adjust करके, आप सुनिश्चित करते हैं कि आपकी receipts और tickets ink बचाते हुए खूबसूरती से print हों।

In this page:

Print Media Query
Interactive Elements को Hide करना
Colors और Backdrops को Reformat करना
Page Breaks को Control करना
Text के बगल में Link URLs Display करना

Syntax

css

@media print {
  selector {
    display: none;
  }
}

Print Media Query

आप print media query इस्तेमाल करके ऐसे CSS rules लिख सकते हैं जो सिर्फ तभी चलते हैं जब आपकी webpage किसी printer को भेजी जाती है। यह आपको specifically physical paper dimensions के लिए अपने page layout को पूरी तरह customize करने देता है।

Note:

अपनी browser की print preview menu (Ctrl+P या Cmd+P) खोलकर अपनी print styles आसानी से test करें।
Accepted values:
@media print — सिर्फ printing के समय लागू होता है
@media screen — सिर्फ screen पर लागू होता है
@media print and (orientation: landscape) — combined
@media not print — print को छोड़कर बाकी सब
@media all — हर media type (default)

Warning: अपनी print styles में कभी भी भारी background colors इस्तेमाल न करें, क्योंकि printers default रूप से उन्हें नज़रअंदाज़ करेंगे या ink बर्बाद करेंगे।

उदाहरण: The Print Media Query

css

<style>
body { font-family: sans-serif; padding: 1rem; }
@media print {
  body {
    font-size: 12pt;
  }
}
</style>
<p>Body text is 12pt when printed.</p>

Interactive Elements को Hide करना

किसी webpage को print करते समय, interactive elements (जैसे sidebars, navigation menus, और submit buttons) paper पर बिल्कुल बेकार हैं और display: none property इस्तेमाल करके hide किया जाना चाहिए।

Note:

paper पर specific elements को जल्दी hide करने के लिए no-print नाम की एक CSS utility class बनाएँ।
Accepted values:
display: none — इसे printed page से हटा देता है
visibility: hidden — इसे hide करता है लेकिन जगह रखता है
@media print — print-only rules का wrapper
.no-print — एक common utility class

Warning: सुनिश्चित करें कि आप गलती से अपनी navigation bars के साथ essential content (जैसे document descriptions) भी hide न कर दें।

उदाहरण: Hiding Interactive Elements

css

<style>
body { font-family: sans-serif; padding: 1rem; }
nav, button, .no-print { background: #ffe0b3; padding: 4px; }
@media print {
  .no-print, nav, button {
    display: none;
  }
}
</style>
<nav>Navigation</nav>
<p>Article text stays.</p>
<button>Print</button>
<p class="no-print">Hidden when printing.</p>

Colors और Backdrops को Reformat करना

Printers bright colors या dark backgrounds अच्छी तरह print नहीं करते। ink बचाने और अपने documents को readable रखने के लिए, आपकी print styles को एक साफ़, white background पर high-contrast black text इस्तेमाल करना चाहिए।

Note:

अगर आपको absolutely background colors को force करके print करना ही है तो print-color-adjust: exact; इस्तेमाल करें।
Accepted values:
print-color-adjust: exact — backgrounds और colors को authored अनुसार print करता है
print-color-adjust: economy — ink बचाने के लिए browser backgrounds drop कर सकता है (default)
webkit-print-color-adjust: exact — पुराने WebKit/Blink के लिए prefixed form
background: white — backgrounds साफ़ करता है
color: black — high-contrast text

Warning: ज़्यादातर browsers ink बचाने के लिए background colors को automatically print होने से block कर देते हैं, इसलिए अपने layouts को white paper पर साफ़ तरीके से काम करने के लिए design करें।

उदाहरण: Reformatting Colors and Backdrops

css

<style>
body { font-family: sans-serif; padding: 1rem; background: #ddd; }
@media print {
  body {
    background: white;
    color: black;
  }
}
</style>
<p>On screen this page is light gray; in print it is white with black text.</p>

Page Breaks को Control करना

Printers content को paper length के आधार पर physical sheets में split करते हैं। यह headings को किसी page के बिल्कुल bottom पर print करा सकता है, अगली sheet पर उनके paragraphs से अलग। आप page breaks कहाँ हों यह control करने के लिए CSS properties (जैसे break-before या break-inside) इस्तेमाल कर सकते हैं।

Note:

table rows और image cards को दो pages में split होने से रोकने के लिए break-inside: avoid; इस्तेमाल करें।
Accepted values:
break-inside: avoid — किसी element को एक page पर रखता है
break-before: page — element से पहले एक page break force करता है
break-after: page — element के बाद एक page break force करता है
break-inside: avoid-page — सिर्फ pages के बीच box के अंदर एक break avoid करता है
break-before | break-after: auto | avoid | left | right — दूसरे keywords
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: बहुत सारे elements पर break-before: always; लागू करना printer को ज़्यादातर खाली pages output करा सकता है।

उदाहरण: Controlling Page Breaks

css

<style>
.card { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 12px; margin-bottom: 8px; }
@media print {
  .card, tr {
    break-inside: avoid;
  }
}
</style>
<div class="card">Card that should not split across pages</div>
<table border="1"><tr><td>Row</td></tr></table>

Text के बगल में Link URLs Display करना

physical paper के किसी टुकड़े पर, clickable links बेकार हैं क्योंकि readers उन्हें click नहीं कर सकते। paper readers को आपके referenced pages ढूँढने में मदद करने के लिए, आप CSS pseudo-elements इस्तेमाल करके अपने link text के बगल में असली URL path automatically print कर सकते हैं।

Note:

readers को आपकी referenced websites ढूँढने में मदद के लिए इस technique को specifically absolute links के लिए इस्तेमाल करें।
Accepted values:
content: " (" attr(href) ")" — URL append करता है
::after — इसे hold करने वाला pseudo-element
a[href^="http"] — सिर्फ external links
@media print — print-only rule

Warning: relative link URLs (जैसे '/contact.html') print करने से बचें क्योंकि वे paper पर काम के नहीं हैं।

उदाहरण: Displaying Link URLs next to Text

css

<style>
body { font-family: sans-serif; padding: 1rem; }
a { color: #1e6fd9; }
@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}
</style>
<p>Read the docs at <a href="https://example.com">our site</a>.</p>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS User Interface Next Lesson → CSS Pagination (Print)

CSS Print Styles

Print Media Query

Interactive Elements को Hide करना

Colors और Backdrops को Reformat करना

Page Breaks को Control करना

Text के बगल में Link URLs Display करना

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code