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

Question

Lors de l'écriture d'une feuille de style d'impression, existe-t-il un moyen de garantir qu'une image soit toujours présente 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 finissent par se retrouver en bas de la page et se divisent. Un exemple du comportement que je constate est le suivant :

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 entière   | |
       | |                | |
       | |________________| |
       |         …          |

Toutes ces fois où je me suis plaint des flottants en LaTeX, et me voici à demander la même fonctionnalité... Est-ce possible ? Je ne suis pas nécessairement préoccupé par le fonctionnement 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 souviens 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 une sorte de conteneur et appliquer les règles à celui-ci (qu'il soit dans un paragraphe, div, span, liste, etc...).

Une discussion utile ici : "Quels sont les propriétés CSS les plus utiles spécifiques à media="print", compatibles avec différents 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 juste utiliser InDesign.