Gaya cetak: Cara memastikan gambar tidak menjangkau jeda halaman

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.

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:

• page-break-after.
• page-break-before.
• page-break-inside.