ปลอดภัยกว้างเป็นพิกเซลสำหรับการพิมพ์หน้าเว็บ?

ความกว้างที่ปลอดภัยเป็นพิกเซลในการพิมพ์หน้าเว็บคือเท่าใด

หน้าของฉันมีภาพขนาดใหญ่และฉันต้องการให้แน่ใจว่าจะไม่ถูกตัดออกเมื่อพิมพ์

ฉันรู้เกี่ยวกับระยะขอบเบราว์เซอร์และขนาดกระดาษ US Letter / DIN A4 ที่แตกต่างกัน ดังนั้นเราจึงมีขนาดตัวอักษรมาตรฐานและค่า DPI เริ่มต้นบางค่า แต่ฉันสามารถแปลงค่าเหล่านี้เป็นค่าพิกเซลเพื่อระบุในwidthแอตทริบิวต์ของรูปภาพได้หรือไม่

สำหรับ "คำตอบสากล" ที่แท้จริงฉันไม่สามารถให้คำตอบได้ อย่างไรก็ตามฉันสามารถให้คำตอบที่เรียบง่ายและชัดเจนสำหรับบางเรื่อง ...

670 พิกเซล

อย่างน้อยนี่ก็เป็นคำตอบที่ปลอดภัยสำหรับผลิตภัณฑ์ของ Microsoft ฉันอ่านคำแนะนำมากมายรวมถึง 675 แต่หลังจากทดสอบตัวเองแล้ว 670 คือสิ่งที่ฉันคิดขึ้นมา

DPI ทั้งหมดปัญหาระยะขอบความแตกต่างของฮาร์ดแวร์คำตอบนี้อ้างอิงจากข้อเท็จจริงที่ว่าถ้าฉันใช้ตัวอย่างก่อนพิมพ์ใน IE9 (ที่มีระยะขอบมาตรฐาน) - และตั้งค่าขนาดการพิมพ์เป็น 100% แทนที่จะเป็นค่าเริ่มต้นของ "ย่อขนาดให้พอดี" ทุกอย่างพอดีกับหน้าโดยไม่ถูกตัดออกที่ความกว้างนี้

ถ้าฉันส่งอีเมล HTML ถึงตัวเองและรับด้วย Windows Live Mail 2011 (Outlook Express กลายเป็นอะไร) และฉันพิมพ์หน้ากว้าง 670 - อีกครั้งทุกอย่างพอดี สิ่งนี้ถือเป็นความจริงถ้าฉันส่งไปยังสำเนาจริงหรือไฟล์ MS XPS (งานพิมพ์เสมือนจริง)

ก่อนที่ฉันจะทำการทดลองฉันใช้ความกว้าง 700 โดยพลการในสถานการณ์ทั้งหมดที่กล่าวถึงข้างต้นส่วนหนึ่งของหน้าถูกตัดออก เมื่อฉันลดเหลือ 670 ทุกอย่างลงตัว

สำหรับวิธีตั้งค่าความกว้าง - ฉันเพิ่งใช้ตาราง html "wrapper" แบบดั้งเดิมและกำหนดความกว้างเป็น 670

หากคุณสามารถกำหนดซอฟต์แวร์ของผู้ใช้ปลายทางได้เรื่องดังกล่าวสามารถตรงไปตรงมาได้ หากคุณทำไม่ได้ (ตามปกติในกรณีนี้) คุณสามารถทดสอบรายการเฉพาะเช่นเบราว์เซอร์ที่ใช้อยู่เป็นต้นและฮาร์ดโค้ดโซลูชันสำหรับเบราว์เซอร์ที่สำคัญ ระหว่าง IE และ FF คุณจะครอบคลุมผู้ใช้เว็บประมาณ 90% ใส่รหัสอื่น ๆ สำหรับ“ คนอื่น ๆ ” ซึ่งโดยทั่วไปดูเหมือนจะใช้ได้ผลและเรียกว่าวัน ...

มันไม่ตรงไปตรงมาเหมือนรูปลักษณ์ ฉันเพียงแค่ใช้เป็นคำถามที่คล้ายกันและนี่คือสิ่งที่ผมได้รับ: First, พื้นหลังน้อยของวิกิพีเดีย

ถัดไปใน CSS สำหรับกระดาษพวกเขามีptซึ่งคือจุดหรือ 1/72 นิ้ว ดังนั้นหากคุณต้องการให้ภาพมีขนาดเท่ากับบนจอภาพก่อนอื่นคุณต้องรู้ DPI / PPI ของจอภาพของคุณ (โดยปกติคือ 96 ตามที่กล่าวไว้ในบทความวิกิพีเดีย) จากนั้นแปลงเป็นนิ้วจากนั้นแปลงเป็น คะแนน (หารด้วย 72)

แต่อีกครั้งเบราว์เซอร์มีปัญหาทุกประเภทเกี่ยวกับเนื้อหาที่พิมพ์ได้เช่นหากคุณพยายามใช้แท็ก float css เบราว์เซอร์ที่ใช้ Gecko จะตัดรูปภาพของคุณกลางหน้าแม้ว่าคุณจะใช้ตัวแบ่งหน้า: หลีกเลี่ยง ; บนภาพของคุณ (ดูที่นี่ในระบบติดตามข้อบกพร่องของ Mozilla )

มี (มาก) มากขึ้นเกี่ยวกับการพิมพ์จากเบราว์เซอร์ในบทความนี้ในรายการนอกเหนือ

นอกจากนี้คุณต้องจัดการความกว้าง "Shrink to Fit" ในตัวอย่างก่อนพิมพ์และขนาดกระดาษและการวางแนวต่างๆ

ดังนั้นคุณเพียงแค่หาขนาดภาพที่ดีเป็นนิ้วฉันหมายถึงจุด (7.1 "* 72 = 511.2 ดังนั้นwidth: 511pt;จะใช้ได้กับกระดาษขนาด Letter) ไม่ว่าพิกเซลจะมีขนาดเท่าใดหรือใช้ความกว้างเปอร์เซ็นต์ความกว้างและกำหนดความกว้างของรูปภาพของคุณ บนขนาดกระดาษ

โชคดี...

วิธีแก้ปัญหาอย่างหนึ่งที่ฉันพบคือกำหนดความกว้างเป็นนิ้ว จนถึงตอนนี้ฉันได้ทดสอบ / ยืนยันว่าใช้งานได้ใน Chrome เท่านั้น มันใช้งานได้ดีกับสิ่งที่ฉันใช้สำหรับ (เพื่อพิมพ์ 8.5 x 11 แผ่น)

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

สำหรับการพิมพ์ฉันไม่ได้กำหนดความกว้างและขจัดสิ่งกีดขวางใด ๆ ที่ทำให้เค้าโครงงานพิมพ์ของคุณมีความกว้างแบบไดนามิก หมายความว่าถ้าคุณทำให้หน้าต่างเบราว์เซอร์เล็กลงเรื่อย ๆ จะไม่มีการตัด / ซ่อนเนื้อหา แต่เอกสารจะยาวขึ้น ด้วยวิธีนี้คุณสามารถมั่นใจได้ว่าส่วนที่เหลือจะถูกจัดการโดยเครื่องพิมพ์ / pdf-creator

องค์ประกอบที่มีความกว้างคงที่เช่นรูปภาพหรือตารางล่ะ

รูปภาพ

ตัวเลือกที่ฉันคิดได้:

• ลดขนาดรูปภาพลงใน CSS การพิมพ์ของคุณให้มีความกว้างซึ่งคุณสามารถสันนิษฐานได้ว่าจะพอดีในทุกกรณีใช้ pt ไม่ใช่ px (แต่การพิมพ์จะต้องใช้จุด / หน่วยมากขึ้นดังนั้นสิ่งนี้จึงไม่น่าจะเป็นปัญหา)
• ไม่รวมจากการพิมพ์

ตาราง

• ลบความกว้างคงที่
• ใช้แนวนอนหากคุณมีตารางที่มีข้อมูลมากมาย
• อย่าใช้ตารางเพื่อวัตถุประสงค์ในการจัดวาง
• ไม่รวมจากการพิมพ์
• แยกเนื้อหาพิมพ์เป็นย่อหน้า

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

หรือผลการค้นหาอื่น ๆ ของ Google สำหรับการรวมกันของ: CSS, พิมพ์, สื่อ, เค้าโครง

วิธีแก้ไขเพื่อให้แน่ใจว่ารูปภาพจะไม่ถูกตัดเมื่อพิมพ์ในเว็บเพจคือต้องมีกฎ CSS ต่อไปนี้

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

เครื่องพิมพ์ไม่เข้าใจพิกเซล แต่เข้าใจจุด (pt ใน CSS) ทางออกที่ดีที่สุดคือการเขียน CSS พิเศษสำหรับการพิมพ์โดยมีหน่วยวัดทั้งหมดเป็นจุด ๆ

จากนั้นในโค้ด HTML ของคุณในส่วน head ให้ใส่:

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

ฉันสงสัยว่ามีอย่างใดอย่างหนึ่ง ... ขึ้นอยู่กับเบราว์เซอร์บนเครื่องพิมพ์ (Physical max dpi) และไดรเวอร์ขนาดกระดาษตามที่คุณชี้ (และฉันอาจต้องการพิมพ์บนกระดาษ B5 ด้วย ... ) ในการตั้งค่า ( แนวนอนหรือแนวตั้ง) นอกจากนี้คุณมักจะเปลี่ยนมาตราส่วน (เปอร์เซ็นต์) ฯลฯ
ให้ผู้ใช้ปรับแต่งการตั้งค่า ...