मुद्रण के लिए दस्तावेज़ों को प्रारूपित करने के लिए CSS का उपयोग करना

मुद्रण के लिए दस्तावेज़ों को प्रारूपित करने के लिए CSS का उपयोग करना

यदि आपने कभी भी वेब से किसी होटल के लिए टिकट आरक्षण या दिशा-निर्देश मुद्रित किए हैं, तो आप शायद परिणामों से कम प्रभावित हुए हैं। इसलिए, आप इस बात से अनजान हो सकते हैं कि कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग करके मुद्रित दस्तावेज़ों को उसी तरह से स्टाइल किया जा सकता है जैसे वे ऑन-स्क्रीन कर सकते हैं।





चिंताओ का विभाजन

CSS का एक प्रमुख लाभ प्रस्तुति से सामग्री को अलग करना है। सरल शब्दों में, इसका अर्थ बहुत पुराने जमाने की शैलीगत मार्कअप के बजाय है जैसे:



Heading

हम सिमेंटिक मार्कअप का उपयोग करते हैं:






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

h1 { font-weight: normal; }

उन शैली घोषणाओं को एक अलग फ़ाइल में इकट्ठा करके, और उस फ़ाइल को हमारे HTML दस्तावेज़ से संदर्भित करके, हम अलगाव का और भी बेहतर उपयोग कर सकते हैं। स्टाइल शीट का पुन: उपयोग किया जा सकता है, और हम इसका उपयोग करने वाले प्रत्येक दस्तावेज़ में स्वरूपण को अद्यतन करने के लिए किसी भी समय उस एकल फ़ाइल को बदल सकते हैं।



प्रिंट स्टाइल शीट सहित

स्क्रीन स्टाइल शीट को शामिल करने के समान तरीके से, हम प्रिंट के लिए स्टाइल शीट निर्दिष्ट कर सकते हैं। एक स्क्रीन स्टाइल शीट को आमतौर पर इस तरह शामिल किया जाता है:


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




इसका मतलब है कि स्टाइलशीट किसी भी माध्यम के लिए लागू की जाएगी जिसमें दस्तावेज़ प्रस्तुत किया गया है। हालांकि, मीडिया विशेषता प्रिंट और स्क्रीन के मान भी ले सकती है:


इस उदाहरण में, प्रिंट.सीएसएस स्टाइलशीट का उपयोग केवल तभी किया जाएगा जब दस्तावेज़ का प्रिंट आउट लिया गया हो। यह एक बहुत ही उपयोगी तंत्र है। हम सभी सामान्य स्टाइल (शायद फ़ॉन्ट फ़ैमिली या लाइन स्पेसिंग) को एक स्टाइलशीट में इकट्ठा कर सकते हैं जो सभी मीडिया पर लागू होती है, और अलग-अलग स्टाइलशीट में मीडिया-विशिष्ट स्वरूपण। फिर, यह चिंताओं को अलग करने का एक और उपयोग है।



कुछ उदाहरण शैली घोषणाएँ

एक साफ पृष्ठभूमि

आप लगभग निश्चित रूप से रंगीन पृष्ठभूमि या पृष्ठभूमि छवि को प्रिंट करने वाली स्याही को बर्बाद नहीं करना चाहते हैं। आपके दस्तावेज़ में सेट किए गए इन मानों के लिए किसी भी डिफ़ॉल्ट को रीसेट करके प्रारंभ करें:

body {
background: white;
color: black;
}

आप किसी भी पृष्ठभूमि छवियों को प्रिंट होने से रोकना चाह सकते हैं—ये सजावटी होने चाहिए और इसलिए, आपकी सामग्री का एक आवश्यक हिस्सा नहीं होना चाहिए:

* {
background-image: none !important;
}

सम्बंधित: CSS में बैकग्राउंड इमेज कैसे सेट करें

किसी चीज़ में महारत हासिल करने में कितने घंटे लगते हैं

मार्जिन को नियंत्रित करना

प्रिंट के संबंध में विचार करने के लिए एक और स्पष्ट बिंदु पृष्ठ मार्जिन है। जबकि सीएसएस मार्जिन आकार निर्धारित करने का एक साधन प्रदान करता है, आपको यह ध्यान रखना चाहिए कि आपका ब्राउज़र और प्रिंटर स्वयं भी मार्जिन सेटिंग्स को प्रभावित कर सकते हैं।

उदाहरण के लिए, क्रोम के प्रिंट डायलॉग में, एक मार्जिन सेटिंग होती है जिसमें मान शामिल होते हैं कोई नहीं तथा रीति जो सीएसएस के माध्यम से निर्दिष्ट कुछ भी ओवरराइड करेगा:

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

@page {
margin: 2cm;
}

सीएसएस में अधिक परिष्कृत प्रिंट लेआउट की क्षमता भी है, जैसे कि पृष्ठ एक विषम-संख्या वाला (दाएं), सम-संख्या वाला (बाएं), या कवर पृष्ठ के अनुसार मार्जिन को बदलना।

एचबीओ मैक्स इतना धीमा क्यों है

दुर्भाग्य से, यह खराब रूप से समर्थित है - विशेष रूप से कवर पेज विकल्प - लेकिन इसका उपयोग न्यूनतम सीमा तक किया जा सकता है। निम्नलिखित शैलियाँ शीर्ष की तुलना में थोड़ा बड़ा निचला मार्जिन और रीढ़ की तुलना में बाहरी पृष्ठ किनारे पर थोड़ा बड़ा मार्जिन वाले पृष्ठ उत्पन्न करती हैं:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

अप्रासंगिक सामग्री छिपाना

सभी सामग्री आपके दस्तावेज़ के प्रिंट संस्करण के लिए उपयुक्त नहीं होगी। यदि आपके पृष्ठ में बैनर नेविगेशन, विज्ञापन या साइडबार शामिल है, तो हो सकता है कि आप उन विवरणों को प्रिंट संस्करण में प्रदर्शित होने से रोकना चाहें, उदाहरण के लिए:

#contents, div.ad { display: none; }

हाइपरलिंक स्पष्ट रूप से मुद्रित सामग्री में प्रासंगिक नहीं हैं, इसलिए आप शायद किसी भी शैली को हटाना चाहेंगे जो उन्हें आसपास के पाठ से अलग करती है:

a { text-decoration: none; color: inherit; }

हालांकि, हो सकता है कि आप अभी भी चाहते हों कि पाठकों को मूल URL तक पहुंच प्राप्त हो, और एक सीधा समाधान यह है कि लिंक किए गए पाठ के बाद उन्हें स्वचालित रूप से सम्मिलित किया जाए:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

यह सीएसएस निम्नलिखित जैसे परिणाम देता है:

एक [href]: के बाद विशेष रूप से स्थिति को लक्षित करता है ( :उपरांत ) प्रत्येक लिंक तत्व ( प्रति ) जिसका वास्तव में एक URL है ( [एचआरएफ] ) NS विषय घोषणा यहाँ का मूल्य सम्मिलित करता है href कोष्ठक के बीच विशेषता। ध्यान दें कि उत्पन्न सामग्री के प्रदर्शन को नियंत्रित करने के लिए अन्य शैली नियम लागू किए जा सकते हैं।

पेज ब्रेक को संभालना

पृष्ठ विराम से बचने के लिए पृथक सामग्री छोड़कर, या इसे बीच में अजीब तरह से तोड़ने के लिए, पृष्ठ-विराम गुणों का उपयोग करें: पेज-अलग होने से पहले , पृष्ठ-विराम-बाद तथा पेज-अलग होने के अंदर . उदाहरण के लिए:

table { page-break-inside: avoid; }

इससे तालिकाओं को एक से अधिक पृष्ठों तक फैलने से रोकने में मदद मिलनी चाहिए, बशर्ते कि कोई भी एक पृष्ठ से लंबा न हो। इसी तरह:

h1, h2 { page-break-before: always; }

इसका मतलब है कि इस तरह के शीर्षक हमेशा एक नया पृष्ठ शुरू करते हैं। यह समस्याएँ पैदा कर सकता है यदि आप तुरंत अपने पृष्ठ के h1 को h2 के साथ फॉलो करते हैं, हालाँकि, क्योंकि h1 अपने आप ही एक पृष्ठ पर समाप्त हो जाएगा। इससे बचने के लिए, उस विशिष्ट उदाहरण को लक्षित करने वाले चयनकर्ता का उपयोग करके पृष्ठ विराम को रद्द करें, उदाहरण के लिए:

सोशल मीडिया साइट्स पैसे कैसे कमाती हैं
h1 + h2 { page-break-before: avoid; }

प्रिंट शैलियाँ देखना

सभी मामलों में, आपके ब्राउज़र और ऑपरेटिंग सिस्टम को एक प्रिंट पूर्वावलोकन सुविधा प्रदान करनी चाहिए, अक्सर मानक प्रिंट संवाद के भाग के रूप में।

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

दिखाई देने वाले नए पैनल से, चुनें मेन्यू , फिर अधिक उपकरण , के बाद प्रतिपादन :

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

प्रिंट स्टाइलशीट का अनुकरण करते समय, मानक शैलियाँ ब्राउज़र लाइव स्टाइल नियमों का निरीक्षण और संशोधन करने के लिए उपलब्ध है। ध्यान रखें कि स्क्रीन पर प्रिंट आउटपुट का अनुकरण करना अभी भी 100% सटीक नहीं है। ब्राउज़र को कागज़ के आकार के बारे में कुछ नहीं पता है, और @पृष्ठ नियम का अनुकरण नहीं किया जा सकता।

PDF में प्रिंट करना

आधुनिक ऑपरेटिंग सिस्टम की एक उपयोगी विशेषता एक पीडीएफ फाइल को प्रिंट करने की क्षमता है। असल में, आप जो कुछ भी प्रिंट कर सकते हैं, उसे पीडीएफ फाइल में भेजा जा सकता है-कोई वास्तविक आश्चर्य नहीं है क्योंकि पीडीएफ फाइल को मुद्रित दस्तावेज़ का प्रतिनिधित्व करना माना जाता है।

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

आप गुणवत्ता दस्तावेज़ बनाने के लिए प्रिंट स्टाइलशीट का उपयोग कर सकते हैं, जिसमें आपके सीवी से लेकर व्यंजनों या ईवेंट घोषणाओं तक कुछ भी शामिल है। वेब पेज आमतौर पर बदसूरत दिखते हैं और मुद्रित होने पर अवांछित विवरण होते हैं, लेकिन शैली में बदलाव की एक छोटी संख्या नाटकीय रूप से प्रिंट परिणामों में सुधार कर सकती है। अंतिम परिणामों को PDF के रूप में सहेजना आकर्षक, पेशेवर दस्तावेज़ बनाने का एक त्वरित तरीका है।

साझा करना साझा करना कलरव ईमेल माइक्रोसॉफ्ट एज के साथ वेब पेजों को पीडीएफ में कैसे प्रिंट करें

क्या आपने कभी कोई दिलचस्प लेख देखा है जिसे आप बाद के लिए सहेजना चाहते हैं? ठीक है, आप तीन आसान चरणों में एज के साथ पीडीएफ के रूप में सहेज सकते हैं।

आगे पढ़िए संबंधित विषय
  • प्रोग्रामिंग
  • मुद्रण
  • सीएसएस
लेखक के बारे में बॉबी जैक(58 लेख प्रकाशित)

बॉबी एक प्रौद्योगिकी उत्साही हैं जिन्होंने दो दशकों तक एक सॉफ्टवेयर डेवलपर के रूप में काम किया। उन्हें गेमिंग का शौक है, स्विच प्लेयर मैगज़ीन में समीक्षा संपादक के रूप में काम कर रहे हैं, और ऑनलाइन प्रकाशन और वेब विकास के सभी पहलुओं में डूबे हुए हैं।

बॉबी जैक . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें