Guía de estilos para @media print

Estos días me ha tocado trabajar modificando una página para hacerla imprimible aunque «no se vea de la mejor manera» y pues se me ocurrió hacer esta guía para ayudarles en el camino un poco más, recuerden, todo debe ir dentro del @media print por ejemplo:

@media print {
   /** mis clases, css y todo lo que quiera */
   @page {  }
}

Casi siempre vamos a empezar definiendo la configuración «por página», utilizando la propiedad @page en CSS, podemos asignar propiedades como dimensiones de página, márgenes, colores de fondo y más. También es posible personalizar páginas específicas como la primer página o las impares.

Puedes optar por tamaños estándar de página (en el caso de inglés, puedes definir el size usando la palabra, por ejemplo si quieres tamaño carta, solo pones size: letter y eso debería evitar que pongas reglas de tamaño en pulgadas o milímetros):

• A5 (148mm x 210mm)
• A4 (210mm x 297mm) – tamaño predeterminado
• A3 (297mm x 420mm)
• B3 (353mm x 500mm)
• B4 (250mm x 353mm)
• JIS-B4 (257mm x 364mm)
• carta (8.5in x 11in)
• legal (8.5in x 14in)
• tabloide (11in x 17in)

También es válido definir tamaños personalizados como este:

@media print {
  @page {
    size: 8.5in 11in;
  }
}

Para establecer la orientación de página, usa el atributo orientation:

• portrait – orientación vertical (valor por defecto)
• landscape – orientación horizontal

@media print {
  @page {
    size: A4 landscape;
  }
}

Los márgenes se definen mediante la propiedad margin, así como sus variantes margin-top, margin-bottom, margin-left y margin-right. Pueden expresarse en unidades relativas (como em, rem, vw, vh) o absolutas (px, mm, cm, in, pt, pc). Para documentos con medidas fijas, como PDFs, se recomienda usar unidades absolutas.

Ejemplo básico:

@media print {
  @page {
    margin: 1in; /* margen de 1 pulgada en todos los lados */
  }

  @page {
    margin-top: 0.5in;
    margin-bottom: 0.75in;
    margin-left: 1.25in;
    margin-right: 1in;
  }
}

Para diferenciar los márgenes en páginas pares e impares en impresiones a doble cara, puedes emplear los pseudoelementos :left y :right:

@media print {
  @page :left {
    margin-left: 1.5in;
    margin-right: 0.5in;
  }

  @page :right {
    margin-left: 0.5in;
    margin-right: 1.5in;
  }
}

Cuando el contenido supera el espacio disponible en una página, el navegador lo divide automáticamente. Sin embargo, a veces se necesita controlar dónde se producen estos cortes. Las propiedades page-break-before, page-break-after y page-break-inside permiten hacerlo.

Valores comunes:

• auto – comportamiento predeterminado
• always – siempre inicia una nueva página
• avoid – intenta evitar el salto de página
• left, right – fuerza el salto hacia la siguiente página par o impar
• recto, verso – comienza en página impar (recto) o par (verso)

Ejemplo para iniciar secciones nuevas en una página diferente:

@media print {
  h1 {
    page-break-before: always;
  }

  section {
    page-break-after: always;
  }
}

Para evitar que tablas u otros elementos se dividan entre páginas:

@media print {
  table, figure {
    page-break-inside: avoid;
  }
}

Si la tabla no cabe en una página, se puede asegurar una presentación clara usando etiquetas HTML semánticas como <thead> y <tbody>, lo que permite al navegador repetir los encabezados al dividir la tabla entre páginas:

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Juan</td><td>45</td></tr>
    <tr><td>Miguel</td><td>40</td></tr>
    <tr><td>Alicia</td><td>29</td></tr>
  </tbody>
</table>

Algunos documentos requieren estilos distintos para ciertas páginas. En versiones anteriores de CSS, existían pseudoclases como :last y :blank, pero ya no son compatibles. Actualmente, solo @page :first sigue siendo válida y permite aplicar estilos personalizados a la primera página, útil para portadas o carátulas.

Ejemplo:

@media print {
  @page :first {
    margin: 1.5in 1in 1in 1in;
  }
}

Al imprimir un documento, los enlaces pueden no ser visibles. Para resolver esto, puedes añadir su URL al texto mediante el pseudoelemento ::after:

@media print {
  a::after {
    content: " (" attr(href) ")";
  }
}

Esto hará que los enlaces se vean como:
Texto del enlace (https://ejemplo.com)