HTML पेज को प्रिंट करते समय मार्जिन
जवाबों:
आप का उपयोग करना चाहिए cmया mmआप मुद्रण के लिए निर्दिष्ट जब इकाई के रूप में। पिक्सेल का उपयोग करने से ब्राउज़र को स्क्रीन पर दिखने वाली चीज़ों के समान अनुवाद करने का कारण होगा। का उपयोग करना cmया mmकागज पर लगातार आकार सुनिश्चित करेगा।
body
{
margin: 25mm 25mm 25mm 25mm;
}फ़ॉन्ट आकार के ptलिए, प्रिंट मीडिया के लिए उपयोग करें ।
ध्यान दें कि css स्टाइल में बॉडी पर मार्जिन सेट करना प्रिंटर ड्राइवर के उस मार्जिन को एडजस्ट नहीं करेगा जो प्रिंटर के प्रिंट करने योग्य क्षेत्र को परिभाषित करता है, या ब्राउज़र द्वारा नियंत्रित मार्जिन (कुछ ब्राउज़रों पर प्रिंट पूर्वावलोकन में समायोज्य हो सकता है) ... यह बस मुद्रण योग्य क्षेत्र के अंदर दस्तावेज़ पर मार्जिन सेट करेगा।
आपको यह भी पता होना चाहिए कि IE7 ++ स्वचालित रूप से सबसे अच्छा फिट करने के लिए आकार को समायोजित करता है, और सब कुछ गलत होने का कारण बनता है भले ही आप उपयोग करें cmया mm। इस व्यवहार को ओवरराइड करने के लिए, उपयोगकर्ता को 'प्रिंट पूर्वावलोकन' का चयन करना होगा और फिर प्रिंट आकार को 100%(डिफ़ॉल्ट है Shrink To Fit) सेट करना होगा ।
मुद्रित मार्जिन पर पूर्ण नियंत्रण के लिए एक बेहतर विकल्प @pageपेपर मार्जिन सेट करने के निर्देश का उपयोग करना है , जो html बॉडी एलिमेंट के बाहर पेपर पर मार्जिन को प्रभावित करेगा, जो सामान्य रूप से ब्राउज़र द्वारा नियंत्रित होता है। Http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html देखें ।
यह वर्तमान में सफारी को छोड़कर सभी प्रमुख ब्राउज़रों में काम करता है।
इंटरनेट एक्सप्लोरर में, इस प्रिंटिंग के लिए सेटिंग्स में मार्जिन वास्तव में इस मूल्य पर सेट होता है, और यदि आप पूर्वावलोकन करते हैं, तो आप इसे डिफ़ॉल्ट रूप में प्राप्त करेंगे, लेकिन उपयोगकर्ता इसे पूर्वावलोकन में बदल सकता है।
@page
{
size: auto; /* auto is the initial value */
/* this affects the margin in the printer settings */
margin: 25mm 25mm 25mm 25mm;
}
body
{
/* this affects the margin on the content before sending to printer */
margin: 0px;
} संबंधित उत्तर: पेज से ब्राउज़र प्रिंट विकल्प (हेडर, फुटर, मार्जिन) को अक्षम करना?
सबसे पहले कहा, मैं अपने सभी उपयोगकर्ताओं को मुद्रण करते समय क्रोम का उपयोग करने के लिए मजबूर करने की कोशिश करता हूं क्योंकि अन्य ब्राउज़र अलग लेआउट बनाते हैं।
इस प्रश्न का उत्तर सुझाता है:
@page {
size: 210mm 297mm;
/* Chrome sets own margins, we change these printer settings */
margin: 27mm 16mm 27mm 16mm;
}हालाँकि, मैंने अपने सभी पृष्ठों को मुद्रित करने के लिए इस सीएसएस का उपयोग करते हुए समाप्त किया:
@media print
{
@page {
size: A4; /* DIN A4 standard, Europe */
margin:0;
}
html, body {
width: 210mm;
/* height: 297mm; */
height: 282mm;
font-size: 11px;
background: #FFF;
overflow:visible;
}
body {
padding-top:15mm;
}
}विशेष मामला: लंबा टेबल्स
जब मैं कई पृष्ठों पर एक मेज मुद्रित करने के लिए की जरूरत है, margin:0के साथ @pageखून बह रहा है किनारों के लिए अग्रणी था:
मैं इस उत्तर को इस धन्यवाद के साथ हल कर सकता हूं :
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }प्लस के लिए शीर्ष-नीचे-मार्जिन सेट करना @page:
@page {
size: auto;
margin: 20mm 0 10mm 0;
}
body {
margin:0;
padding:0;
}परिणाम:
मैं बल्कि एक ऐसे समाधान को प्राथमिकता दूंगा जो संक्षिप्त हो और सभी ब्राउज़र के साथ काम करता हो। अभी के लिए, मुझे उम्मीद है कि ऊपर दी गई जानकारी कुछ डेवलपर्स को समान मुद्दों के साथ मदद कर सकती है।
अद्यतन, सरल समाधान
@media print {
body {
display: table;
table-layout: fixed;
padding-top: 2.5cm;
padding-bottom: 2.5cm;
height: auto;
}
}पुराना हल
प्रत्येक पृष्ठ के साथ अनुभाग बनाएं, और मार्जिन, ऊंचाई और चौड़ाई को समायोजित करने के लिए नीचे दिए गए कोड का उपयोग करें।
यदि आप A4 साइज़ को प्रिंट कर रहे हैं।
फिर उपयोगकर्ता
आकार: 8.27 इंच और 11.69 इंच
@page Section1 {
size: 8.27in 11.69in;
margin: .5in .5in .5in .5in;
mso-header-margin: .5in;
mso-footer-margin: .5in;
mso-paper-source: 0;
}
div.Section1 {
page: Section1;
} फिर इसमें अपनी सभी सामग्री के साथ एक div बनाएँ।
<div class="Section1">
type your content here...
</div>class=Section1होना चाहिए class="Section1"।
मैं व्यक्तिगत रूप से माप की एक अलग इकाई का उपयोग करने का सुझाव देता हूं px। मुझे नहीं लगता कि प्रिंट के मामले में पिक्सेल की बहुत प्रासंगिकता है; आदर्श रूप से आप उपयोग करेंगे:
- बिंदु (pt)
- सेंटीमीटर (सेमी)
मुझे यकीन है कि अन्य लोग भी हैं, और प्रिंट-सीएसएस के बारे में एक उत्कृष्ट लेख यहां पाया जा सकता है: एरिक मेयर द्वारा प्रिंट करने जा रहे हैं ।
pxप्रिंट करने के लिए बहुत अधिक प्रासंगिकता नहीं है। लेकिन ब्राउज़र पिक्सेल इकाइयों का "अनुवाद" करता है, इसलिए यह स्क्रीन पर कैसा दिखता है, इसके समान है। यह पिक्सेल के रूप में "प्रिंटर रिज़ॉल्यूशन डॉट्स" का उपयोग नहीं करता है (भगवान का शुक्र है ...)।
मैं पीटी बनाम सेमी या मिमी की भी सलाह देता हूं क्योंकि यह अधिक सटीक है। इसके अलावा, मुझे Chrome में काम करने के लिए @page नहीं मिल सकता है (संस्करण 30.0.1599.69 मीटर) यह मार्जिन, बड़े या छोटे के लिए मेरे द्वारा डाली गई किसी भी चीज को अनदेखा करता है। लेकिन, आप इसे दस्तावेज़ पर बॉडी मार्जिन के साथ काम करने के लिए प्राप्त कर सकते हैं, अजीब।
यदि आप लक्ष्य पेपर आकार जानते हैं, तो आप अपनी सामग्री को उस विशिष्ट आकार के साथ एक डीआईवी में रख सकते हैं और प्रिंट मार्जिन का अनुकरण करने के लिए उस डीआईवी में एक मार्जिन जोड़ सकते हैं। दुर्भाग्य से, मुझे विश्वास नहीं है कि आपके पास प्रिंट डायलॉग बॉक्स दिखाने के अलावा प्रिंट कार्यक्षमता पर अतिरिक्त नियंत्रण है।
<body class="firefox">कर सकते हैं और अपनी सीएसएस में एक बॉडी क्लास जोड़ सकते हैंbody.firefox {margin: 0mm; padding: 0.25in;}, जो वास्तव में 0.75 इंच का मार्जिन है, क्योंकि फ़ायरफ़ॉक्स पहले से ही 0.5in जोड़ता है। यह तब तक काम करना चाहिए जब तक आपको जरूरत है> = 0.5 इंच मार्जिन।