Como pode otimizar as páginas para impressão?

Para otimizar as páginas para impressão, uso @media print em CSS. Nele, escondo elementos que não são necessários na impressão (navegação, rodapés, painéis laterais), altero estilos para melhorar a legibilidade (tamanho da fonte, espaçamentos), removo imagens de fundo e sombras. Também adiciono quebras de página com break-before, break-after e controlo a orientação com @page. Posso usar classes especiais, como .no-print, para esconder rapidamente elementos.

Aqui estão alguns exemplos:

/* Esconder elementos não necessários na impressão */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Melhorar a aparência para maior legibilidade */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Texto preto para melhor contraste */
  }
  a {
    color: #000; /* Remover a cor azul dos links */
    text-decoration: none;
  }
  /* Adicionar URL dos links após o texto */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Esconder imagens de fundo */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Controlar quebras de página */
@media print {
  h2 {
    break-before: page; /* Começar uma nova página antes de cada h2 */
  }
}

/* Definir orientação da página */
@page {
  size: A4 portrait; /* Ou landscape */
  margin: 1cm; /* Definir margens */
}

Para uma personalização mais avançada ou adição de informações (como números de página, cabeçalhos e rodapés), pode-se usar a diretiva @page. Além disso, alguns estilos específicos (como position: fixed) podem comportar-se de forma imprevisível na impressão e requerer regras separadas para @media print.

É importante testar o resultado em diferentes navegadores.