कागज़ पर प्रिंट करने के लिए CSS का सारांश

 (voussoir.net)
26 पॉइंट द्वारा GN⁺ 2024-03-04 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • कंपनी में HTML का उपयोग करके कागज़/Excel पर हाथ से भरे जाने वाले फ़ॉर्मों को वेब-आधारित टूल के रूप में फिर से बनाकर उनकी जगह लेने का काम चल रहा है, इसलिए उसका यह सारांश तैयार किया गया है।
  • यह बताता है कि वेब पेज प्रिंट होने पर कैसा दिखेगा, इसे नियंत्रित करने के लिए CSS की बुनियादी बातें और कुछ टिप्स व ट्रिक्स क्या हैं।

@page

  • @page एक CSS नियम है जो ब्राउज़र को वेबसाइट की प्रिंट सेटिंग्स के बारे में बताता है।
  • @page में DOM शामिल होता है, और वेब पर <html> एलिमेंट स्क्रीन के किनारों से सीमित होता है, लेकिन प्रिंट के समय यह @page से सीमित होता है।
  • @page सेटिंग्स लगभग उन सेटिंग्स से मेल खाती हैं जो Ctrl+P दबाने पर ब्राउज़र के प्रिंट डायलॉग में मिलती हैं।

@media print

  • print media query उपलब्ध है, जिसके ज़रिए ऐसे स्टाइल लिखे जा सकते हैं जो केवल प्रिंट के समय लागू हों।
  • हेडर, विकल्प, यूज़र हेल्प टेक्स्ट आदि, जो प्रिंटआउट में नहीं दिखने चाहिए, उन पर display:none जोड़ा जाता है।

चौड़ाई, ऊँचाई, मार्जिन, पैडिंग

  • box model की समझ होना ज़रूरी है, और @page margin: 0 सेट करने का कारण यह है कि मार्जिन को DOM एलिमेंट्स में संभालना अधिक पसंद किया जाता है।
  • यह याद रखना आसान होता है कि <html> पूरा भौतिक कागज़ घेरता है और मार्जिन DOM के अंदर होते हैं।

एलिमेंट की पोज़िशनिंग

  • दस्तावेज़ डिज़ाइन करते समय एलिमेंट्स को सही जगह रखने के लिए उपयुक्त HTML/CSS का उपयोग किया जाता है।
  • किसी विशेष आकार की स्टिकर शीट के लिए आयत बनानी हो, या खास लेबल लगे कागज़ पर डेटा प्रिंट करना हो, तो absolute positioning का उपयोग भी किया जा सकता है।

कई पेज वाले दस्तावेज़ और दोहराए जाने वाले एलिमेंट

  • invoice जैसे टेबल डेटा वाले प्रिंट जनरेटर लिखते समय, अगर <table> दूसरे पेज पर चला जाता है, तो ब्राउज़र अपने-आप <thead> को हर पेज के ऊपर कॉपी कर देता है।
  • JavaScript का उपयोग करके टेबल को कई छोटी टेबलों में बाँटकर पेज बनाए जा सकते हैं।

पोर्ट्रेट/लैंडस्केप मोड

  • उपयोगकर्ता चाहे तो @page नियमों को override कर सकता है।
  • portrait और landscape मोड के लिए अलग-अलग <style> एलिमेंट बनाए जा सकते हैं और JavaScript से उनके बीच स्विच किया जा सकता है।

डेटा स्रोत

  • डेटा को पेज पर लाने के कई तरीके हैं; जैसे URL parameters में सारा डेटा पैक करना, या JavaScript से API के ज़रिए database records लाना।
  • contenteditable सेट करके उपयोगकर्ता को प्रिंट से पहले छोटे बदलाव करने की सुविधा दी जा सकती है।

GN⁺ की राय

  • यह लेख वेब डेवलपर्स के लिए प्रिंट CSS लिखने के तरीके पर एक उपयोगी गाइड देता है। खासकर उन डेवलपर्स के लिए यह मददगार होगा जो वेब पेजों को भौतिक दस्तावेज़ों में बदलने वाले काम करते हैं।
  • प्रिंट CSS अक्सर नज़रअंदाज़ किया जाने वाला विषय है, लेकिन कई कंपनियों में अब भी महत्वपूर्ण दस्तावेज़ प्रिंट करने पड़ते हैं, इसलिए यह ज्ञान मूल्यवान है।
  • लेख में दिए गए तकनीकी दृष्टिकोण वास्तविक कार्यस्थलों में परखे और सत्यापित लगते हैं, और ये वास्तविक समस्याओं को हल करने के लिए व्यावहारिक समाधान देते हैं।
  • CSS @page नियम और @media print query का उपयोग वेब पेज प्रिंट करते समय कागज़ के आकार और मार्जिन को नियंत्रित करने के लिए महत्वपूर्ण है, और यह ऐसी बात है जिसे वेब डेवलपर्स को ज़रूर जानना चाहिए।
  • यह लेख प्रिंट CSS की बुनियादी समझ से आगे जाकर यह भी दिखाता है कि इसे व्यवहार में कैसे लागू किया जाता है, और ठोस उदाहरणों व टिप्स के माध्यम से सिद्धांत और व्यवहार के बीच की दूरी कम करने में मदद करता है।

संबंधित पढ़ाई

2 टिप्पणियां

 
cosine20 2024-03-11

अगली बार इस पर एक toy project करके देखना चाहूंगा।
 
GN⁺ 2024-03-04
Hacker News टिप्पणियाँ

  • व्यक्तिगत वेबसाइट पर पसंदीदा print styles के बारे में विवरण:

    • सेक्शन हेडर पेज के निचले हिस्से में प्रिंट न हों, ताकि अगले पेज के ऊपर सामग्री बिना हेडर के न रह जाए।
    • ग्राफ़िक्स और चार्ट पेज से बाहर न जाएँ और पूरे पेज पर सही तरह से प्रिंट हों।
    • हाइपरलिंक के URL भी प्रिंट किए जाएँ, ताकि लिंक सिर्फ़ underlined text बनकर न रह जाएँ.

  • Pagedjs.org का उपयोग करके किताब संपादित करने का अनुभव:

    • preview में कुछ bugs थे, लेकिन अंतिम output एकदम सही था, और InDesign इस्तेमाल करने की तुलना में समय एक-चौथाई रह गया।
    • अगर HTML/CSS और InDesign दोनों में सहज हैं, तो लंबे लेआउट के लिए Pagedjs बेहतर विकल्प है।

  • प्रिंट CSS के लिए browser support की समस्याएँ:

    • CSS में हर पेज पर footnotes जोड़ने जैसी कुछ सुविधाओं के लिए समान क्षमता नहीं है।
    • custom CSS properties के साथ प्रयोग करने और इन कमियों को भर सकने वाले आसान HTML layout engine के बारे में सवाल।

  • CSS का उपयोग करके प्रिंट तैयार करने की आसानी:

    • किसी भी app में HTML+CSS output करके साफ़-सुथरे और सुंदर प्रिंट दस्तावेज़ आसानी से तैयार किए जा सकते हैं।
    • PostScript या TeX सीखने की तुलना में CSS typography कुछ ही मिनटों में लिखना आसान है।

  • प्रिंट के लिए browser support इतना खराब है कि native app बनानी पड़ती है:

    • अभी PDF डाउनलोड करके प्रिंट करना पड़ता है।
    • Chrome/Blink, Safari/Webkit, Firefox/Mozilla developers से कम से कम hacks के काम करने लायक support देने की अपील।

  • CSS के इतिहास और मौजूदा स्थिति पर विचार:

    • CSS की शुरुआत प्रिंट media को ध्यान में रखकर हुई थी, लेकिन browser support पीछे रह गया।

  • HTML & CSS का उपयोग करके invoices और कुछ ebooks बनाने का तरीका:

    • print-css.rocks और Weasyprint के उपयोग का परिचय।

  • browser के जरिए PDF बनाने के लिए इस्तेमाल किए गए paper-css का उल्लेख।

  • HTML/CSS का उपयोग करके प्रिंट सामग्री बनाने के फ़ायदे:

    • प्रिंट सामग्री तैयार करने के लिए ज़रूरी सब कुछ HTML/CSS से किया जाता है।

  • CSS skills का उपयोग करके social network profiles को प्रिंट फ़ॉर्मैट में उपलब्ध कराने का अनुभव:

    • फैक्टरी workers के लिए बने social network में profiles प्रिंट करने की सुविधा दी गई।
    • workshops और course certificates बनाने वाला online editor बनाने का अनुभव भी साझा किया गया।