CSS: Impresión

En ocasiones puede ser necesario la impresión de una página web, como puede ser una noticia, un artículo educativo, el menú de un restaurante o la ficha de características con la información de un producto determinado. El resultado puede ser un papel impreso o un documento en formato PDF.

En este tipo de situaciones, la expectativa del usuario es obtener un resultado coherente, es decir, que el contenido encaje en la página, sin quedar cortado y con un buen uso de fuentes. En resumen, con buena legibilidad.

Para garantizar una impresión correcta podemos crear unos estilos CSS específicos. Por ejemplo, puede ser interesante eliminar los fondos de color, sobre todo los oscuros, e indicar el color negro para el texto con el fin de obtener un buen contraste y a la vez evitar un derroche innecesario de tinta.

También puede ser necesario excluir ciertos menús de navegación, como el menú superior o un menú lateral. De este modo conseguimos que todo el ancho del papel esté destinado al contenido que nos interesa. Incluso podemos excluir el pie de página, ya que suele contener información genérica.

Incluso, podemos conseguir que se visualice la URL de ciertos enlaces, con el fin de no perder información cuando el contenido salga impreso. Otro tipo de elemento a excluir de la medios impresos son los anuncios, como es obvio.

En este artículo se explica la forma de incluir estilos para los medios impresos, se describe el funcionamiento de la regla arroba @page, y se explica una serie de propiedades CSS específicas, además de algunas pseudoclases.

Medios impresos

Tal y como se explica en el artículo sobre consultas de medios (media queries), a través del tipo de medio print y junto con la regla arroba @media es posible aplicar estilos CSS para todo tipo de medios impresos.

Por ejemplo:

@media print {
  header,
  footer,
  nav {
    display: none;
  }

  main, h1, h2 {
    color: black;
  }
}

En este ejemplo, se excluye de la impresión los menús de navegación, la cabecera y el pie de página. También se indica que el color del texto y de los encabezados debe ser el negro.

También es posible aplicar estilos CSS para la impresión a través de la regla arroba @import, utilizada para incluir archivos CSS externos. De este modo, podemos indicar los estilos deseados para la impresión e importarlos.

De esta manera:

@import "imprimir.css" print;

Existe otro método para aplicar estilos CSS para los medios impresos. Se trata de usar el elemento HTML <link> junto con el atributo media y el valor print. Así también podemos incluir archivos CSS externos.

<link rel="stylesheet" href="imprimir.css" media="print">

La regla arroba ‘@page’

La regla arroba @page permite modificar algunas características de la página web impresa, ya sea en papel o generando un documento PDF. Dentro de esta regla arroba podemos hacer uso de una serie de descriptores que nos permitirán modificar el tamaño de salida del documento y los márgenes.

El descriptor ‘size’

El descriptor size permite especificar el tamaño del documento de salida. Puede usarse una serie de palabras clave referentes a ciertos tamaños estándar, como las medidas del formato DIN A4, o valores numéricos usando unidades de longitud. Vamos a ver una lista con los valores posibles:

Es posible mezclar el tamaño con la orientación. Por ejemplo, si queremos que el formato de impresión sea en formato DIN A3 en horizontal, será tan sencillo como indicar la orientación a continuación. Por ejemplo:

@page {
  size: A3 landscape;
}

El descriptor ‘margin’

El descriptor margin funciona exactamente igual que la propiedad CSS margin. Se puede indicar de uno a cuatro valores correspondientes a la separación que debe ir arriba, a la derecha, abajo y a la izquierda.

Los valores serán numéricos en unidades de longitud. Se se introduce 1 solo valor se aplica el margen a los cuatro lados; 2 valores equivalen al eje vertical y luego al horizontal; 3 valores son el de arriba, el eje horizontal y el de abajo.

Vamos a ver algunos ejemplos con su descripción:

De forma opcional, es posible usar los descriptores para cada uno de los cuatro lados: margin-top, margin-right, margin-bottom y margin-left, para los márgenes de arriba, derecha, abajo e izquierda, respectivamente.

En el siguiente ejemplo vamos a aplicar un margen de 1.5 cm arriba, 2 cm a ambos lados y 3 cm al pie de una página en formato DIN A4.

@page {
  margin: 1.5cm 2cm 3cm;
  size: A4;
}

Pseudoclases para impresión

En CSS existe algunas pseudoclases específicas para aplicar estilos CSS a ciertas páginas del documento generado. De esta forma, es posible cambiar el diseño en la primera página, a las páginas izquierdas, a las páginas derechas o a las páginas que estén en blanco. Se usan dentro de la regla arroba @page.

Lista de pseudoclases para medios impresos.

Estas pseudoclases no se pueden usar para modificar cualquier propiedad. Solo es posible cambiar los márgenes (margin), el número de líneas «huérfanas» (orphans) y el número de líneas «viudas» (widows).

Por ejemplo, vamos a cambiar los márgenes laterales de la primera página del documento PDF generado.

Código CSS:

@media :first {
  margin-right: 3cm;
  margin-left: 3cm;
}

Los saltos de página

Cuando se trata de imprimir una página web, es probable que algunos elementos queden cortados entre dos páginas. Para tener un mayor control sobre los saltos de página existe una serie de propiedades CSS específicas.

Salta después: la propiedad ‘break-after’

La propiedad break-after permite especificar si debe ocurrir un salto de página después de un elemento determinado. Esta propiedad puede ser usado tanto para páginas como para columnas y regiones.

Con el valor auto (por defecto) es posible dividir la página según el espacio disponible, pero no fuerza el salto. El valor avoid evita que se inserte un salto de página, y también es útil para columnas o regiones.

Para crear un salto de página después del elemento se usa el valor page. Si queremos que la nueva página tenga un formato como si fuera la de la izquierda o la de la derecha usaremos los valores left o right, respectivamente.

Por ejemplo:

.salta-despues {
  break-after: page;
}

Salta antes: la propiedad ‘break-before’

La propiedad break-before permite especificar si debe ocurrir un salto de página antes de un elemento determinado. Al igual que en la anterior, esta propiedad puede ser usada también para columnas y regiones.

Su valor por defecto también es auto, que dividirá la página dependiendo del espacio disponible. Para evitar el salto de página antes del elemento se usa el valor avoid. También sirve para columnas y regiones.

En esta propiedad, el valor page provocará un salto de página justo antes del elemento. Para que la nueva página se vea como si fuera de la izquierda se usa el valor left, y para que sea de la derecha se usa el valor right.

Por ejemplo:

.salta-antes {
  break-before: page;
}

Salta dentro: la propiedad ‘break-inside’

La propiedad break-inside permite gestionar el comportamiento de los saltos de página dentro de un elemento determinado. Esta propiedad puede ser muy útil para evitar que un elemento sea cortado en mitad de un salto de página, como sería el caso de una imagen o una tabla de datos.

Al igual que en las dos propiedades CSS anteriores, su valor por defecto es auto, que permite dividir elementos por la mitad según el contexto. Para evitar que un elemento quede dividido hay que usar el valor avoid, de esta manera las imágenes o las tablas permanecerán de forma íntegra.

Por ejemplo:

.no-saltes-dentro {
  break-inside: avoid;
}

La propiedad ‘orphans’

La propiedad orphans permite indicar el número mínimo de líneas de un elemento contenedor que deben mostrarse en la parte inferior de la página, antes de saltar a la página siguiente. En tipografía, una «huérfana» es la primera línea de un párrafo que aparece sola en la parte inferior de una página.

Esta propiedad admite como valor un número entero positivo correspondiente al número mínimo de líneas que deben mostrarse. El valor por defecto equivale a 2. Por ejemplo, si indicamos el valor 4 significa que cualquier párrafo cortado debe mostrar como mínimo tres líneas de texto.

Por ejemplo:

.huerfanas {
  orphans: 4;
}

Esta propiedad no está soportada en el navegador Firefox.

La propiedad ‘widows’

La propiedad widows se utiliza para especificar el número mínimo de líneas de un elemento contenedor que deben mostrarse en la parte superior de una página, fruto del salto en la página anterior. En tipografía, una «viuda» es la última línea de un párrafo que aparece sola en la parte superior de una página.

Esta propiedad también admite como valor un número entero positivo con el que se indica el número mínimo de líneas que deben mostrarse en la parte superior de una página. Por defecto, su valor equivale a 2.

Por ejemplo:

.viudas {
  widows: 4;
}

Esta propiedad no está soportada en el navegador Firefox.