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

Question

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

इसका जीता जागता उदाहरण देखें !

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;
  }
}

<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>

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

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

Comments

टेम्पलेट के लिए धन्यवाद, यह बहुत बढ़िया है।

— vektor

सही उत्तर यहाँ है: stackoverflow.com/a/34018790/293856

— unom

की संभावित डुप्लिकेट: stackoverflow.com/questions/3341485/…

— मार्क बोल्डर

इस बारे में बग रिपोर्ट

— यूजेन कोनकोव

Answer 1

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

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

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

डेमो

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

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

Comments

आप तत्व के लिए 256mm(और इस प्रकार 237mm, अंततः) कैसे पहुंचे .subpage?

— caw

@MarcoW। मेरा मानना 256mmहै कि पृष्ठ की पैडिंग के बिना ओपी का ए 4 पेपर ऊंचाई से थोड़ा नीचे है: 297mm - 2*20mm... शायद 257mmथोड़ा अधिक अविश्वसनीय हो;; और मेरे पिछले उदाहरण 237mmमें ~2cm"बहुत लंबा" सामग्री के लिए जिम्मेदार ... लेकिन केवल सतही हल समस्या। वास्तविक समाधान के लिए ऊपर मेरा अद्यतन उत्तर देखें।

— मार्टिन तुरजक

अरे @MartinTurjak, मैंने किसी के दिलचस्पी के मामले में आपके फिडेल को यूएस लेटर संस्करण में बदल दिया। jsfiddle.net/2wk6Q/2957 चीयर्स!

— बेन

मैं एक पृष्ठ को प्रिंट करने में 4 फ़ील्ड लगा रहा हूँ कि सभी फ़ील्ड के बराबर आकार को कैसे विभाजित किया जाए .. pxl में प्रिंट पेज का आकार क्या है

— विक्रम

@ ब्रैड: मेरे लिए काम नहीं किया। अभी भी प्रत्येक पृष्ठ के बीच में एक खाली पृष्ठ बना रहे हैं।

— सेबेस्टियन फरहम

Answer 2

सीएसएस

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>

डेमो

Comments

साइड नोट: <page>एक मान्य कस्टम HTML तत्व नाम नहीं है

— मार्टिन श्नाइडर

काम करने लगता है। लेकिन box-shadow: 0;काम नहीं करता है (कम से कम क्रोम में), यह होना चाहिए box-shadow: none;। दो मार्जिन घोषणाओं को भी संयुक्त किया जा सकता है margin: 0 auto 0.5cm;।

— mts kn

Answer 3

https://github.com/cognitom/paper-css मेरी सभी जरूरतों को हल करने के लिए लगता है।

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

फ्रंट-एंड प्रिंटिंग सॉल्यूशन - पूर्वावलोकन योग्य और लाइव-रीलोडेबल!