Estilos de impressão: como garantir que a imagem não ultrapasse uma quebra de página

92

Ao escrever uma folha de estilo de impressão, existe uma maneira de garantir que uma imagem esteja sempre em uma única página, em vez de se estender por várias páginas. As imagens são muito menores do que a página, mas com base no fluxo do documento, elas acabam na parte inferior da página e se dividem. Um exemplo do comportamento que estou vendo está abaixo:

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

O que eu gostaria

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

Todas aquelas vezes que reclamei de floats no LaTeX, e aqui estou pedindo a mesma funcionalidade ... Isso pode ser feito? Não estou necessariamente preocupado com o funcionamento em todos os navegadores, já que geralmente é apenas um documento que estou escrevendo para ser transformado em PDF.

davidtbernal
fonte
45
Voto positivo
@NickG Muito concordado, diagrama ASCII realmente incrível!

Respostas:

65

O único meio que consigo pensar é usar uma (ou potencialmente mais) das seguintes regras de css:

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

Lembro que essas declarações só se aplicam a elementos de nível de bloco (então você também teria que definir display: block;em sua imagem, ou usar algum tipo de contêiner de embalagem e aplicar as regras a isso (seja em um parágrafo, div, span , lista, etc ...).

Alguma discussão útil aqui: " Quais são as media="print"propriedades CSS específicas mais úteis e compatíveis com vários navegadores? "

Referências:

David diz reintegrar Monica
fonte
3
Sim, isso funciona. ( page-break-inside:avoid). Agora me lembro de por que os flutuadores do LaTeX são uma dor.
davidtbernal
2
@notJim apenas os carros alegóricos?
Mindwin
A explicação é muito lógica, mas por algum motivo não funciona para meu arquivo HTML5 com Firefox 54. Talvez seja apenas um bug, já que funciona com Internet Explorer 11 ...
Wolf
quebra de página dentro - CSS | MDN é uma página dedicada a esta falha;)
Wolf
@Wolf Essa página mudou? Ou eu estou esquecendo de alguma coisa? Por que isso não funciona em HTML5 com FF54?
The Oddler