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:

Título

Usamos marcado semántico:

Título

Esto no solo es mucho más limpio, sino que también significa que nuestra presentación está separada de nuestro contenido. Los navegadores renderizan h1 elementos como texto grande y en negrita por defecto, 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í:

Sin embargo, un atributo adicional, medios de comunicación, permite la orientación basada en el contexto en el que se representa el documento. Por defecto, el elemento anterior es equivalente a:

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

En este ejemplo, el print.css La hoja de estilo 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:

cuerpo {
fondo: blanco;
de color negro;
}

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:

* {
imagen de fondo: ninguna! importante;
}

Relacionado: Cómo configurar una imagen de fondo en CSS

Cómo configurar una imagen de fondo en CSS

CSS es una poderosa herramienta para diseñar páginas web. Aprender a colocar una imagen de fondo le enseña muchos conceptos básicos de 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. los @página La regla permite establecer márgenes y debe usarse de la siguiente manera:

@página {
margen: 2 cm;
}

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:

@página {
margen izquierdo: 20 mm;
margen derecho: 20 mm;
margen superior: 40 mm;
margen inferior: 50 mm;
}
@page: left {
margen izquierdo: 30 mm;
}
@page: right {
margen derecho: 30 mm;
}

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 {decoración de texto: ninguna; color: heredar; }

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]: después de {
contenido: "(" attr (href) ")";
tamaño de fuente: 90%;
color: # 333;
}

Este CSS da resultados como los siguientes:

a [href]: después se dirige específicamente a la posición después de (:después) cada elemento de enlace (a) que en realidad tiene una URL ([href]). los contenido declaración aquí inserta el valor de la href atributo 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 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 dentro. Por ejemplo:

table {page-break-inside: evitar; }

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. Similitud:

h1, h2 {salto de página antes: siempre; }

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 {salto de página antes: evitar; }

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 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 por el Herramientas de desarrollo opción:

En el nuevo panel que aparece, seleccione Menú, entonces Más herramientas, seguido por Representación:

Luego, desplácese hacia abajo hasta Emular el tipo de medio CSS configuración. 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 estándar Navegador de estilos 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 el @página la regla 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, lo que no es ninguna sorpresa, 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 archivo adjunto, así como imprimir.

Imprima una variedad de documentos

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.

Cómo imprimir páginas web a PDF con Microsoft Edge

¿Alguna vez te has encontrado con un artículo interesante que querías guardar para más adelante? Bueno, puede guardar como PDF con Edge en tres sencillos pasos.

Sobre el Autor