दिलचस्प पोस्ट
एंड्रॉइड: लॉन्च मोड में बग = "सिंगलटास्क"? -> गतिविधि स्टैक संरक्षित नहीं है जावास्क्रिप्ट में ब्रेसेंहम एल्गोरिदम "आधुनिक" और "शेष" के बीच अंतर क्या है? मैं पायथन के itertools.groupby () का उपयोग कैसे करूं? JQuery के बिना निकटतम तत्व ढूँढना PowerShell को प्रत्येक आदेश की प्रतीक्षा करने के लिए अगले को शुरू करने से पहले कैसे बताऊँ? WPF पूर्वावलोकन ईवेंट क्या हैं? क्या स्ट्रिंग लिटरल्स कॉन्स्ट हैं? SOAP आधारित सेवाओं के बजाय एक का उपयोग क्यों करेगा? मैं एक फ़ोल्डर को कैसे हटाऊं / हटाऊं जो कि पायथन के साथ खाली नहीं है? मैं पर्ल वेब क्रॉलर में जावास्क्रिप्ट को कैसे नियंत्रित कर सकता हूं? जेडीबीसी बैच डालने के प्रदर्शन वेब एपीआई स्ट्रीम कॉन्टैन्टेंट बनाम पुशस्ट्रीम कंटेंट JQuery के तत्व के लिए कक्षा सूची प्राप्त करें Sys.stdin के लिए छोटा बफर आकार सेट करना?

ए 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 : यह मानें या नहीं, यह सही है!
  • ओपेरा : प्रिंट पूर्वावलोकन पर बहुत छोटी गाड़ी

वेब के समाधान से एकत्रित समाधान "ए 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 सभी अपनी आवश्यकताओं को हल करने के लिए लगता है

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

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