Pertanyaan Safe Width in Pixel untuk Mencetak Halaman Web?


Berapa lebar aman dalam piksel untuk mencetak halaman web?

Halaman saya termasuk gambar besar dan saya ingin memastikan bahwa itu tidak akan dipotong saat dicetak.

Saya tahu tentang margin browser yang berbeda dan ukuran kertas Letter / DIN A4 AS. Jadi kami mendapat ukuran huruf standar dan beberapa nilai DPI standar. Tapi bisakah saya mengubahnya menjadi pixel nilai untuk ditentukan dalam gambar "width"atribut?


75
2017-11-26 11:19


asal


Jawaban:


Untuk "jawaban universal" sejati, saya tidak bisa menyediakannya. Saya dapat, bagaimanapun, memberikan jawaban yang sederhana dan pasti untuk beberapa hal khusus ...

670 PIXEL

Setidaknya ini tampaknya menjadi jawaban yang aman untuk produk Microsoft. Saya membaca banyak saran, termasuk 675, tetapi setelah menguji ini sendiri, 670 adalah apa yang saya dapatkan.

Semua DPI, masalah margin, perbedaan perangkat keras disisihkan, jawaban ini didasarkan pada fakta bahwa jika saya menggunakan pratinjau cetak di IE9 (dengan margin standar) - dan MENETAPKAN UKURAN CETAK KE 100% daripada default "menyusut agar sesuai" , semuanya cocok di halaman tanpa terpotong pada lebar ini.

Jika saya mengirim email HTML ke saya sendiri dan menerimanya dengan Windows Live Mail 2011 (apa Outlook Express menjadi) dan saya mencetak halaman pada lebar 670 - lagi semuanya cocok. Ini berlaku jika saya mengirimnya ke hard copy aktual atau file MS XPS (cetakan virtual).

Sebelum saya bereksperimen, saya menggunakan lebar sewenang-wenang 700. Dalam semua skenario yang disebutkan di atas bagian dari halaman itu semakin terputus. Ketika saya dikurangi menjadi 670, semuanya sempurna.

Adapun cara saya mengatur lebar - saya hanya menggunakan tabel html "pembungkus" primitif dan mendefinisikan lebarnya menjadi 670.

Jika Anda dapat mendikte perangkat lunak pengguna akhir, hal-hal tersebut dapat langsung. Jika Anda tidak bisa (seperti biasanya kasusnya) Anda dapat menguji hal-hal khusus seperti browser yang mereka gunakan, dll. Dan solusi hardcode untuk yang penting. Antara IE dan FF, Anda akan mencakup sekitar 90% dari pengguna web. Masukkan beberapa kode lain untuk "orang lain" yang umumnya tampak berfungsi dan menyebutnya sehari ...


76
2018-06-18 14:18



Ini tidak sesederhana seperti yang terlihat. Saya hanya mengalami pertanyaan serupa, dan inilah yang saya dapatkan: Pertama, sedikit latar belakang wikipedia.

Selanjutnya, di CSS, untuk kertas, mereka punya pt, yaitu titik, atau 1/72 inci. Jadi jika Anda ingin memiliki ukuran gambar yang sama seperti pada monitor, pertama-tama Anda harus mengetahui DPI / PPI monitor Anda (biasanya 96, seperti yang disebutkan di artikel wikipedia), lalu mengubahnya menjadi inci, lalu ubah ke poin (dibagi dengan 72).

Tapi sekali lagi, browser memiliki segala macam masalah dengan konten yang dapat dicetak, misalnya, jika Anda mencoba menggunakan tag float css, browser berbasis Gecko akan memotong halaman tengah gambar Anda, bahkan jika Anda menggunakan halaman-break-inside: hindari ; pada gambar Anda (lihat di sini, di Sistem pelacakan bug Mozilla).

Ada (banyak) lebih banyak tentang mencetak dari browser di artikel ini A List Terpisah.

Selanjutnya, Anda harus berurusan dengan lebar "Shrink to Fit" di pratinjau cetak, dan berbagai ukuran dan orientasi kertas.

Jadi baik Anda hanya mencari ukuran gambar yang bagus dalam inci, maksud saya poin, (7,1 "* 72 = 511,2 jadi width: 511pt; akan berfungsi untuk kertas berukuran letter) terlepas dari ukuran piksel, atau lebar lebar lebarnya, dan mendasarkan lebar gambar Anda pada ukuran kertas.

Semoga berhasil...


43
2017-12-11 21:24



Salah satu solusi untuk masalah yang saya temukan adalah hanya mengatur lebar dalam inci. Sejauh ini saya hanya menguji / mengonfirmasi bahwa ini berfungsi di Chrome. Ini bekerja dengan baik untuk apa yang saya gunakan untuk (untuk mencetak 8,5 x 11 lembar)

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

15
2017-11-09 22:54



Untuk mencetak, saya tidak menetapkan lebar apa pun dan menghapus semua kendala yang menjaga tata letak cetak Anda dari memiliki lebar yang dinamis. Berarti jika Anda membuat jendela browser Anda lebih kecil dan lebih kecil, tidak ada konten yang dipotong / disembunyikan tetapi dokumennya semakin panjang. Seperti ini, Anda dapat yakin bahwa sisanya akan ditangani oleh pencetak / pdf-pencipta.

Bagaimana dengan elemen dengan lebar tetap seperti gambar atau tabel?

Gambar

Pilihan yang bisa saya pikirkan:

  • skala gambar dalam CSS cetak Anda ke lebar yang dapat Anda anggap akan cocok dalam hal apapun, gunakan pt tidak px (tapi cetak akan membutuhkan lebih banyak poin / unit lagian, jadi ini seharusnya tidak menjadi masalah)
  • tidak termasuk dicetak

Meja

  • hapus lebar tetap
  • gunakan lanskap jika Anda benar-benar memiliki tabel dengan banyak informasi
  • jangan gunakan tabel untuk tujuan tata letak
  • tidak termasuk dicetak
  • ekstrak konten, cetak sebagai paragraf

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

atau hasil google lainnya untuk kombinasi: CSS, cetak, media, tata letak


8
2017-11-26 11:34



Printer tidak mengerti piksel, ia mengerti titik-titik (pt dalam CSS). Solusi terbaik adalah menulis CSS ekstra untuk dicetak, dengan semua ukurannya dalam titik-titik.

Kemudian, di kode HTML Anda, di bagian kepala, letakkan:

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

4
2017-11-26 11:55



Solusi untuk memastikan bahwa gambar tidak dipotong ketika dicetak di halaman Web adalah memiliki aturan CSS berikut:

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

4
2018-02-23 14:24



Saya ragu ada satu ... Itu tergantung pada browser, pada printer (fisik max dpi) dan driver-nya, pada ukuran kertas seperti yang Anda tunjukkan (dan saya mungkin ingin mencetak pada kertas B5 juga ...), pada pengaturan ( landscape atau portrait?), plus Anda sering dapat mengubah skala (persentase), dll.
Biarkan pengguna menyesuaikan pengaturan mereka ...


0
2017-11-26 11:32