¿Cómo puede optimizar las páginas para imprimir?

Para optimizar las páginas para impresión, utilizo @media print en CSS. En ella oculto los elementos que no son necesarios al imprimir (navegación, pies de página, paneles laterales), cambio los estilos para mejorar la legibilidad (tamaño de fuente, espacios), elimino las imágenes de fondo y las sombras. También añado saltos de página mediante break-before, break-after y controlo la orientación con @page. Puedo usar clases especiales, como .no-print, para ocultar rápidamente elementos.

Aquí algunos ejemplos:

/* Ocultar elementos no necesarios al imprimir */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Mejorar la apariencia para mayor legibilidad */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Texto negro para mejor contraste */
  }
  a {
    color: #000; /* Quitar el color azul de los enlaces */
    text-decoration: none;
  }
  /* Añadir URL de enlaces después del texto */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Ocultar imágenes de fondo */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Controlar saltos de página */
@media print {
  h2 {
    break-before: page; /* Comenzar una nueva página antes de cada h2 */
  }
}

/* Definir orientación de la página */
@page {
  size: A4 portrait; /* O landscape */
  margin: 1cm; /* Establecer márgenes */
}

Para una personalización más avanzada o agregar información (como números de página, encabezados y pies de página), se puede usar la directiva @page. Además, algunas estilos específicos (como position: fixed) pueden comportarse de manera impredecible al imprimir y requerir reglas separadas para @media print.

Es importante probar el resultado en diferentes navegadores.