Gaya cetak: Cara memastikan gambar tidak menjangkau jeda halaman


96

Saat menulis lembar gaya cetak, adakah cara untuk memastikan bahwa gambar selalu hanya di satu halaman, bukan mencakup beberapa halaman. Gambar jauh lebih kecil dari halaman, tetapi berdasarkan alur dokumen, mereka berakhir di bagian bawah halaman dan terpecah. Contoh perilaku yang saya lihat ada di bawah ini:

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

Apa yang saya suka

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | |                | |
       | |________________| |
       |         …          |

Sepanjang waktu saya mengeluh tentang float di LaTeX, dan di sini saya meminta fungsi yang sama ... Bisakah ini dilakukan? Saya tidak terlalu khawatir tentang ini berfungsi di semua browser, karena ini sering kali hanya dokumen satu kali yang saya tulis untuk diubah menjadi PDF.



@NickG Banyak setuju, diagram ASCII yang benar-benar mengagumkan!

Jawaban:


66

Satu-satunya cara yang dapat saya pikirkan adalah menggunakan satu (atau kemungkinan lebih) dari aturan css berikut:

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

Saya setengah ingat bahwa deklarasi ini hanya berlaku untuk elemen level blok (jadi Anda juga harus menentukan display: block;pada gambar Anda, atau menggunakan semacam wadah pembungkus dan menerapkan aturan untuk itu (apakah itu dalam paragraf, div, span , daftar, dll ...).

Beberapa diskusi berguna di sini: " Apa media="print"properti CSS spesifik yang paling berguna dan kompatibel lintas-browser? "

Referensi:


3
Yup, ini berhasil. ( page-break-inside:avoid). Sekarang saya teringat mengapa float LaTeX sangat merepotkan.
davidtbernal

2
@notJim hanya mengapung?
Mindwin

Penjelasannya sangat logis, tetapi untuk beberapa alasan itu tidak berfungsi untuk file HTML5 saya dengan Firefox 54. Mungkin hanya bug, karena bekerja dengan Internet Explorer 11 ...
Wolf

halaman-break-inside - CSS | MDN adalah halaman yang didedikasikan untuk kekurangan ini;)
Wolf

@ Serigala Apakah halaman itu berubah? Atau apakah saya melewatkan sesuatu? Mengapa ini tidak berfungsi di HTML5 dengan FF54?
The Oddler
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.