Druckstile: So stellen Sie sicher, dass das Bild keinen Seitenumbruch umfasst

91

Wenn Sie ein Druck-Stylesheet schreiben, können Sie sicherstellen, dass sich ein Bild immer nur auf einer einzelnen Seite befindet, anstatt sich über mehrere Seiten zu erstrecken. Die Bilder sind viel kleiner als die Seite, aber basierend auf dem Dokumentfluss landen sie am unteren Rand der Seite und werden geteilt. Ein Beispiel für das Verhalten, das ich sehe, ist unten:

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

Was ich möchte

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

All diese Male habe ich mich über Floats in LaTeX beschwert und hier frage ich nach der gleichen Funktionalität ... Kann das gemacht werden? Ich bin nicht unbedingt besorgt darüber, dass es in allen Browsern funktioniert, da dies oft nur ein einmaliges Dokument ist, das ich schreibe, um es in ein PDF umzuwandeln.

davidtbernal
quelle
44
Upvote für die großartige Verwendung von ASCII-
Kunstdiagrammen
@ NickG Sehr einverstanden, wirklich tolles ASCII-Diagramm!

Antworten:

65

Das einzige Mittel, an das ich denken kann, ist die Verwendung einer (oder möglicherweise mehrerer) der folgenden CSS-Regeln:

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

Ich erinnere mich halb daran, dass diese Deklarationen nur für Elemente auf Blockebene gelten (Sie müssten also auch display: block;auf Ihrem Bild definieren oder eine Art Umbruchcontainer verwenden und die Regeln darauf anwenden (ob in einem Absatz, div, span) , Liste usw.)).

Einige nützliche Diskussionen hier: " Was sind die nützlichsten media="print"spezifischen, browserübergreifenden CSS-Eigenschaften? "

Verweise:

David sagt, Monica wieder einsetzen
quelle
3
Ja, das funktioniert. ( page-break-inside:avoid). Jetzt werde ich daran erinnert, warum LaTeX-Schwimmer ein Schmerz sind.
Davidtbernal
2
@notJim nur die schwimmt?
Mindwin
Die Erklärung ist sehr logisch, aber aus irgendeinem Grund funktioniert es nicht für meine HTML5-Datei mit Firefox 54. Vielleicht nur ein Fehler, da es mit Internet Explorer 11 funktioniert ...
Wolf
Seitenumbruch - CSS | MDN ist eine Seite, die diesem Fehler gewidmet ist;)
Wolf
@ Wolf Hat sich diese Seite geändert? Oder fehlt mir etwas? Warum funktioniert das in HTML5 mit FF54 nicht?
The Oddler