开发者

Print styles: How to ensure image doesn't span a page break

When writing a print stylesheet, is there a way to ensure that an image is always only on a single page, instead of spanning multiple pages. The images much sm开发者_开发问答aller than the page, but based on the document flow, they end up at the bottom of the page and get split. An example of the behavior I'm seeing is below:

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

What I'd like

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

All those times I complained about floats in LaTeX, and here I am asking for the same functionality... Can this be done? I'm not necessarily concerned about it working in all browsers, since this is often just a one-off document I'm writing to be turned into a PDF.


The only means I can think of is to use one (or potentially more) of the following css rules:

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

I half-recall that these declarations only apply to block-level elements (so you'd also have to define display: block; on your image, or use some kind of wrapping container and apply the rules to that (whether it's in a paragraph, div, span, list, etc...).

Some useful discussion here: "What are most usefule media="print" specific, cross-browser compatible CSS properties?"

References:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜