वेब पेज प्रिंटिंग के लिए पिक्सेल में सुरक्षित चौड़ाई?

Question

वेब पेज प्रिंट करने के लिए पिक्सल में सुरक्षित चौड़ाई क्या है?

मेरे पृष्ठ में बड़ी छवियां शामिल हैं और मैं यह सुनिश्चित करना चाहता हूं कि मुद्रित होने पर वे कट नहीं जाएंगे।

मुझे विभिन्न ब्राउज़र मार्जिन और यूएस लेटर / डीआईएन ए 4 पेपर साइज के बारे में पता है। इसलिए हमें मानक अक्षर आकार और कुछ डिफ़ॉल्ट डीपीआई मान मिले। लेकिन क्या मैं छवि की विशेषता में निर्दिष्ट करने के लिए इन्हें पिक्सेल मूल्यों में बदल सकता हूं width?

Comments

पिक्सेल में चौड़ाई का उपयोग करने के बजाय, आपको उपयोग करना चाहिए width:autoजो सामग्री की चौड़ाई को कागज की चौड़ाई में समायोजित करेगा

— मार्को व्रांकोविक

Answer 1

एक सच्चे "सार्वभौमिक उत्तर" के लिए, मैं एक प्रदान नहीं कर सकता। हालाँकि, मैं कुछ विवरणों के लिए एक सरल और निश्चित उत्तर प्रदान कर सकता हूं ...

670 पिक्सल

कम से कम यह Microsoft उत्पादों के लिए एक सुरक्षित उत्तर लगता है। मैंने ६ read५ सहित कई सुझाव पढ़े, लेकिन इस ६ what० का परीक्षण करने के बाद मैं क्या कर रहा हूं।

सभी डीपीआई, मार्जिन मुद्दे, हार्डवेयर अंतर एक तरफ, यह जवाब इस तथ्य पर आधारित है कि अगर मैं IE9 में प्रिंट पूर्वावलोकन का उपयोग करता हूं (मानक मार्जिन के साथ) - और "फिट करने के लिए सिकोड़ें" के बजाय प्रिंट को 100% तक सेट करें। इस चौड़ाई में कटौती किए बिना पृष्ठ पर सब कुछ फिट बैठता है।

अगर मैं खुद को एक HTML ईमेल भेजता हूं और इसे विंडोज लाइव मेल 2011 (आउटलुक एक्सप्रेस बन गया) के साथ प्राप्त करता हूं और मैं पेज को 670 चौड़ाई पर प्रिंट करता हूं - फिर से सब कुछ फिट बैठता है। यह सच है अगर मैं इसे एक वास्तविक हार्ड कॉपी या एक एमएस एक्सपीएस फ़ाइल (वर्चुअल प्रिंटआउट) के लिए भेजता हूं।

प्रयोग करने से पहले, मैं 700 की मनमानी चौड़ाई का उपयोग कर रहा था। पेज के ऊपर वर्णित सभी परिदृश्यों में कटौती की जा रही थी। जब मैं 670 तक कम हो गया, तो सब कुछ पूरी तरह से फिट हो गया।

जैसे कि मैंने चौड़ाई कैसे निर्धारित की - मैंने सिर्फ एक आदिम "आवरण" html तालिका का उपयोग किया और परिभाषित किया कि इसकी चौड़ाई 670 है।

यदि आप अंतिम उपयोगकर्ता के सॉफ़्टवेयर को निर्धारित कर सकते हैं, तो ऐसे मामले सीधे आगे हो सकते हैं। यदि आप ऐसा नहीं कर सकते (जैसा कि आमतौर पर होता है) तो आप विशेष के लिए परीक्षण कर सकते हैं जैसे कि वे कौन से ब्राउज़र का उपयोग कर रहे हैं, आदि और महत्वपूर्ण लोगों के लिए समाधान को हार्डकोड करते हैं। IE और FF के बीच, आप लगभग 90% वेब उपयोगकर्ताओं को कवर करेंगे। "अन्य सभी" के लिए किसी अन्य कोड में रखें जो आम तौर पर काम करता है और इसे एक दिन कहता है ...

Comments

मैं केवल एक टिप्पणी जोड़ना चाहूंगा कि इस उत्तर के समय FF और IE उनके बीच उपयोग किए गए ब्राउज़रों का 90% हिस्सा ले सकते हैं (मुझे लगता है कि यह Google के साथ क्रोम की पेशकश करने वाले किसी भी व्यक्ति के बारे में संभावना नहीं है जो किसी अन्य के साथ खोजा है ब्राउज़र जो imo इस समय एक बेहतर लाइटर ब्राउज़र है) लेकिन इसकी संभावना नहीं है कि वे अभी भी ट्रेंड बदलते हैं और एक ब्राउज़र शेयर अक्सर किसी अन्य मार्केट शेयर की तरह बदलता है।

— क्रिस

यह सवाल का जवाब देता है, हालांकि यह स्पष्ट रूप से एक साधारण px आकार से अधिक जटिल है।

— rune711

Answer 2

यह उतना सीधा नहीं है जितना दिखता है। मैं बस इसी तरह के प्रश्न में भागता हूं, और यहां मुझे जो मिला है: पहला, विकिपीडिया पर एक छोटी पृष्ठभूमि ।

अगला, सीएसएस में, कागज के लिए, उनके पास pt, जो बिंदु या 1/72 इंच है। इसलिए यदि आप मॉनिटर पर उसी आकार की छवि रखना चाहते हैं, तो पहले आपको अपने मॉनिटर के DPI / PPI (आमतौर पर 96, जैसा कि विकिपीडिया लेख में उल्लेख किया गया है) को जानना होगा, फिर इसे इंच में बदल दें, फिर इसे रूपांतरित करें अंक (72 से भाग दें)।

लेकिन फिर, ब्राउज़र में प्रिंट करने योग्य सामग्री के साथ सभी प्रकार की समस्याएं हैं, उदाहरण के लिए, यदि आप फ्लोट सीएसएस टैग का उपयोग करने का प्रयास करते हैं, तो गेको-आधारित ब्राउज़र आपकी छवियों को मध्य पृष्ठ काट देंगे, भले ही आप पेज-ब्रेक-इन का उपयोग करें: से बचें ; आपकी छवियों पर ( मोज़िला बग ट्रैकिंग सिस्टम में यहां देखें )।

इस सूची में ए सूची के अलावा एक ब्राउज़र से मुद्रण के बारे में (बहुत) अधिक है ।

इसके अलावा, आपको प्रिंट पूर्वावलोकन, और विभिन्न कागज़ के आकार और अभिविन्यासों में चौड़ाई "सिकोड़ कर फिट" से निपटना होगा।

तो या तो आप केवल इंच में एक अच्छी छवि का आकार लेते हैं, मेरा मतलब है अंक, (7.1 "* 72 = 511.2 तो width: 511pt;पिक्सेल आकार की परवाह किए बिना) अक्षर आकार के कागज के लिए काम करेंगे, या चौड़ाई प्रतिशत चौड़ाई पर जाएं, और अपनी छवि चौड़ाई का आधार बनाएं कागज के आकार पर।

सौभाग्य...

Comments

मेरे पास वास्तव में एक आसान समय था बस एक PHP छवि जीडी संस्करण बनाने की सामग्री जिसे मैं प्रिंट करना चाहता था (पोस्टकार्ड, फ़्लायर्स इत्यादि), जिसे मैंने बस एक डीबी से जानकारी खिलाया था और यह उसी के अनुसार अपने आप में सुधार किया। मैंने सिर्फ पिक्सेल के अनुपात को सही रखा है। 4x6 पोस्टकार्ड (350dpi) == 2135x1435 px

— माइकल जे।

Answer 3

समस्या का एक हल जो मुझे मिला वह सिर्फ इंच में चौड़ाई निर्धारित करना था। अब तक मैंने केवल Chrome में इस कार्य की जांच / पुष्टि की है। मैंने इसके लिए जो प्रयोग किया था, उसके लिए अच्छी तरह से काम किया (8.5 x 11 शीट को प्रिंट करने के लिए)

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}

Comments

आप पेज मार्जिन को ध्यान में नहीं रख रहे हैं। या ए 4 पेपर के आकार की संभावना।

— ब्लेज़मॉन्गर

यह मेरे लिए बिल्कुल सही था, यह बहुत समझ में आता है।

— लेडोटपांग 15

@Blazemonger के साथ @media print, आप उन सेट कर सकते हैं। आप सेट कर सकते हैं size: letterया size: A4। smashingmagazine.com/2015/01/designing-for-print-with-css

— जे। 3

@ जे। कि बात नहीं थी; यह अंतिम उपयोगकर्ता है जो A4 या अक्षर पेपर का उपयोग कर सकता है, और CSS डिज़ाइनर निश्चित नहीं हो सकता है जो उपयोगकर्ता के लिए उपलब्ध है।

— ब्लेज़मॉन्गर

Answer 4

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

छवियों या तालिकाओं जैसी निश्चित चौड़ाई वाले तत्वों के बारे में क्या?

इमेजिस

विकल्प मैं सोच सकता हूँ:

• अपने प्रिंट सीएसएस में नीचे की ओर स्केल की छवियां जो आप मान सकते हैं कि किसी भी स्थिति में फिट होगी, pt नहीं px का उपयोग करें (लेकिन प्रिंट को अधिक अंक / यूनिट किसी भी तरह की आवश्यकता होगी, इसलिए यह शायद ही एक समस्या होनी चाहिए)
• छपने से बाहर करना

टेबल्स

• तय चौड़ाई को हटा दें
• परिदृश्य का उपयोग करें यदि आपके पास वास्तव में जानकारी के भार के साथ टेबल हैं
• लेआउट उद्देश्यों के लिए तालिकाओं का उपयोग न करें
• छपने से बाहर करना
• सामग्री निकालें, इसे पैराग्राफ के रूप में प्रिंट करें

http://www.intensivstation.ch/en/css/print/

या सीएसएस, प्रिंट, मीडिया, लेआउट के संयोजन के लिए कोई अन्य Google परिणाम

Comments

लेकिन छवियों और तालिकाओं जैसे निश्चित चौड़ाई वाले तत्वों के बारे में क्या?

— एंकेई

Answer 5

यह सुनिश्चित करने के लिए कि वेब पेज में मुद्रित होने पर छवियों में कटौती नहीं होती है, यह सुनिश्चित करने के लिए निम्नलिखित सीएसएस नियम है:

@media print { 
  img { 
    max-width:100% !important;
  } 
}

Answer 6

एक प्रिंटर पिक्सल को नहीं समझता है, यह डॉट्स (सीएसएस में पीटी) को समझता है। सबसे अच्छा समाधान यह है कि मुद्रण के लिए एक अतिरिक्त सीएसएस लिखना, डॉट्स में इसके सभी उपायों के साथ।

फिर, अपने HTML कोड में, हेड सेक्शन में,:

<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">

Comments

लेकिन छवियों को पिक्सेल में निर्दिष्ट चौड़ाई और ऊंचाई विशेषताओं की आवश्यकता होती है। मुझे प्रिंटर मानक डीपीआई और आयाम के आधार पर पीटी मूल्यों को पिक्सेल में बदलने की आवश्यकता है।

— एंकेई

फिर आपको छवि कंटेनरों के साथ खेलना होगा ... या परीक्षण और त्रुटि लागू करें;) हालांकि, मुझे लगता है कि दो अलग-अलग सीएसएस फ़ाइलों का उपयोग करना, एक स्क्रीन के लिए और दूसरा प्रिंट के लिए, एक अच्छा अभ्यास है।

— अर्मेसल

देना <img>टैग एक surroundig <div>div pt में एक ऊंचाई चौड़ाई हो जाता है और हो जाता है imgwidth:100%; height:100%;

— Hafenkranich

Answer 7

मुझे संदेह है कि एक ... यह ब्राउज़र पर निर्भर करता है, प्रिंटर (भौतिक अधिकतम डीपीआई) और उसके चालक पर, कागज के आकार पर जैसा कि आप बताते हैं (और मैं बी 5 पेपर पर भी प्रिंट करना चाह सकता हूं ...), सेटिंग्स पर () परिदृश्य या चित्र?), प्लस आप अक्सर पैमाने (प्रतिशत) को बदल सकते हैं, आदि
।