HTML Print Styles
In this page:
<style>
@media print {
selector { property: value; }
}
</style>Print मीडिया क्वेरी
आप print मीडिया क्वेरी का उपयोग करके ऐसे CSS नियम लिख सकते हैं जो सिर्फ तब चलें जब आपका वेबपेज प्रिंटर को भेजा जाए। यह आपको अपने पेज लेआउट को फिज़िकल पेपर डायमेंशन्स के लिए पूरी तरह कस्टमाइज़ करने देता है।
उदाहरण: The Print Media Query
<style>
@media print {
body {
font-size: 12pt;
}
}
</style>इंटरैक्टिव एलिमेंट्स छुपाना
किसी वेबपेज को प्रिंट करते समय, इंटरैक्टिव एलिमेंट्स (जैसे sidebars, नेविगेशन मेनू, और submit बटन्स) कागज़ पर पूरी तरह बेकार होते हैं और इन्हें display: none प्रॉपर्टी का उपयोग करके छुपा देना चाहिए।
उदाहरण: Hiding Interactive Elements
<style>
@media print {
.no-print {
display: none;
}
}
</style>
<nav class="no-print">Navigation</nav>रंगों और बैकग्राउंड को फिर से फॉर्मैट करना
प्रिंटर्स चमकीले रंग या डार्क बैकग्राउंड अच्छी तरह प्रिंट नहीं करते। इंक बचाने और अपने डॉक्यूमेंट्स को पढ़ने योग्य बनाए रखने के लिए, आपके print styles में एक साफ, सफेद बैकग्राउंड पर हाई-कॉन्ट्रास्ट काला टेक्स्ट इस्तेमाल होना चाहिए।
उदाहरण: Reformatting Colors and Backdrops
<style>
@media print {
body {
background-color: white;
color: black;
}
}
</style>Page Breaks को नियंत्रित करना
प्रिंटर्स कागज़ की लंबाई के आधार पर कंटेंट को अलग-अलग फिज़िकल शीट्स में बाँट देते हैं। इसकी वजह से headings किसी पेज के सबसे नीचे प्रिंट हो सकती हैं, जबकि उनके पैराग्राफ अगली शीट पर अलग हो जाते हैं।
आप page breaks कहाँ हों यह नियंत्रित करने के लिए CSS प्रॉपर्टीज़ (जैसे break-before या break-inside) का उपयोग कर सकते हैं।
उदाहरण: Controlling Page Breaks
<style>
@media print {
tr {
break-inside: avoid;
}
}
</style>टेक्स्ट के बगल में Link URLs दिखाना
फिज़िकल कागज़ के टुकड़े पर, क्लिक करने योग्य लिंक्स बेकार होते हैं क्योंकि रीडर उन पर क्लिक नहीं कर सकते। कागज़ पढ़ने वालों को आपके रेफरेंस किए गए पेजेज़ ढूँढने में मदद के लिए, आप अपने लिंक टेक्स्ट के बगल में असली URL path को अपने-आप प्रिंट कराने के लिए CSS pseudo-elements का उपयोग कर सकते हैं।
उदाहरण: Displaying Link URLs next to Text
<style>
@media print {
a::after {
content: " (" attr(href) ")";
}
}
</style>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: