सीएसएस प्रिंट लेआउट - एकल पृष्ठ पर प्रिंटिंग

Question

मैं बुरी तरह अटक गया हूं और एसओ अभिलेखागार मेरी मदद नहीं कर रहे हैं। शायद मैं गलत जगह पर देख रहा हूँ। यहां छोटी कहानी दी गई है:

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

HTML पृष्ठ की संरचना निम्नानुसार है। इस जानकारी में से कुछ को अनुकूलित करने के लिए मैंने कुछ ऑनलाइन सीएसएस में गिरा दिया।

<div class="container"> 
    <div class="row"> 
    <div class="span16"> 

     <style type="text/css" media="all"> 
     @media print { 
      html, body { 
      margin: 0; 
      padding: 0; 
      background: #FFF; 
      font-size: 9.5pt; 
      } 
      .container, .container div { 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      } 
      .template { overflow: hidden; } 
      img { width: 100%; } 
     } 
     </style> 

     <div class="template_holder"> 
     <div class="template"> 
      <img src="some_big_image"> 
      <div> 
      [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE] 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

मुझे लगता है यह कुछ हद तक खराब फार्म इन-लाइन सीएसएस को यहां शामिल करने, लेकिन यह है कि विभिन्न कारणों के लिए यह पहले आया था अन्य सीएसएस का एक समूह ओवरराइड करने के लिए है। मैं इसे वापस खींच सकता हूं, लेकिन इसका सारांश यह है। जब मैं प्रिंट करता हूं, मुझे कुछ ऐसा लगता है जो सही दिखता है, साथ ही एक अतिरिक्त दूसरा पृष्ठ भी मिलता है। जब मैं छवि को कम करता हूं, सब कुछ ठीक है, लेकिन मुझे DIV भरने के लिए छवि की आवश्यकता है।

मैंने सोचा कि सेटिंग चौड़ाई 100% थी, लेकिन मैंने यह सुनिश्चित किया कि छवि पहलू अनुपात पृष्ठ से छोटा था (यहां तक ​​कि किसी भी मार्जिन के साथ)। असल में, पूर्ण चौड़ाई वाली छवि को पेज ब्रेक नहीं होना चाहिए। मैं गलत क्या कर रहा हूँ & मुझे बदलने की क्या ज़रूरत है? किसी भी मदद की सराहना की जाती है ...

Answer 1

मुझे लगता है कि सीएसएस के इस विवरण के साथ निराशा यह है कि उत्तर को अपने स्वयं के प्रोजेक्ट के अनुरूप बनाया जाना है। @blahdiblah और अन्य सुझावों के लिए धन्यवाद। समाधानों के मिश्रण ने निकट-परिपूर्ण परिणामों को जन्म दिया, हालांकि निश्चित रूप से आईई मुझे अभी भी समस्याएं देता है ...

इसे सभी पैडिंग/मार्जिन शैलियों के हार्ड रीसेट के साथ करना था और फिर !important पैडिंग, चौड़ाई के लिए मार्कर , ऊंचाई, आदि। असल में मैंने पृष्ठ को ऊंचाई के साथ भर दिया और फिर 100% विस्तृत वस्तुओं में गिरा दिया। नतीजा 8.5x11 पेज पर अधिकतम कवरेज है जिसमें शून्य स्पिलोवर दूसरे पृष्ठ पर है।

@media print { 
    * { margin: 0 !important; padding: 0 !important; } 
    #controls, .footer, .footerarea{ display: none; } 
    html, body { 
    /*changing width to 100% causes huge overflow and wrap*/ 
    height:100%; 
    overflow: hidden; 
    background: #FFF; 
    font-size: 9.5pt; 
    } 

    .template { width: auto; left:0; top:0; } 
    img { width:100%; } 
    li { margin: 0 0 10px 20px !important;} 
} 

Answer 2

ऐसा लगता है जैसे आपकी छवि बहुत बड़ी है। चूंकि छवि कस्टम आकार की है, क्यों

img { height: 100%; } 

बजाय

width सेट नहीं? यह कम से कम सुनिश्चित करेगा कि यह एक दूसरे पृष्ठ पर नहीं फैल गया।

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