印刷スタイル:画像が改ページにまたがらないようにする方法


92

印刷スタイルシートを作成するときに、画像が複数のページにまたがるのではなく、常に1つのページだけにあるようにする方法はありますか。画像はページよりもはるかに小さくなりますが、ドキュメントフローに基づいて、最終的にページの下部に配置され、分割されます。私が見ている行動の例は以下の通りです:

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

私が欲しいもの

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

LaTeXのフロートについて不平を言ったすべての回、そしてここで同じ機能を求めています...これは可能ですか?これは多くの場合、すべてのブラウザで機能することを心配する必要はありません。これは、多くの場合、PDFに変換するために作成している1回限りのドキュメントであるためです。


45
ASCIIアートダイアグラムを活用するための賛成投票:)
NickG

@NickG非常に同意された、本当に素晴らしいASCIIダイアグラム!

回答:


65

私が考えることができる唯一の手段は、次のCSSルールの1つ(または潜在的にそれ以上)を使用することです:

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

これらの宣言はブロックレベルの要素にのみ適用されることを思い出します(したがってdisplay: block;、画像上で定義するか、ある種のラッピングコンテナーを使用し、それにルールを適用する必要があります(段落、div、spanのいずれかにあるかどうか) 、リストなど...)。

ここでの便利なディスカッション:「ブラウザ固有の最もmedia="print"互換性のあるCSSプロパティは何ですか?

参照:


3
うん、これは動作します。(page-break-inside:avoid)。さて、LaTeX floatがなぜ面倒かを思い出しました。
davidtbernal 2010

2
@notJimはフロートだけですか?
Mindwin、2016

説明は非常に論理的であるが、それは... Internet Explorerの11で動作しますので、何らかの理由では、Firefoxの54と私のHTML5ファイルたぶんただのバグのために仕事をしません
ウルフ

page-break-inside-CSS | MDNはこの欠陥に特化したページです;)
Wolf

@Wolfそのページは変更されましたか?それとも何か不足していますか?FF54を使用したHTML5でこれが機能しないのはなぜですか?
オッドラー2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.