Styles d'impression : Comment s'assurer que l'image ne dépasse pas un saut de page

Question

Lors de la rédaction d'une feuille de style d'impression, existe-t-il un moyen de garantir qu'une image soit 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 divisent. Un exemple du comportement que je vois 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ù je me plaignais des flottants en LaTeX, et me voilà en train de 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 peut-être 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 souviens vaguement que ces déclarations s'appliquent uniquement aux éléments de niveau bloc (vous devriez donc également définir display: block; sur votre image, ou utiliser une sorte de conteneur d'enrobage et appliquer les règles à celui-ci (que ce soit dans un paragraphe, div, span, liste, etc...).

Une discussion intéressante ici : "Quels sont les propriétés CSS les plus utiles, spécifiques à media="print", compatibles avec tous 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.