CSS Printed Page

कई साइटों में एक पृष्ठ का मुद्रण योग्य संस्करण प्रदर्शित करने की क्षमता होती है, लेकिन क्या उनका उपयोग करना हमेशा सुविधाजनक होता है?

दस्तावेज़ को प्रिंट करते समय मुख्य समस्याएं खराब टाइपोग्राफी, अनावश्यक जानकारी की उपस्थिति (उदाहरण के लिए, इंटरफ़ेस तत्व) और गलत रंग हैं। स्टाइल के लिए, आप @मीडिया नियम का उपयोग कर सकते हैं:

@media print { } 

यदि उपयोगकर्ता स्क्रीन पर प्रदर्शित डिज़ाइन के साथ एक पृष्ठ प्रिंट करना चाहता है, तो वह एक स्क्रीनशॉट लेता है और उसे प्रिंट करता है। प्रिंट संस्करण को कागज की शीट से पाठ के सरल और आरामदायक पढ़ने के लिए डिज़ाइन किया गया है। इसलिए, सबसे पहले, आपको पृष्ठ से सभी अतिश्योक्ति को दूर करने की आवश्यकता है: मेनू, बड़े पैमाने पर शीर्ष लेख या पाद लेख, पृष्ठभूमि चित्र आदि, केवल आवश्यक छोड़कर: शीर्षकों, छवियों के साथ सामग्री, वेबसाइट लोगो, पृष्ठ URL। उदाहरण के लिए, यह कोड H1 हेडर, साथ ही साइट के साइडबार, हेडर और पाद को छुपाता है:

 h1, div#header, div#sidebar, div#footer { display: none; } 

पेज नियम प्रिंट करें

1. आधुनिक ब्राउज़र पृष्ठभूमि छवि को निकाल सकते हैं। हालांकि, पृष्ठभूमि-छवि को जोड़ना उचित है : कोई भी नहीं ताकि पुराने ब्राउज़र भी ऐसा कर सकें।

2. पिक्सेल में आकार असाइन करते समय स्क्रीन पर इसके प्रदर्शन के साथ मुद्रित पृष्ठ में विसंगतियां हो सकती हैं। इसलिए, यह इंच, सेंटीमीटर या प्रतिशत का उपयोग करने के लायक है।

3. निम्नलिखित कोड का उपयोग करके, आप हाइपरलिंक के बजाय पूर्ण URL प्रदर्शित कर सकते हैं, क्योंकि आप कागज की एक शीट पर क्लिक नहीं कर सकते हैं:

 a:after {content:" <" attr(href) ">"; 

कोड को थोड़ा संशोधित करके, आप केवल बाहरी लिंक के लिए एक URL प्रदर्शन जोड़ सकते हैं:

 a[href^=http]:after {content:" <" attr(href) ">"; 

4. बड़े ग्रंथों के लिए, भागों में विभाजन कभी-कभी उचित होगा। निम्नलिखित कोड प्रत्येक H3 हेडर पर सामग्री को तोड़ता है, एक नए पृष्ठ पर छपाई करता है:

 h3 { page-break-before: always; } 

और यह कोड नए लेख से प्रत्येक लेख को प्रिंट करने में मदद करेगा; यह ब्लॉग प्रविष्टियों की सूची को प्रिंट करते समय उपयोगी हो सकता है:

 article + article { page-break-before: always; } 

5. एक मानक रंग योजना में एक काले या उज्ज्वल डिजाइन के साथ साइटों की शैलियों को फिर से सौंपना उचित है - एक सफेद पृष्ठभूमि पर काला पाठ। यह पठनीयता और उपयोगकर्ता के प्रिंटर में उपभोग्य सामग्रियों को बचाने के लिए सुविधाजनक है।

सही प्रदर्शन

जैसा कि ऊपर उल्लेख किया गया है, आधुनिक ब्राउज़र मुद्रण करते समय अनावश्यक तत्वों को हटा सकते हैं, लेकिन इसकी हमेशा आवश्यकता नहीं होती है। फ़ायरफ़ॉक्स में, उपयोगकर्ता परिणाम की उपस्थिति को नियंत्रित कर सकता है, क्रोम और सफारी में आप मूल शैली को प्रदर्शित करने के लिए नीचे दिए गए कोड का उपयोग कर सकते हैं:

 * { -webkit-print-color-adjust: exact; } 

यह कार्रवाई में कैसा दिखता है:

प्रिंट गुणवत्ता

अक्सर प्रिंट परिणाम खराब होने के लिए स्क्रीन पर मूल से बहुत अलग होता है। हम एक साधारण उदाहरण के साथ इसके लिए सामान्य कारणों में से एक का विश्लेषण करेंगे। एक अंधेरे पृष्ठभूमि पर हल्का पाठ है:



निम्नलिखित सीएसएस के साथ:

 header { background: #000; color: #fff; padding: 1rem; font-family: Avenir, Arial, sans-serif; } 

ब्राउज़र प्रिंट संस्करण को सामान्य करने की कोशिश करेगा:



यदि पृष्ठ पर एक छवि है, उदाहरण के लिए एक लोगो, तो ब्राउज़र इसे किसी भी तरह से सही नहीं करता है, और यह बहुत ही महत्वपूर्ण है:



सब कुछ और भी बुरा लगता है अगर पारदर्शिता वाली वेक्टर छवि को लोगो के रूप में उपयोग किया जाता है:



CSS3 फ़िल्टर का उपयोग करके इस डरावनी स्थिति से बचा जा सकता है:

 @media print { header { background: none; color: #000; } header img { -webkit-filter: invert(100%); filter: invert(100%); } } 

यह पता चला है:



फ़ायरफ़ॉक्स के लिए, आप एसवीजी का उपयोग कर सकते हैं:

 <svg xmlns="http://www.w3.org/2000/svg"> <filter id="negative"> <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /> </filter> </svg> 

सीएसएस:

 @media print { header { background: none; color: #000; } header img { filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); } } 

IE9 के लिए, Lea Verou से एक समाधान:

 <!--[if IE 9]> <style> @media print { header:after { content:""; display: block; height: 1px; width: 1px; position: absolute; top: 100px; right: 100px; outline: 100px solid invert; } } </style> <![endif]--> 

प्रयुक्त सामग्री:

• प्रिंट स्टाइल्सशीट्स के लिए सीएसएस लिखना
• वेब पेज प्रिंट करते समय सटीक रंग
• CSS3 फ़िल्टर के साथ वेब पेजों की गुणवत्ता प्रिंट संस्करण बनाएँ