Usando CSS para formatar documentos para impressão

gurinho

Se você já imprimiu reservas de passagens ou rotas para um hotel da web, provavelmente não ficou nada impressionado com os resultados. Você pode, portanto, não estar ciente de que os documentos impressos podem ser estilizados da mesma forma que na tela, usando Cascading Style Sheets (CSS).

Separação de preocupações

Um dos principais benefícios do CSS é a separação do conteúdo da apresentação. Em termos mais simples, isso significa, em vez de uma marcação estilística muito antiquada, como:

 <font size="7"><b>Heading</b></font>

Usamos marcação semântica:

 <h1>Heading</h1>

Isso não é apenas muito mais limpo, mas também significa que nossa apresentação está separada de nosso conteúdo. Os navegadores renderizam os elementos h1 como texto grande e em negrito por padrão, mas podemos alterar esse estilo a qualquer momento com uma folha de estilo:

 h1 { font-weight: normal; }

Ao reunir essas declarações de estilo em um arquivo separado e fazer referência a esse arquivo em nosso documento HTML, podemos fazer um uso ainda melhor da separação. A folha de estilo pode ser reutilizada e podemos alterar esse único arquivo a qualquer momento para atualizar a formatação em cada documento que o utiliza.

Incluindo uma Folha de Estilo de Impressão

De maneira semelhante à inclusão de uma folha de estilo de tela, podemos especificar uma folha de estilo para impressão. Uma folha de estilo de tela normalmente é incluída assim:

 <link href="base.css" rel="stylesheet" />

No entanto, um atributo adicional, mídia , permite o direcionamento com base no contexto em que o documento é renderizado. Por padrão, o elemento anterior é equivalente a:

 <link href="base.css" rel="stylesheet" media="all" />

Isso significa que a folha de estilo será aplicada a qualquer meio em que o documento seja renderizado. No entanto, o atributo de mídia também pode assumir os valores de impressão e tela:

 <link href="print.css" rel="stylesheet" media="print" />

Neste exemplo, a folha de estilo print.css só será usada quando o documento for impresso. Este é um mecanismo muito útil. Podemos reunir todos os estilos comuns (talvez família de fontes ou espaçamento entre linhas) em uma folha de estilo que se aplica a todas as mídias e a formatação específica da mídia em folhas de estilo individuais. Novamente, este é outro uso da separação de interesses.

Alguns exemplos de declarações de estilo

Um fundo limpo

É quase certo que você não quer desperdiçar tinta imprimindo um fundo colorido ou uma imagem de fundo. Comece redefinindo todos os padrões para esses valores que podem ter sido definidos em seu documento:

 body {
 background: white;
 color: black;
 }

Você também pode querer evitar a impressão de imagens de fundo – elas devem ser decorativas e, portanto, não são uma parte obrigatória do seu conteúdo:

 * {
 background-image: none !important;
 }

Relacionado: Como definir uma imagem de fundo em CSS

Margens de controle

Outro ponto óbvio a considerar em relação à impressão é a margem da página. Embora o CSS forneça um meio de definir o tamanho da margem, você deve ter em mente que seu navegador e impressora também podem influenciar as próprias configurações de margem.

Por exemplo, na caixa de diálogo de impressão do Chrome, há uma configuração de margem que possui valores incluindo nenhum e personalizado que substituirá qualquer coisa especificada via CSS:

Por esse motivo, é recomendável deixar as decisões de margem para o leitor em páginas públicas da web. No entanto, para uso pessoal ou para criar um layout padrão, pode ser apropriado definir as margens de impressão via CSS. A regra @page permite que as margens sejam definidas e deve ser usada da seguinte forma:

 @page {
 margin: 2cm;
 }

CSS também tem a capacidade de layouts de impressão mais sofisticados, como variar a margem de acordo com se a página é ímpar (direita), par (esquerda) ou capa.

Infelizmente, isso é mal suportado – especialmente a opção de capa – mas pode ser usado o mínimo possível. Os estilos a seguir produzem páginas com margens inferiores ligeiramente maiores do que margens superiores e margens ligeiramente maiores na borda externa da página do que a lombada:

 @page {
 margin-left: 20mm;
 margin-right: 20mm;
 margin-top: 40mm;
 margin-bottom: 50mm;
 }
 @page :left {
 margin-left: 30mm;
 }
 @page :right {
 margin-right: 30mm;
 }

Ocultar conteúdo irrelevante

Nem todo o conteúdo será adequado para uma versão impressa do seu documento. Se a sua página inclui navegação em banner, anúncios ou barra lateral, você pode evitar que esses detalhes apareçam na versão impressa, por exemplo:

 #contents, div.ad { display: none; }

Obviamente, os hiperlinks não são relevantes no material impresso, então provavelmente você desejará remover quaisquer estilos que os diferenciem do texto ao redor:

 a { text-decoration: none; color: inherit; }

No entanto, você ainda pode querer que os leitores tenham acesso aos URLs originais, e uma solução simples é inseri-los automaticamente após o texto vinculado:

 a[href]:after {
 content: " (" attr(href) ")";
 font-size: 90%;
 color: #333;
 }

Este CSS fornece resultados como o seguinte:

a [href]: after visa especificamente a posição após ( : after ) cada elemento de link ( a ) que realmente tem uma URL ( [href] ). A declaração de conteúdo aqui insere o valor do atributo href entre colchetes. Observe que outras regras de estilo podem ser aplicadas para controlar a exibição do conteúdo gerado.

Tratamento de quebras de página

Para evitar quebras de página deixando conteúdo isolado ou quebrando-o desajeitadamente no meio, use as propriedades de quebra de página : quebra de página antes , quebra de página depois e quebra de página dentro . Por exemplo:

 table { page-break-inside: avoid; }

Isso deve ajudar a evitar que as tabelas ocupem várias páginas, desde que nenhuma seja mais alta do que uma única página. Similarmente:

 h1, h2 { page-break-before: always; }

Isso significa que esses títulos sempre iniciam uma nova página. Isso pode causar problemas se você seguir imediatamente o h1 de sua página com um h2, pois o h1 acabará em uma página por conta própria. Para evitar isso, basta cancelar a quebra de página usando um seletor que visa aquela instância específica, por exemplo:

 h1 + h2 { page-break-before: avoid; }

Visualizando Estilos de Impressão

Em todos os casos, seu navegador e sistema operacional devem fornecer um recurso de visualização de impressão, geralmente como parte da caixa de diálogo de impressão padrão.

O navegador Chrome torna mais conveniente verificar e até mesmo depurar seus estilos de impressão por meio das Ferramentas do desenvolvedor, conforme demonstrado por este exemplo que mostra um currículo com uma folha de estilo de impressão. Primeiro, abra o menu principal e selecione Mais ferramentas, seguido da opção Ferramentas do desenvolvedor :

No novo painel que aparece, selecione Menu , a seguir Mais ferramentas e , em seguida, Renderização :

Em seguida, role para baixo até a configuração Emular tipo de mídia CSS . O menu suspenso permite que você alterne entre as visualizações de impressão e tela de seu documento:

Ao emular a folha de estilo de impressão, o navegador de Estilos padrão está disponível para inspecionar e modificar as regras de estilo ao vivo. Lembre-se de que a emulação da saída de impressão em uma tela ainda não é 100% precisa. O navegador não sabe nada sobre o tamanho do papel e a regra @page não pode ser emulada.

Imprimir em PDF

Um recurso útil dos sistemas operacionais modernos é a capacidade de imprimir em um arquivo PDF. Na verdade, qualquer coisa que você possa imprimir pode, em vez disso, ser enviada para um arquivo PDF – nenhuma surpresa real, já que um arquivo PDF supostamente representa um documento impresso, afinal.

Isso torna o HTML, em combinação com uma folha de estilo de impressão, um excelente meio para criar um documento de alta qualidade que pode ser enviado como um anexo ou impresso.

Você pode usar uma folha de estilo de impressão para criar documentos de qualidade, incluindo qualquer coisa, desde o seu currículo até receitas ou anúncios de eventos. As páginas da Web geralmente têm uma aparência feia e contêm detalhes indesejados quando impressas, mas um pequeno número de ajustes de estilo pode melhorar drasticamente os resultados de impressão. Salvar os resultados finais como PDF é uma maneira rápida de criar documentos atraentes e profissionais.