Styles d'impression: Comment garantir que l'image ne spanne pas un saut de page

Question

Lors de l'écriture d'une feuille de style d'impression, existe-t-il un moyen de s'assurer qu'une image se trouve toujours sur une seule page, au lieu de s'étendre sur plusieurs pages ? Les images sont beaucoup plus petites que la page, mais en fonction du flux du document, elles se retrouvent en bas de la page et se séparent. Un exemple du comportement que je constate est ci-dessous :

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Haut de l'image  | |
       |____________________|
       ------saut de page------
        ____________________
Page 2 | | Reste de l'image | |
       | |________________| |
       |         …          |

Ce que je voudrais

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------saut de page------
        ____________________
Page 2 |  ________________  |
       | | Image complète  | |
       | |                | |
       | |________________| |
       |         …          |

Toutes ces fois où j'ai critiqué les flottants en LaTeX, et me voici à demander la même fonctionnalité... Est-ce possible ? Je ne suis pas nécessairement préoccupé par le fait que cela fonctionne dans tous les navigateurs, car il s'agit souvent simplement d'un document ponctuel que j'écris pour être converti en PDF.

Answer 1

Le seul moyen auquel je peux penser est d'utiliser une (ou éventuellement plusieurs) des règles css suivantes :

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' */
}

Je me rappelle vaguement que ces déclarations s'appliquent uniquement aux éléments de niveau bloc (donc vous devriez également définir display: block; sur votre image, ou utiliser un type de conteneur et appliquer les règles à cela (que ce soit dans un paragraphe, une div, un span, une liste, etc...).

Une discussion utile ici : "Quels sont les propriétés CSS les plus utiles spécifiques à media="print", compatibles entre les navigateurs ?"

Références :

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

Answer 2

Si vous générez un PDF, vous devriez probablement simplement utiliser InDesign.