पब्लिश करने की तारीख: 30 अक्टूबर, 2024
Chrome 131 में, पेजों को प्रिंट करते समय उनके मार्जिन में कॉन्टेंट जोड़ने के लिए, सीएसएस का इस्तेमाल किया जा सकता है. इस पोस्ट में, पेज वाले मीडिया के लिए पेज मॉडल के बारे में बताया गया है. साथ ही, अपने वेबपेजों से प्रिंट आउट को बेहतर बनाने के लिए, इस सुविधा का इस्तेमाल करने का तरीका भी बताया गया है.
सीएसएस में, पेज वाले मीडिया, सीएसएस पेज वाले मीडिया मॉड्यूल, और पेज वाले मीडिया के लिए सीएसएस जनरेट किया गया कॉन्टेंट से जुड़ी स्पेसिफ़िकेशन शामिल होती हैं. इनसे उन सुविधाओं के बारे में पता चलता है जिनका इस्तेमाल सिर्फ़ तब किया जाता है, जब किसी पेज को प्रिंट किया जाता है. इनमें PDF में प्रिंट करना भी शामिल है. इस सीएसएस के साथ काम करने वाले उपयोगकर्ता-एजेंट मौजूद हैं. इनकी मदद से, एचटीएमएल और सीएसएस से किताबें और अन्य प्रिंट किए गए कॉन्टेंट जनरेट किए जा सकते हैं. हालांकि, वेब ब्राउज़र में इस सुविधा का कभी भी सही तरीके से इस्तेमाल नहीं किया जा सका. भले ही, हमें अक्सर ऐप्लिकेशन से PDF फ़ाइलें प्रिंट करने या बनाने की ज़रूरत पड़ती है.
Chrome और Firefox पर, @page at-rule काम करता है. इस नियम की मदद से, प्रिंट किए जा रहे पेज का साइज़ और कॉन्टेंट के चारों ओर मार्जिन का साइज़ तय किया जा सकता है. Chrome 131 में, मार्जिन में कॉन्टेंट जोड़ने के लिए, जनरेट किए गए कॉन्टेंट का इस्तेमाल भी किया जा सकता है. इसके लिए, मार्जिन के लिए सही at-rule को टारगेट करें.
पेज का मॉडल
पेज वाले मीडिया में इस्तेमाल किया जाने वाला पेज मॉडल, पेज बॉक्स तय करता है. यह पेपर की शीट होती है. पेज बॉक्स में पेज मार्जिन, पेज बॉर्डर, पेज पैडिंग, और आखिर में पेज एरिया होता है. इसमें आपका कॉन्टेंट दिखता है. कॉन्टेंट को प्रिंट करने पर, उसे ज़रूरत के हिसाब से उतने पेजों में बांटा जाता है जितने पेजों में वह कॉन्टेंट आ सकता है.
इसके बाद, पेज के मार्जिन को 16 बॉक्स में बांटा जाता है. हर बॉक्स में एक संबंधित at-rule होता है.
@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 स्यूडो-एलिमेंट के साथ किया जाता है. इस मामले में, उस बॉक्स से जुड़े at-rule का इस्तेमाल करें जिसे आपको टारगेट करना है. नीचे दी गई सीएसएस, सबसे नीचे बाईं ओर मौजूद मार्जिन बॉक्स या दाएं पेजों में "मेरी किताब" टेक्स्ट जोड़ती है. यह उस टेक्स्ट को स्टाइल भी करता है.
@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;
}