← Todos los artículos

Tutoriales

Arreglar una mala impresión: una hoja @media print a medida para cualquier sitio

16 mayo 2026 · por JustZix Team

Pulsas Ctrl+P en un artículo largo y la vista previa es un desastre: la barra de navegación se come la primera página, la barra lateral se solapa con el texto, un aviso de cookies flota sobre el tercer párrafo y un fondo oscuro sólido está a punto de vaciar tu cartucho de tinta. El sitio simplemente nunca escribió una hoja de estilos de impresión. Así que escríbela tú mismo — vive en una regla CSS de JustZix y hace que «Guardar como PDF» vuelva a ser usable.

Por qué la mayoría de los sitios imprimen mal

La impresión es la parte más ignorada del desarrollo web. Los diseñadores prueban en pantallas; QA prueba en pantallas; nadie abre la vista previa de impresión. El resultado es que una enorme parte de la web no tiene ningún bloque @media print, o tiene uno escrito hace años que ya no coincide con la maquetación. El navegador entonces imprime la maquetación de pantalla tal cual — cabeceras fijas, rejillas multicolumna, temas oscuros y todo.

El arreglo es una regla CSS que solo se aplica cuando la página se imprime. Todo lo que hay dentro de @media print { ... } es invisible en pantalla y solo entra en juego para el papel y la exportación a PDF. Eso significa que puedes ser agresivo: ocultar regiones enteras, recolorear todo, forzar una sola columna — nada de ello toca la navegación normal.

Paso 1 — ocultar todo lo que no es contenido

Navegación, barras laterales, pies de página, widgets de compartir, avisos de cookies, cajas pegajosas de «suscríbete»: nada de eso pertenece al papel. Empieza ocultando los adornos obvios.

@media print {
  header, nav, aside, footer,
  .sidebar, .site-header, .site-footer,
  .cookie-banner, .newsletter, .share-bar,
  .ad, [class*="advert" i], [id*="cookie" i],
  [role="banner"], [role="navigation"],
  [aria-label*="cookie" i] {
    display: none !important;
  }
}

Si la página sigue imprimiendo basura, abre la vista previa de impresión, encuentra el bloque culpable en DevTools y añade su selector a la lista. Solo tienes que hacer esto una vez por sitio — la regla se guarda.

Paso 2 — expandir el contenido truncado

Muchos sitios recortan el texto a unas pocas líneas, ocultan el desbordamiento o ponen el artículo en una caja de scroll de altura fija. En pantalla está bien; en papel corta tu contenido. Deshaz el recorte.

@media print {
  /* Kill height limits and scroll boxes */
  main, article, .content, .post-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Undo line-clamp truncation */
  * {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* Force the article full width, drop the grid */
  body, main, article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

El overflow: visible general sobre * parece tosco, pero dentro de @media print es exactamente lo que quieres — nada debería recortarse en una impresión.

Paso 3 — controlar los saltos de página

La mayor mejora para una impresión es impedir que las cosas se partan entre páginas en mitad de un elemento. Un bloque de código dividido en dos hojas, un encabezado abandonado al final de una página, una fila de tabla rota por la mitad — todo arreglable con las propiedades de fragmentación.

@media print {
  /* Never split these across a page */
  pre, blockquote, table, figure, img,
  li, .card {
    break-inside: avoid;
  }

  /* Keep a heading with the text that follows it */
  h1, h2, h3, h4 {
    break-after: avoid;
  }

  /* Start each top-level section on a fresh page */
  .chapter, section.page {
    break-before: page;
  }
}

Las propiedades modernas son break-inside, break-before y break-after. Los nombres antiguos page-break-* aún funcionan y Chrome los mapea automáticamente, pero escribe los nuevos para las reglas nuevas.

Paso 4 — mostrar las URL de los enlaces tras los anclajes

Un enlace impreso es inútil — el lector no puede hacer clic en «haz clic aquí». Imprime la URL real junto a él usando un truco de contenido generado.

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  /* Don't print URLs for in-page anchors or javascript: links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

Esto extrae el atributo href a texto visible. Sáltatelo para los enlaces de anclaje y los enlaces de imágenes si se vuelve ruidoso — una impresión llena de URL de seguimiento largas es su propio tipo de caos.

Paso 5 — fijar los márgenes con @page

La regla @page controla la propia hoja impresa: sus márgenes y su tamaño. Los navegadores también te dejan fijar los márgenes en el diálogo de impresión, pero hornearlos en la regla significa que cada impresión de ese sitio sea consistente.

@media print {
  @page {
    margin: 18mm 16mm;
    size: A4;
  }

  /* Tighter margin on the first page if you have a title block */
  @page :first {
    margin-top: 12mm;
  }
}

Paso 6 — forzar un fondo claro para ahorrar tinta

Los sitios con tema oscuro se imprimen como un muro de tóner. Por defecto Chrome elimina los colores de fondo al imprimir (a menos que «Gráficos de fondo» esté marcado), pero el texto a menudo se queda gris claro suponiendo un fondo oscuro. Fuerza un negro-sobre-blanco limpio.

@media print {
  html, body, * {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Keep images and real photos intact */
  img, svg, video { filter: none !important; }

  /* Slightly soften secondary text so it still reads as secondary */
  .muted, .meta, time, small { color: #444 !important; }
}

Esto garantiza una salida legible y económica en tinta sin importar el tema del sitio — y combina bien con desactivar «Gráficos de fondo» en el diálogo de impresión.

Juntarlo todo en JustZix

1. Crea una regla acotada al sitio del que imprimes a menudo — por ejemplo https://docs.example.com/*.
2. Pega los seis bloques en el panel CSS, envueltos en un solo @media print (o mantén bloques separados — ambas opciones funcionan).
3. Abre la página, pulsa Ctrl+P y observa la vista previa. Itera: cualquier cosa que siga mal recibe un selector añadido.
4. Sincroniza tu clave para que la misma configuración de impresión limpia te siga a todos los dispositivos.

Como todo el conjunto está dentro de @media print, puedes dejar la regla activa de forma permanente. Está latente durante la navegación normal y solo despierta cuando imprimes o exportas un PDF.

Trampas que conviene conocer

• El conmutador de gráficos de fondo — el diálogo de impresión de Chrome tiene una casilla «Gráficos de fondo» que anula algunas de tus elecciones de color. Tus reglas !important siguen ganando para el primer plano, pero prueba ambos estados.
• Los elementos fixed/sticky se repiten en cada página impresa en algunos navegadores. Si una cabecera sigue apareciendo, ponle position: static !important dentro del bloque de impresión.
• Las URL generadas pueden cortarse mal — por eso añadimos word-break: break-all; sin ello una URL larga empuja la maquetación de lado.
• No ocultes demasiado — pies de imagen, créditos de figuras y firmas de autor son contenido, no adornos. Sé específico con tu lista de ocultado.

Mira también

• Una capa de depuración responsive — encuentra problemas de maquetación antes de que lleguen a la impresión.
• Copiar una página como Markdown limpio — otra forma de extraer contenido de una página desordenada.

Una buena hoja de estilos de impresión es un trabajo único de quince minutos que rinde cada vez que guardas un PDF. Instala JustZix, acota una regla a tu sitio más impreso y no vuelvas a pelear con la vista previa de impresión.