पब्लिश करने की तारीख: 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;
}