2013-01-08 20 views
8

में सटीक माप प्रिंट करें जब माप तत्व के लिए सेमी या इंच में निर्दिष्ट होते हैं, तो यह फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर से बिल्कुल उस आकार पर मुद्रित होता है। दूसरी तरफ क्रोम तत्वों को बड़ा बनाता है।क्रोम

क्या क्रोम प्रिंट चीजों को बिल्कुल निर्दिष्ट आकार में बनाने के लिए वैसे भी है, या क्या ऐसा कुछ है जिसके साथ मुझे बस रहना होगा?

उदा।

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     div.box { 
      border: 1px solid black; 
      width: 5cm; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box">box</div> 
    </body> 
</html> 

ऊपर कोड दोनों Firefox और IE में एक सटीक 5 सेमी (अपने प्रिंटर पर) प्रिंट, लेकिन 5.5 सेमी के बारे में क्रोम से कम से प्रिंट।

+0

संभावित डुप्लिकेट [वेब पेज प्रिंट करते समय सीएसएस में फ़िशस्कूल आकार निर्दिष्ट करना (उदाहरण के लिए 2 इंच)] (http://stackoverflow.com/questions/13895041/specifying-phyiscal-size-in-css-eg-2- इंच-जब-प्रिंटिंग-ए-वेब-पेज) –

+0

@ जुक्काका। कोर्पेला पूरी तरह से अलग मुद्दा। उस सवाल की समस्या मार्जिन और पैडिंग थी। यह यहां प्रासंगिक नहीं है। –

+0

@ जुक्काका। कोर्पेला: दूसरे प्रश्न पर आपका उत्तर व्यक्ति की समस्या नहीं था। इसके अलावा, प्रिंटर को गलत होने के कारण शायद आपका प्रिंटर 15 सेमी नहीं था। यह एक ब्राउज़र-विशिष्ट मुद्दा है। मुझे फ़ायरफ़ॉक्स/आईई के साथ समस्या नहीं है, लेकिन मैं क्रोम के साथ हूं। मतदान बंद करने से पहले कृपया ठीक से पढ़ें और समझें। –

उत्तर

1

क्रोम के लिए, बस कुछ करने के लिए प्रिंट मार्जिन सेट , और शरीर को पेपर की चौड़ाई में सेट करें, मार्जिन घटाएं।

उदा। एक A4 पृष्ठ के लिए, चौड़ाई 1 इंच मार्जिन के लिए (लगभग 2.5 सेमी) 210 मिमी

तो है आप निम्नलिखित

@media print 
{ 
    @page 
    { 
     margin-left: 25mm; 
     margin-right: 25mm; 
    } 

    body 
    { 
     width: 160mm; 
    } 
} 

बाईं, सही है, और शरीर की चौड़ाई तक 210 मिमी में जोड़ना चाहिए क्या कर सकते हैं ।

पत्र के लिए आप 1 इंच मार्जिन और शरीर पर 6.5 इंच की चौड़ाई का उपयोग करेंगे।

+0

यह ए 4 पेपर का उपयोग करके मेरे लिए काम करता है। – Prinsig

0

मैंने पुष्टि की कि आपके एचटीएमएल का उपयोग करते समय मुझे एक ही समस्या थी, यहां तक ​​कि कुछ सीएसएस नियमों को निर्दिष्ट करने की कोशिश करते समय भी पैडिंग और मार्जिन जैसे स्पष्ट संदिग्धों से छुटकारा पाने के लिए। मैंने जो शोध किया है, उससे ऐसा लगता है कि आप मीडिया प्रश्नों को प्रस्तुत करते समय असंगत ब्राउज़र मानकों से निपट रहे हैं। यदि संभव हो, तो मैं ब्राउज़र पर आधारित बॉक्स को सशर्त रूप से स्टाइल करने की अनुशंसा करता हूं।

एक अन्य पहलू ऐसा लगता है कि एक डॉक्टरेट निर्दिष्ट नहीं है (जो कि विकास में नो-नो का थोड़ा सा है) असंगतता का कारण बन सकता है।

आप आगे जाना है और मुद्दे के बारे में कुछ और पढ़ने के लिए इस विषय देख सकते हैं:

Firefox versus webkit measurements for media queries based on width

+0

डक्टटाइप चीज बस इसलिए है क्योंकि यह एक स्निपेट है। आमतौर पर, मैं बाहरी स्टाइल शीट का भी उपयोग करता हूं। हालांकि इस उदाहरण के लिए कोई फर्क नहीं पड़ता। मीडिया क्वेरी भाग से कोई फर्क नहीं पड़ता, इसलिए मैंने इसे हटा दिया है और एक डॉक्टरेट जोड़ा है। काम करने के लिए कोई फर्क नहीं पड़ता है या नहीं। –

+0

लिंक किए गए स्टैक ओवरफ्लो प्रश्न विभिन्न पेज आकारों के लिए विभिन्न शैलियों का उपयोग करने के बारे में बात करते हैं, क्योंकि कुछ ब्राउज़रों में पेज आकार में स्क्रॉलबार की चौड़ाई शामिल होती है, और अन्य नहीं। जो एक पूरी तरह से अलग मुद्दा है। –

+0

जुक्का के। कोर्पेला द्वारा लिखे गए लिंक किए गए संभावित डुप्लिकेट को देखें। जैसा कि मैंने पहले कहा था, वैसे ही, ऐसा लगता है कि ब्राउज़र समान नियमों को प्रस्तुत करते समय असंगत हैं। –

2

मैं इस मुद्दे को भी मिल गया है।

कई कागज़ की बर्बाद चादरों के साथ खेलने के बाद, मुझे पता चला है कि क्रोम HTML को स्केल करने का प्रयास करता है।

उदाहरण के लिए, नीचे अपने नमूने में एक पूर्ण चौड़ाई div जोड़ें और यह सही ढंग से बॉक्स का आकार बदल देगा, क्योंकि आप क्रोम को पृष्ठ का 100% बॉक्स बनाने के लिए कह रहे हैं और इस प्रकार 1: 1 स्केल को मजबूर कर रहे हैं पृष्ठ।

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     div.box { 
      border: 1px solid black; 
      width: 5cm; 
     } 
     div.forcer { 
      width: 100%; 
      height: 1px; 
      border: 1px dotted green; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box">box</div> 
    <div class="forcer"></div> 
    </body> 
</html> 

दुर्भाग्य से, जब मैं इस की कोशिश की, यह ऊंचाई समस्या का समाधान नहीं, लेकिन यह भी मैं इसे सही स्केलिंग खोने के बिना बॉक्स 0px नहीं कर सके।

संयोग से, यह दिखाने के लिए निम्नलिखित पर एक नज़र डालें कि यह मुद्रित होने पर आकारों को कैसे प्रभावित करता है।

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     div.box { 
      border: 1px solid black; 
      width: 5cm; 
     } 
     div.forcer { 
      width: 200%; 
      height: 1px; 
      border: 1px dotted green; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box">box</div> 
    <div class="forcer"></div> 
    </body> 
</html> 

संक्षेप में: क्रोम की प्रिंटिंग क्षमताओं चौंकाने वाली हैं!

फ़ायरफ़ॉक्स मुद्रण के लिए कहीं बेहतर काम करता है, लेकिन बहुत धीमी गति से चलता है।

+2

इसके अलावा, मुझे पता चला है कि यह क्रोम में एक बग है। https://code.google.com/p/chromium/issues/detail?id=273306 – wkdmarty

3

एक 100% विस्तृत div के साथ समाधान वर्तमान क्रोम संस्करण पर मेरे लिए काम नहीं करता है, लेकिन यह, काम करता है एक A4 कागज के लिए:

html, body { 
    width: 210mm; 
}