Usando CSS para formatar documentos para impressão

Usando CSS para formatar documentos para impressão

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:





Heading

Usamos marcação semântica:






Isso não é apenas muito mais limpo, mas também significa que nossa apresentação está separada de nosso conteúdo. Renderização de navegadores h1 elementos 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:


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






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:


Neste exemplo, o print.css a folha de estilo 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

telefone encontrado, posso usá-lo?

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 tem valores que incluem Nenhum e personalizadas 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. o @página regra permite que as margens sejam definidas, e deve ser usado 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.

como reduzir o tamanho de um jpg

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 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]: depois visa especificamente a posição após ( :depois de ) cada elemento de link ( para ) que realmente tem um URL ( [href] ) o contente declaração aqui insere o valor do href atributo 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 após 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. De forma similar:

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 h1 de sua página com h2, já que 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:

como obter a capa do álbum no itunes
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 pelo Ferramentas de desenvolvimento opção:

No novo painel que aparece, selecione Cardápio , então Mais ferramentas , seguido pela Renderização :

Em seguida, role para baixo até o Emular tipo de mídia CSS configuração. A lista suspensa 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 padrão Navegador de estilos está disponível para inspecionar e modificar as regras de estilo dinâmico. 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 o @página regra não pode ser emulada.

Impressão 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, 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 anexo ou impresso.

Você pode usar uma folha de estilo de impressão para criar documentos de qualidade, incluindo qualquer coisa, desde seu currículo a receitas ou anúncios de eventos. As páginas da Web normalmente 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.

Compartilhado Compartilhado Tweet O email Como imprimir páginas da Web em PDF com o Microsoft Edge

Você já encontrou um artigo interessante que gostaria de guardar para mais tarde? Bem, você pode salvar como PDF com o Edge em três etapas fáceis.

Leia a seguir
Tópicos relacionados
  • Programação
  • Impressão
  • CSS
Sobre o autor Bobby Jack(58 artigos publicados)

Bobby é um entusiasta da tecnologia que trabalhou como desenvolvedor de software por quase duas décadas. Ele é apaixonado por jogos, trabalha como Editor de Críticas na Switch Player Magazine e está imerso em todos os aspectos da publicação online e desenvolvimento web.

Mais de Bobby Jack

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever