पब्लिश करने की तारीख: 30 अक्टूबर, 2024
Chrome 131 से, पेजों को प्रिंट करते समय उनके मार्जिन में कॉन्टेंट जोड़ने के लिए सीएसएस का इस्तेमाल किया जा सकता है. इस पोस्ट में, पेज किए गए मीडिया के लिए पेज मॉडल के बारे में बताया गया है. साथ ही, इस सुविधा का इस्तेमाल करके, अपने वेबपेजों से प्रिंट आउटपुट को बेहतर बनाने का तरीका बताया गया है.
सीएसएस में ऐसे स्पेसिफ़िकेशन शामिल होते हैं जो पेज वाले मीडिया से जुड़े होते हैं. जैसे, सीएसएस पेज वाला मीडिया मॉड्यूल और पेज वाले मीडिया के लिए सीएसएस जनरेट किया गया कॉन्टेंट. ये कुकी ऐसी सुविधाओं के बारे में बताती हैं जिनका इस्तेमाल सिर्फ़ तब किया जाता है, जब किसी पेज को प्रिंट किया जाता है. इसमें PDF फ़ाइल के तौर पर प्रिंट करना भी शामिल है. ऐसे कई यूज़र-एजेंट हैं जो इस सीएसएस के साथ काम करते हैं. इनकी मदद से, एचटीएमएल और सीएसएस से किताबें और अन्य प्रिंटेड कॉन्टेंट जनरेट किया जा सकता है. हालांकि, वेब ब्राउज़र में इस सुविधा का इस्तेमाल कभी भी ठीक से नहीं किया जा सका. ऐसा तब भी होता है, जब हमें अक्सर ऐप्लिकेशन से प्रिंट करना होता है या PDF बनाने होते हैं.
Chrome और Firefox, @page at-rule के साथ काम करते हैं. इस नियम की मदद से, प्रिंट किए जाने वाले पेज का साइज़ और कॉन्टेंट के चारों ओर मौजूद मार्जिन का साइज़ तय किया जा सकता है. Chrome 131 से, जनरेट किए गए कॉन्टेंट का इस्तेमाल मार्जिन में कॉन्टेंट जोड़ने के लिए भी किया जा सकता है. इसके लिए, मार्जिन से जुड़े काम के ऐट-रूल को टारगेट करें.
पेज मॉडल
पेज वाले मीडिया में इस्तेमाल किया गया पेज मॉडल, पेज बॉक्स को तय करता है. यह आपका पेपर होता है. पेज बॉक्स के अंदर, पेज मार्जिन, पेज बॉर्डर, पेज पैडिंग, और आखिर में पेज एरिया होता है. इसी एरिया में आपका कॉन्टेंट दिखता है. कॉन्टेंट को प्रिंट करते समय, उसे ज़रूरत के हिसाब से कई पेजों में बांट दिया जाता है.
इसके बाद, पेज के मार्जिन को 16 बॉक्स में बांट दिया जाता है. हर बॉक्स में एक एट्रिब्यूट होता है.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
मार्जिन बॉक्स का साइज़ तय करना
ऊपर और नीचे मौजूद बॉक्स की ऊंचाई और बाईं और दाईं ओर मौजूद बॉक्स की चौड़ाई, @page का इस्तेमाल करके सेट किए गए मार्जिन के साइज़ से तय होती है. इसलिए, कॉर्नर बॉक्स का साइज़ तय होता है. यह साइज़, मार्जिन के इंटरसेक्शन से तय होता है. हालांकि, हर कोने के बीच मौजूद तीन बॉक्स में बदलाव किया जा सकता है. ये flex: auto का इस्तेमाल करके फ़्लेक्स लेआउट में मौजूद बॉक्स की तरह काम करते हैं. इसलिए, ये जगह भरने के लिए फैलते हैं. हालांकि, अगर आपने किसी एक बॉक्स में टेक्स्ट की लंबी स्ट्रिंग डाली है और बाकी बॉक्स में कुछ नहीं डाला है, तो टेक्स्ट वाला बॉक्स टेक्स्ट को रैप करने के बजाय बड़ा हो जाएगा.
मार्जिन बॉक्स में कॉन्टेंट जोड़ना
मार्जिन बॉक्स में कॉन्टेंट जोड़ने के लिए, सीएसएस जनरेट किए गए कॉन्टेंट का इस्तेमाल करें. ठीक वैसे ही जैसे ::before और ::after छद्म-तत्वों के साथ किया जाता है. इस मामले में, उस बॉक्स से जुड़ा ऐट-रूल इस्तेमाल करें जिसे आपको टारगेट करना है. नीचे दी गई सीएसएस, "मेरी किताब" टेक्स्ट को बाएं मार्जिन बॉक्स या दाईं ओर के पेजों में जोड़ती है. यह उस टेक्स्ट को स्टाइल भी करता है.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
टेक्स्ट की स्ट्रिंग के साथ-साथ, मार्जिन में पेज काउंटर भी जोड़े जा सकते हैं. पहले से तय किए गए page काउंटर में मौजूदा पेज शामिल है. नीचे दी गई सीएसएस, इसे दाईं ओर के पेजों के सबसे नीचे दाईं ओर और बाईं ओर के पेजों के सबसे नीचे बाईं ओर जोड़ती है.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
इसमें एक pages काउंटर भी होता है, जिसमें हमेशा पेजों की कुल संख्या दिखती है.
पेज मार्जिन का इस्तेमाल करते समय ध्यान रखने वाली बातें
अगर ब्राउज़र से प्रिंट किया जा रहा है, तो ब्राउज़र अपने-आप कुछ पेज मार्जिन कॉन्टेंट जोड़ देगा. हालांकि, ऐसा तब होगा, जब उसे दिखाने के लिए जगह होगी. अगर आपने कॉन्टेंट जोड़ा है, तब भी ऐसा होगा. अपने-आप जनरेट होने वाले इन हेडर और फ़ुटर को प्रिंट डायलॉग में जाकर बंद किया जा सकता है.
अगर आपने किसी पेज पर मार्जिन को 0 पर सेट किया है या इतनी कम वैल्यू पर सेट किया है कि ब्राउज़र के हेडर और फ़ुटर के लिए कोई जगह नहीं है, तो वे नहीं दिखेंगे.
Chromium में डिफ़ॉल्ट पेज लेआउट के कॉन्सेप्ट की वजह से, अगर प्रिंट किए गए दस्तावेज़ के पहले पेज पर अपने-आप जनरेट होने वाले कॉन्टेंट के लिए जगह नहीं है, तो ब्राउज़र का कॉन्टेंट बाद के पेजों पर नहीं दिखेगा. भले ही, उन पेजों पर जगह हो.
पेज वाले मीडिया के लिए आने वाले समय में उपलब्ध होने वाली सुविधाएं
पेज वाले मीडिया के स्पेसिफ़िकेशन में कई अन्य सुविधाएं शामिल हैं. इनके बारे में सीएसएस की मदद से प्रिंट के लिए डिज़ाइन करना लेख में बताया गया है. अगर आपको इनमें से किसी सुविधा का इस्तेमाल करना है, तो उसे लिंक किए गए बग में जोड़ें.
स्ट्रिंग सेट करना
किताबों में अक्सर मार्जिन में मौजूदा चैप्टर का टाइटल प्रिंट किया जाता है. इस टाइटल को आपकी सीएसएस में हार्डकोड नहीं किया जा सकता, क्योंकि किताब के अलग-अलग हिस्सों में जाने पर यह बदलता रहता है. string-set प्रॉपर्टी की मदद से, एचटीएमएल से कोई वैल्यू सेट की जा सकती है. इसके बाद, इस वैल्यू का इस्तेमाल जनरेट किए गए कॉन्टेंट में किया जा सकता है. इस सीएसएस में यह माना गया है कि चैप्टर के टाइटल को <h1> के तौर पर मार्क अप किया गया है. यह हर <h1> के कॉन्टेंट को लेता है और इसका इस्तेमाल, दाईं ओर के पेजों पर सबसे ऊपर दाईं ओर मौजूद मार्जिन में करता है. अगले <h1> पर पहुंचने के बाद, उस पॉइंट से आगे के मार्जिन के लिए वैल्यू अपडेट हो जाती है.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
string-set और string() के लिए Chromium बग.
क्रॉस-रेफ़रंस
किसी दस्तावेज़ को प्रिंट करने के बाद, आम तौर पर अन्य पेजों के रेफ़रंस को उस पेज नंबर का इस्तेमाल करके दिखाया जाता है जहां रेफ़रंस मिल सकता है. इन क्रॉस-रेफ़रंस को target-counter का इस्तेमाल करके बनाया जा सकता है. किसी लिंक पर लागू होने पर, यह लिंक वेब पर मौजूद रेफ़रंस पर जाने के लिए काम करता है. पेज को प्रिंट करने पर, पेज नंबर दिखता है.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
क्रॉस-रेफ़रंस के लिए Chromium बग.
फ़ुटनोट
फ़ुटनोट, पेज वाले मीडिया स्पेसिफ़िकेशन की एक सुविधा भी है. एचटीएमएल में, फ़ुटनोट के तौर पर इस्तेमाल किए जाने वाले टेक्स्ट की पहचान करने के लिए, क्लास का इस्तेमाल करें. उदाहरण के लिए:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
इसके बाद, इस टेक्स्ट को फ़ुटनोट में बदलने के लिए, float की footnote वैल्यू का इस्तेमाल करें. दस्तावेज़ प्रिंट होने पर, इसे पैराग्राफ़ से हटा दिया जाएगा और फ़ुटनोट के तौर पर दिखाया जाएगा.
.fn {
float: footnote;
}