Cómo imprimir tu HTML con estilo

Algunos consejos sobre cómo imprimir desde el navegador en la impresora o en un documento PDF usando CSS

Aunque miramos cada vez más nuestras pantallas, la impresión sigue siendo una realidad.

Incluso con publicaciones de blog. Recuerdo una vez en 2009 que conocí a una persona que me dijo que hizo que su asistente personal imprimiera cada publicación de blog que publiqué (sí, me quedé mirando fijamente durante un rato). Definitivamente inesperado.

Mi caso de uso principal para investigar la impresión suele ser la impresión en PDF. Podría crear algo dentro del navegador y quiero que esté disponible como PDF.

Los navegadores hacen que esto sea muy fácil, con Chrome de forma predeterminada en "Guardar" cuando se intenta imprimir un documento y una impresora no está disponible, y Safari tiene un botón dedicado en la barra de menú:

Safari Export PDF

Imprimir CSS

Algunas cosas comunes que puede querer hacer al imprimir es ocultar algunas partes del documento, tal vez el pie de página, algo en el encabezado, la barra lateral.

Tal vez desee utilizar una fuente diferente para imprimir, lo cual es totalmente legítimo.

Si tiene un CSS grande para imprimir, será mejor que use un archivo separado para él. Los navegadores solo lo descargarán al imprimir:

<link rel="stylesheet"
      src="print.css"
      type="text/css"
      media="print" />

CSS @media print

Una alternativa al enfoque anterior son las consultas de medios. Todo lo que agregue dentro de este bloque:

@media print {
  /* ... */
}

se aplicará solo a los documentos impresos.

Enlaces

HTML es genial debido a los enlaces. Se llama Hipertexto por una buena razón. Al imprimir podemos perder mucha información, dependiendo del contenido.

CSS ofrece una excelente manera de resolver este problema editando el contenido, agregando el enlace después del<a>etiqueta de texto, usando:

@media print {
    a[href*='//']:after {
        content:" (" attr(href) ") ";
        color: $primary;
    }
}

Yo apuntoa[href*='//']para hacer esto solo para enlaces externos. Es posible que tenga enlaces internos para fines de navegación e indexación interna, lo que sería inútil en la mayoría de mis casos de uso. Si también desea que se impriman enlaces internos, simplemente haga:

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

Márgenes de página

Puede agregar márgenes a cada página.cmoines una buena unidad para imprimir en papel.

@page {
    margin-top: 2cm;
    margin-bottom: 2cm;
    margin-left: 2cm;
    margin-right: 2cm;
}

@pagetambién se puede usar para orientar solo la primera página, usando@page :first, o solo las páginas izquierda y derecha usando@page :lefty@page: right.

Saltos de página

Es posible que desee agregar un salto de página después de algunos elementos o antes de ellos. Usarpage-break-afterypage-break-before:

.book-date {
    page-break-after: always;
}
.post-content {
page-break-before: always;
}

Esas propiedadesaceptar una amplia variedad de valores.

Evite romper imágenes en el medio

Experimenté esto con Firefox: las imágenes por defecto se cortan en el medio y continúan en la página siguiente. También podría sucederle al texto.

Usar

p {
  page-break-inside: avoid;
}

y envuelve tus imágenes en unpetiqueta. Orientaciónimgdirectamente no funcionó en mis pruebas.

Esto también se aplica a otros contenidos, no solo a las imágenes. Si nota que algo se corta cuando no lo desea, use esta propiedad.

Tamaño del PDF

Intentar imprimir un PDF de más de 400 páginas con imágenes con Chrome generó inicialmente un archivo de más de 100 MB, aunque el tamaño total de las imágenes no era tan grande.

Probé con Firefox y Safari, y el tamaño era inferior a 10 MB.

Después de algunos experimentos, resultó que Chrome tiene 3 formas de imprimir un HTML en PDF:

❌ No lo imprima utilizando el diálogo del sistema
❌ No haga clic en "Abrir PDF en vista previa"
✅ En su lugar, haga clic en el botón "Guardar" que aparece en el cuadro de diálogo Imprimir de Chrome

The right way to print in Chrome

Esto genera un PDF mucho más rápido que con las otras 2 formas y con un tamaño mucho, mucho más pequeño.

Depurar la presentación impresa

Chrome DevTools ofrece formas de emular el diseño de impresión:

Enable Chrome DevTools Rendering

Una vez que se abra el panel, cambie la emulación de renderizado aprint:

Change the render to print

Descarga mi gratisManual de CSS