Como estilizar seu site para impressão com CSS

O que a impressão tem a ver com a web?

A maioria de nós vive online, obtendo todas as nossas informações da web. Estamos conectados o dia todo, todos os dias, de muitos dispositivos. Você pode ter ouvido que a impressão está morta quando, na verdade, isso certamente não é verdade! Podemos não imprimir com a mesma frequência que antes, mas há situações em que a visualização de conteúdo em um dispositivo não substitui uma cópia impressa. Você tem conteúdo de instruções valioso, cupons resgatáveis, orientações, exemplos de portfólio ou qualquer outra coisa que os usuários prefiram ver impressos? Nesse caso, configurar regras de impressão personalizadas em seu site certamente ajudará a moldar a experiência de seus usuários.

Como projetar para impressão

Toda a mágica está contida no CSS, definindo estilos específicos de impressão. Você pode achar útil criar uma folha de estilo print.css separada para que ela fique separada de todos os seus outros estilos. Tenha em mente que nem todos os sites têm uma folha de estilo de impressão; este é um recurso adicional e uma etapa no processo de desenvolvimento. Se nenhum estilo de impressão for especificado, os estilos padrão serão usados ​​para impressão. Estaremos definindo estilos para tornar as coisas mais eficientes para impressão, o que substituirá quaisquer padrões.

A convenção de nomenclatura e os estilos específicos serão exclusivos da folha de estilo do seu próprio projeto, mas esses conceitos serão aplicados. Depois que o básico for adicionado, vá até a folha de estilo padrão do seu site e procure por situações únicas que precisem de estilos de impressão para garantir a melhor experiência de impressão.

Considerações sobre cores e layout

A maioria das pessoas prefere imprimir em preto e branco devido ao custo da tinta colorida. Além disso, há um contraste maior quando o texto é preto e impresso em papel branco. Você provavelmente está familiarizado com consultas de mídia, pois elas são críticas no design da Web moderno e responsivo. As consultas de mídia também são necessárias para criar estilos de impressão.

Isto é o que tornará o texto no corpo preto e eliminará qualquer cor de fundo para melhor impressão:

@media print {
body {
color: #000;
background: #fff;
}
}


Provavelmente, o texto será impresso em Times New Roman. Não há nada de errado com isso, mas e se você quiser especificar uma fonte diferente? Assim como você fez em seus estilos padrão, isso também pode ser feito na impressão. Enquanto estamos nisso, não vamos esquecer a altura da linha.
body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}


Escondendo elementos desnecessários
Você provavelmente foi condicionado a manter a display: none no mínimo, mas isso é totalmente adequado para seus estilos de impressão. Ao ocultar alguns elementos, você está oferecendo aos usuários uma maneira melhor de imprimir e mantendo qualquer coisa desnecessária da cópia impressa. O objetivo é permitir que eles imprimam efetivamente o conteúdo mais importante, não a página da web exata.
		


Existem elementos de página que não são necessários, como navegação, rodapé, barra lateral e imagens de fundo, então é aqui que nossa display: none será útil.
@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}


Os artigos geralmente são impressos, por isso é ótimo que cada artigo comece em uma página separada. É muito mais fácil para o usuário organizar suas impressões se as principais informações estiverem agrupadas e não estiverem espalhadas por várias páginas.
		


Ao adicionar isso à sua folha de estilo de impressão, os artigos sempre começarão em uma nova página:
article {
page-break-before: always;
}


Manter as listas não ordenadas juntas na mesma página também é uma ótima ideia:
ul {
page-break-inside: avoid;
}


Vamos dar um passo adiante e fazer o mesmo para títulos, imagens, citações em bloco, tabelas e outros elementos de lista:
h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}


Aqui é onde o espaçamento pode realmente ser ajustado para impressões. Não é muito frequente que você veja centímetros no design da web, mas funciona muito bem para determinar as bordas da página. A regra @page é como vamos direcionar o espaçamento. Este exemplo permitirá 2cm ao redor de todas as bordas. Esta medida pode ser personalizada para permitir mais ou menos espaço. Por exemplo, seus usuários podem querer fazer anotações e permitir uma margem maior seria útil.
		


@page {
margin: 2cm;
}


Se as páginas forem impressas e colocadas em um fichário, lembre-se de que existe a opção de ajustar as margens para cada página. A página esquerda é para as páginas 1, 3, 5… e a página direita é a página 2, 4, 6…
@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}


A personalização da primeira página é útil em certos casos. Usando a pseudoclasse :first page, o estilo da primeira página impressa pode ser determinado:
@page :first {
margin: 1cm 2cm;
}



A impressão estressa você? Aqui estão algumas dicas para imprimir seu projeto como um profissional.
		


Ideias de imagem e texto de introdução
Estes podem ou não se aplicar ao seu site, mas é bom observar mesmo assim.
Para evitar que as imagens sejam cortadas e saiam da borda da página impressa, adicionar uma declaração de largura máxima evitará isso.
img {
max-width: 100% !important;
}


Uma boa mensagem de boas-vindas é um ótimo complemento. O conteúdo de impressão estará disponível por algum tempo, por isso é sempre bom incluir uma mensagem ou lembrete amigável.
header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}


Agora que abordamos alguns dos conceitos básicos de consideração de impressão, é fácil incorporar essas ideias em sua folha de estilo de impressão. Embora a impressão não seja o que pensamos quando usamos a web, é uma ótima maneira de fornecer a seus usuários a mesma ótima experiência, não importa como eles estejam acessando o conteúdo.
		



		
		
Quer mais dicas de design? Inscreva-se no Layout!
		
Enviaremos o design mais recente e o conteúdo do WordPress diretamente para sua caixa de entrada, uma vez por semana.
		

		
		Sim por favor!