Usando CSS para formatar documentos para impressão

Avatar de Redação
25/12/2020 às 08:10 | Atualizado há 3 anos
Outros destaques

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 maneira 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. 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:

<link href="https://www.makeuseof.com/format-web-page-for-printer/base.css" rel="stylesheet" />

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

<link href="https://www.makeuseof.com/format-web-page-for-printer/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="https://www.makeuseof.com/format-web-page-for-printer/print.css" rel="stylesheet" media="print" />

Neste exemplo, o print.css 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 de seu conteúdo:

* {
background-image: none !important;
}

Relacionado: Como definir uma imagem de fundo em CSS

Controle de Margens

Outro ponto óbvio a considerar em relação à impressão é a margem da página. Embora 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 por 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 devem ser usadas da seguinte forma:

@page {
margin: 2cm;
}

CSS também tem capacidade para 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 sua página incluir navegação em banner, anúncios ou barra lateral, você pode querer 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:

uma[href]:depois de visa especificamente a posição após (:depois de) cada elemento de link (uma) que realmente tem um URL ([href]) o conteúdo 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. 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 pelo Ferramentas de desenvolvimento opção:

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

Em seguida, role para baixo até o Emular tipo de mídia CSS configuração. 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 padrão Navegador de estilos está disponível para inspecionar e modificar as regras de estilo dinâmico. Lembre-se de que emular a saída de impressão em uma tela ainda não é 100% preciso. O navegador não sabe nada sobre o tamanho do papel, e o @página regra 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 a 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.


.

Se você gostou do artigo, nos acompanhe no Google Notícias, Facebook, Twitter e Telegram para ter acesso imediato a tudo.
Avatar de Redação
Os artigos assinados por nossa Redação, são artigos colaborativos entre redatores, colaboradores e/por nossa inteligência artificial (IA).
SUGESTÕES PARA VOCÊ