Uso de CSS para formatear documentos para imprimir

Aranzulla de Los Pobres

Si alguna vez imprimió reservas de boletos o direcciones a un hotel desde la web, probablemente no haya quedado impresionado con los resultados. Por lo tanto, es posible que no se dé cuenta de que los documentos impresos se pueden diseñar de la misma manera que en la pantalla, utilizando hojas de estilo en cascada (CSS).

Separación de intereses

Un beneficio clave de CSS es la separación del contenido de la presentación. En los términos más simples, esto significa en lugar de un marcado estilístico muy anticuado como:

 <font size="7"><b>Heading</b></font>

Usamos marcado semántico:

 <h1>Heading</h1>

Esto no solo es mucho más limpio, sino que también significa que nuestra presentación está separada de nuestro contenido. Los navegadores muestran los elementos h1 como texto grande y en negrita de forma predeterminada, pero podemos cambiar ese estilo en cualquier momento con una hoja de estilo:

 h1 { font-weight: normal; }

Al reunir esas declaraciones de estilo en un archivo separado y hacer referencia a ese archivo desde nuestro documento HTML, podemos hacer un uso aún mejor de la separación. La hoja de estilo se puede reutilizar y podemos cambiar ese único archivo en cualquier momento para actualizar el formato en cada documento que lo use.

Incluir una hoja de estilo de impresión

De manera similar a la inclusión de una hoja de estilo de pantalla, podemos especificar una hoja de estilo para imprimir. Una hoja de estilo de pantalla normalmente se incluye así:

 <link href="base.css" rel="stylesheet" />

Sin embargo, un atributo adicional, media , permite la orientación según el contexto en el que se representa el documento. Por defecto, el elemento anterior es equivalente a:

 <link href="base.css" rel="stylesheet" media="all" />

Esto significa que la hoja de estilo se aplicará a cualquier medio en el que se renderice el documento. Sin embargo, el atributo de medios también puede tomar valores de impresión y pantalla:

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

En este ejemplo, la hoja de estilo print.css solo se utilizará cuando se imprima el documento. Este es un mecanismo muy útil. Podemos recopilar todo el estilo común (tal vez la familia de fuentes o el interlineado) en una hoja de estilo que se aplica a todos los medios y el formato específico del medio en hojas de estilo individuales. De nuevo, este es otro uso de la separación de preocupaciones.

Algunas declaraciones de estilo de ejemplo

Un fondo limpio

Es casi seguro que no querrá desperdiciar tinta imprimiendo un fondo colorido o una imagen de fondo. Comience restableciendo los valores predeterminados para estos valores que puedan haberse establecido en su documento:

 body {
 background: white;
 color: black;
 }

Es posible que también desee evitar que se impriman imágenes de fondo; estas deben ser decorativas y, por lo tanto, no deben ser una parte obligatoria de su contenido:

 * {
 background-image: none !important;
 }

Relacionado Cómo establecer una imagen de fondo en CSS

Controlar los márgenes

Otro punto obvio a considerar con respecto a la impresión es el margen de la página. Aunque CSS proporciona un medio para establecer el tamaño del margen, debe tener en cuenta que su navegador y su impresora también pueden influir en la configuración de los márgenes.

Por ejemplo, en el cuadro de diálogo de impresión de Chrome, hay una configuración de margen que tiene valores que incluyen ninguno y personalizado que anulará todo lo especificado a través de CSS:

Por esta razón, se recomienda dejar las decisiones de margen al lector en las páginas web públicas. Sin embargo, para uso personal o para crear un diseño predeterminado, puede ser apropiado configurar los márgenes de impresión mediante CSS. La regla @page permite establecer márgenes y debe usarse de la siguiente manera:

 @page {
 margin: 2cm;
 }

CSS también tiene la capacidad para diseños de impresión más sofisticados, como variar el margen según si la página es impar (derecha), par (izquierda) o la portada.

Desafortunadamente, esto no tiene suficiente soporte, especialmente la opción de portada, pero se puede usar en un grado mínimo. Los siguientes estilos producen páginas con márgenes inferiores ligeramente más grandes que los superiores y márgenes ligeramente más grandes en el borde exterior de la página que en el lomo:

 @page {
 margin-left: 20mm;
 margin-right: 20mm;
 margin-top: 40mm;
 margin-bottom: 50mm;
 }
 @page :left {
 margin-left: 30mm;
 }
 @page :right {
 margin-right: 30mm;
 }

Ocultar contenido irrelevante

No todo el contenido será adecuado para una versión impresa de su documento. Si su página incluye navegación de banner, anuncios o una barra lateral, es posible que desee evitar que esos detalles aparezcan en la versión impresa, por ejemplo:

 #contents, div.ad { display: none; }

Obviamente, los hipervínculos no son relevantes en el material impreso, por lo que probablemente desee eliminar cualquier estilo que los diferencie del texto circundante:

 a { text-decoration: none; color: inherit; }

Sin embargo, es posible que aún desee que los lectores tengan acceso a las URL originales, y una solución sencilla es insertarlas automáticamente después del texto vinculado:

 a[href]:after {
 content: " (" attr(href) ")";
 font-size: 90%;
 color: #333;
 }

Este CSS da resultados como los siguientes:

a [href]: after se dirige específicamente a la posición después de ( : after ) cada elemento de enlace ( a ) que en realidad tiene una URL ( [href] ). La declaración de contenido aquí inserta el valor del atributo href entre paréntesis. Tenga en cuenta que se pueden aplicar otras reglas de estilo para controlar la visualización del contenido generado.

Manejo de saltos de página

Para evitar que los saltos de página dejen contenido aislado o que se rompa de forma incómoda en el medio, utilice las propiedades de salto de página : salto de página antes , salto de página después y salto de página interior . Por ejemplo:

 table { page-break-inside: avoid; }

Esto debería ayudar a evitar que las tablas abarquen varias páginas, siempre que ninguna sea más alta que una sola página. Similar:

 h1, h2 { page-break-before: always; }

Esto significa que dichos encabezados siempre inician una nueva página. Sin embargo, podría causar problemas si sigue inmediatamente el h1 de su página con un h2, ya que el h1 terminará en una página por sí solo. Para evitar esto, simplemente cancele el salto de página usando un selector que apunte a esa instancia específica, por ejemplo:

 h1 + h2 { page-break-before: avoid; }

Visualización de estilos de impresión

En todos los casos, su navegador y sistema operativo deben proporcionar una función de vista previa de impresión, a menudo como parte del diálogo de impresión estándar.

El navegador Chrome hace que sea más conveniente verificar e incluso depurar sus estilos de impresión a través de las herramientas de desarrollo, como lo demuestra este ejemplo que muestra un CV con una hoja de estilo de impresión. Primero, abra el menú principal y seleccione Más herramientas seguido de la opción Herramientas de desarrollo :

Desde el nuevo panel que aparece, seleccione Menú , luego Más herramientas , seguido de Renderizado :

Luego, desplácese hacia abajo hasta la configuración de tipo de medio Emular CSS . El menú desplegable le permite alternar entre las vistas de impresión y pantalla de su documento:

Al emular la hoja de estilo de impresión, el navegador de estilos estándar está disponible para inspeccionar y modificar las reglas de estilo en vivo. Tenga en cuenta que la emulación de la salida de impresión en una pantalla aún no es 100% precisa. El navegador no sabe nada sobre el tamaño del papel y la regla @page no se puede emular.

Imprimir en PDF

Una característica útil de los sistemas operativos modernos es la capacidad de imprimir en un archivo PDF. En efecto, cualquier cosa que pueda imprimir puede, en cambio, enviarse a un archivo PDF; no es una sorpresa real, ya que se supone que un archivo PDF representa un documento impreso, después de todo.

Esto hace que HTML, en combinación con una hoja de estilo de impresión, sea un medio excelente para crear un documento de alta calidad que se puede enviar como un archivo adjunto, así como imprimir.

Puede utilizar una hoja de estilo de impresión para crear documentos de calidad, desde su CV hasta recetas o anuncios de eventos. Las páginas web suelen verse feas y contienen detalles no deseados cuando se imprimen, pero una pequeña cantidad de ajustes de estilo pueden mejorar drásticamente los resultados de impresión. Guardar los resultados finales como PDF es una forma rápida de crear documentos atractivos y profesionales.