Firefox: Evite dividir imagens e linhas de texto ao imprimir

7

Ao imprimir a partir do Firefox (em qualquer sistema operacional, eu acho), o navegador divide imagens e às vezes até mesmo linhas de texto em quebras de página - a parte superior de uma imagem aparece na parte inferior da página n , e o resto aparece no topo da página n + 1.

Existe alguma maneira de fazer com que o Firefox mantenha imagens em páginas individuais durante a impressão?

    
por kpozin 31.07.2009 / 21:18

2 respostas

5

De CSS Discutir Incutio

TLDR: As quebras de página são mal suportadas pelos navegadores (provavelmente por um bom motivo), portanto, cabe principalmente ao designer da página lidar com isso. Para o resto, há pouco que você possa fazer, exceto copiar e colar em um documento, talvez. E o C-Net concorda.

Quebra de página

Como as "margens de impressão" não estão sob seu controle como autor da Web, não é possível garantir quanto de um documento da Web será impresso em cada página e, portanto, onde as quebras de página serão. Ele irá variar de acordo com o navegador do usuário, configurações do navegador e impressora. E o tamanho da fonte base do usuário e o tamanho do papel de carta também estão fora de seu controle. Você desejará usar o CSS para influenciar (não controlar) a posição das quebras de página. CSS2.1 Capítulo 13 Mídia Paginada é leitura essencial. Observe que, neste Capítulo, o CSS2.1 descarta alguns recursos do CSS2 que os navegadores nunca implementaram.

O suporte para as propriedades de quebra de página (como page-break-inside) é ruim, mesmo nos navegadores mais recentes, sendo a principal exceção o Opera (Opera 5 em diante) cujo suporte é muito bom :

Pior, os navegadores podem quebrar páginas em lugares claramente inaceitáveis (veja também o próximo parágrafo). Por exemplo, encontrei casos em que os navegadores quebram uma imagem nas páginas. Testes nos meus vários sites sugerem que o manuseio de quebra de página do Opera, embora não seja perfeito, é nitidamente mais robusto do que o Firefox ou o IE.

O artigo de Eric (veja abaixo) menciona um bug nos navegadores baseados no Gecko (Mozilla) sobre a impressão de elementos flutuantes. Este bug aparentemente ainda não foi corrigido [em julho de 2009] elementos flutuantes sendo cortados no final da página impressa e, às vezes, em apenas uma página de um documento sendo impresso [Nota 2]. Eu encontrei um problema similar de float-chopping com versões mais antigas do Opera (por exemplo, O7.21). Um bug diferente foi relatado no IE onde, se o topo de um elemento flutuante coincidir com uma quebra de página, o elemento flutuante não imprime nada [reconhecimento: Rennan Rieke].

Estratégia sugerida para quebras de página

A melhor política (certamente, até que os navegadores melhorem) é dar-lhes uma pausa (ha!), permitindo-lhes o máximo de discrição que você puder em sua escolha de pontos de interrupção. Eles têm problemas particulares com elementos lado-a-lado, como posicionado <div> s; flutuadores; e tabelas com duas ou mais colunas. Estratégias adequadas, portanto, incluem tornar posicionado <div> s estático; flutuadores não cobertos; e dividindo as tabelas usadas para o layout em uma série de tabelas mais curtas [Nota 1]. Mesmo que as propriedades de quebra de página sejam mal suportadas, não sobrecarregue os navegadores: use o valor "evite" com um toque tão leve quanto possível.

Os navegadores realmente não gostam de carros alegóricos quando se trata de impressão (veja a seção anterior). A solução é descompactar os elementos flutuantes (float: none e talvez width: auto também). Se você arriscar ter um elemento flutuante durante a impressão, ele poderá ser impresso em uma quebra de página (a parte superior de um elemento flutuante está ancorada na linha atual). Dependendo da natureza do material flutuante, isso pode ser um comportamento aceitável. Caso contrário, somente o Opera permitirá que você suprima essa divisão.

Se você precisar que algum conteúdo seja impresso em apenas uma página, por exemplo, Em um formulário, sua melhor chance é torná-lo significativamente menor que uma página, para que você tenha uma boa margem (sic) de erro. Com relação ao tamanho do papel de carta, você pode optar por assumir o tamanho A4 padrão internacional (para público internacional) ou o tamanho Carta US (para um público exclusivamente americano), embora não haja garantia de qual tamanho os usuários estão usando. Mas pergunte a si mesmo como você reagiria se tivesse produzido um formulário de uma página usando um processador de texto e um usuário com problemas de visão pedisse uma versão impressa grande. Como sempre com Web design e CSS, a vida será muito mais simples se você não tentar lutar com o usuário insistindo na perfeição de pixel ou em quebras de página garantidas. O design do fluido se aplica tanto no papel quanto na tela.

    
por 31.07.2009 / 21:43
2

Esse problema está me incomodando há muito tempo. Descobri que, se você clicar com o botão direito do mouse na página, vá para "Inspecionar elemento" e depois vá para "Editor de estilo" na janela de inspeção, você pode adicionar:

p {
  page-break-inside: avoid;
}

Isso geralmente faz isso. Eu vi algumas pessoas sugerindo colocar esse estilo dentro da tag 'img', mas isso não funcionou para mim em nenhuma das páginas que tentei usar.

Esta tag também é útil se você deseja separar os principais elementos de uma página. Por exemplo, quando imprimo algo fora do EBSCOhost, colocar esse estilo na tag 'body' colocará a citação em uma página, o texto em suas próprias páginas e as imagens em suas próprias páginas. É um estilo muito útil.

    
por 15.06.2017 / 20:03