दिलचस्प पोस्ट
कैसे कोड में jQuery परिवर्तन घटना ट्रिगर करने के लिए दाईं ओर एक <h: panelGrid> आइटम को कैसे संरेखित करें STDERR रीडायरेक्शन के लिए टाइमस्टैम्प कैसे जोड़ें क्रोम ब्राउज़र पर एनपीएपीआई छोड़ने के बाद जेज़बरा / क्यूज़ जावा कच्चे प्रिंट प्लगइन के वैकल्पिक विकल्प लचीला खोज, एकाधिक इंडेक्स बनाम एक सूचकांक और विभिन्न डेटा सेट के लिए प्रकार? परियोजनाओं के लिए App.Config परिवर्तन जो Visual Studio 2010 में वेब प्रोजेक्ट्स नहीं हैं? MySQL आउटफाइल में निर्यात: सीएसवी भागने वाले वर्ण ओवरफ्लो-एक्स: छिपकर मोबाइल ब्राउज़र में सामग्री को उगाहने से रोकती नहीं है जावा "+" का उपयोग करते हुए स्ट्रिंग कन्टेनटेनेशन कैसे करते हैं? TouchJSON, NSNull से निपटने एक्सएमएल को पंडों / डाटाफ्रेम कैसे परिवर्तित करें? Android Gradle ऑब्जेक्ट हीप के लिए पर्याप्त स्थान आरक्षित नहीं कर सका निकटतम पूर्णांक के लिए मान C # को कैसे गोल किया जाए? रुबी के डुप्ले और क्लोन पद्धतियों में क्या अंतर है? अजगर के रूप में पाइथन पासिंग सूची

ए 4 पेपर आकार सेट करने के लिए सीएसएस

मुझे वेब में ए 4 पेपर अनुकरण की आवश्यकता है और इस पृष्ठ को प्रिंट करने की अनुमति है क्योंकि यह ब्राउज़र (Chrome, विशेष रूप से) पर दिखाया गया है। मैं तत्व आकार को 21cm x 29.7cm तक सेट करता हूं, लेकिन जब मैं प्रिंट (या प्रिंट पूर्वावलोकन) भेजता हूं तो यह मेरा पृष्ठ क्लिप करता है I

यह लाइव उदाहरण देखें!

एचटीएमएल

<div class="book"> <div class="page"> <div class="subpage">Page 1/2</div> </div> <div class="page"> <div class="subpage">Page 2/2</div> </div> </div> 

सीएसएस

 body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .subpage { padding: 1cm; border: 5px red solid; height: 256mm; outline: 2cm #FFEAEA solid; } @page { size: A4; margin: 0; } @media print { .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } 

मुझे लगता है कि मैं कुछ भूल रहा हूँ लेकिन यह क्या होगा?

  • क्रोम : कतरन पेज, डबल पृष्ठ ( यह सिर्फ काम करने के लिए मुझे इसकी ज़रूरत है )
  • फ़ायरफ़ॉक्स : यह पूरी तरह से काम करता है
  • IE10 : यह मानें या नहीं, यह सही है!
  • ओपेरा : प्रिंट पूर्वावलोकन पर बहुत छोटी गाड़ी

Solutions Collecting From Web of "ए 4 पेपर आकार सेट करने के लिए सीएसएस"

मैंने इसे थोड़ा और देखा और वास्तविक समस्या print मीडिया शासन के तहत पृष्ठ की width के लिए असाइन करने के साथ लगता है। ऐसा लगता है कि क्रोम width: initial में। पेज तत्व परिणामों पर width: initial पृष्ठ सामग्री स्केलिंग में परिणाम होता है यदि कोई भी विशिष्ट लंबाई मान किसी भी मूल तत्व की width लिए परिभाषित नहीं होता है ( width: initial इस मामले में width: initial width: auto को हल करता है width: auto … लेकिन वास्तव में @page नियम के तहत परिभाषित आकार की तुलना में किसी भी मूल्य का एक ही कारण होता है)।

इसलिए न केवल सामग्री अब पेज के लिए बहुत लंबा है (लगभग 2cm ), लेकिन पेज पैडिंग प्रारंभिक 2cm से थोड़ा अधिक होगा और ऐसा (यह width: auto नीचे की सामग्री को प्रस्तुत करना है width: auto की चौड़ाई ~196mm और फिर पूरी सामग्री को 210mm की चौड़ाई तक ~196mm लेकिन अजीब तरह से समान स्केलिंग कारक 210mm से छोटे किसी भी चौड़ाई के साथ सामग्री पर लागू होता है)।

इस समस्या को ठीक करने के लिए आप बस print मीडिया नियम में ए 4 पेपर की चौड़ाई और html, body या सीधे .page को निर्दिष्ट कर सकते हैं। पेज और इस मामले में initial कीवर्ड से बचें।

डेमो

 @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } /* ... the rest of the rules ... */ } 

ऐसा लगता है कि यह सब कुछ अपने मूल सीएसएस में है और Chrome में समस्या को हल करें (विंडोज़, ओएस एक्स और उबंटू के तहत क्रोम के विभिन्न संस्करणों में परीक्षण किया गया)

सीएसएस

 body { background: rgb(204,204,204); } page[size="A4"] { background: white; width: 21cm; height: 29.7cm; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); } @media print { body, page[size="A4"] { margin: 0; box-shadow: 0; } } 

एचटीएमएल

 <page size="A4"></page> <page size="A4"></page> <page size="A4"></page> 

डेमो

https://github.com/cognitom/paper-css सभी अपनी आवश्यकताओं को हल करने के लिए लगता है

खुश मुद्रण के लिए पेपर सीएसएस

सामने के अंत मुद्रण समाधान – पूर्वावलोकन और लाइव-लोड करने योग्य!