Ediciones ENI Editorial | líder en informática
Las hojas de estilo para la impresión
La impresión de las páginas web
Puede resultar paradójico querer imprimir páginas web hoy en día, teniendo en cuenta la omnipresencia de Internet y de la cultura de las pantallas. Hay numerosas situaciones en las que esto es útil, como la impresión de reservas, documentos administrativos u oficiales, etc.
Muy a menudo la experiencia es muy decepcionante. En efecto, los diseñadores de estas páginas han dejado las barras de navegación, las franjas publicitarias, llenas de colores y han elegido fuentes de caracteres poco legibles en la impresión. Esto generalmente se debe al desconocimiento de los estilos CSS dedicados a la impresión de las páginas web.
Observe que algunas propiedades CSS dedicadas a la impresión ya forman parte de la especificación CSS 2. W3C trabaja en este momento en un módulo CSS3 dedicado al recurso multimedia de paginación, el Paged Media Module Level 3, que está como Working Draft a fecha 18 de octubre de 2018: https://www.w3.org/TR/css-page-3/
Las hojas de estilo específicas
1. Las relaciones con los archivos CSS
Para gestionar los estilos CSS dedicados a la impresión, es conveniente separarlos de los estilos CSS para la visualización en pantalla. Para esto, vamos a utilizar el atributo media en el elemento <link>. Es preferible diseñar una hoja de estilo para la visualización en la pantalla y una hoja de estilo para la impresión en papel.
A continuación se muestra la sintaxis:
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen">
<link rel="stylesheet" type="text/css" href="impresion.css"
media="print"> En estos ejemplos, con el atributo media, concretamos el uso de las hojas de estilo:
-
El archivo estilos.css se crea para la visualización en pantalla: media="screen".
-
El archivo impresion.css se crea para la impresión en papel: media="print".
Observe que, si no especifica un recurso multimedia, los estilos se aplican a todos ellos.
2. Las consultas de recursos multimedia
También puede perfectamente utilizar consultas de recursos multimedia para definir los estilos CSS dedicados a la impresión. De esta manera, podemos tener varias consultas, una por cada tipo de recurso multimedia:
@media print {
body { font-size: 12pt }
} ...Las propiedades globales de las páginas
Las páginas que se podrán imprimir deberán tener propiedades específicas que no interfieran con su lectura. Piense en estas propiedades:
-
Márgenes y rellenos internos diferentes.
-
Un color de fondo blanco.
-
Sin imagen de fondo.
-
Un color de texto negro.
-
Una fuente de caracteres clásica.
-
Un tamaño de los caracteres en puntos.
A continuación se muestra lo que podríamos tener, con una consulta de recursos multimedia, usando el elemento <body>:
@media print {
body {
margin: auto;
padding: 20pt;
background-color: #FFF;
background-image: none;
color: #000;
font-family: Arial, Helvetica, Times, "Times new Roman";
font-size: 12pt;
}
} Las fuentes de caracteres
La utilización de las fuentes de caracteres es un punto que requiere toda su atención. Debe hacer un uso diferenciado de las fuentes de caracteres y de los tamaños de los caracteres en la pantalla y durante la impresión.
Como hemos visto anteriormente, el tamaño de los caracteres utilizado para la visualización en la pantalla debe ser relativo. Principalmente, debe utilizar la unidad em para definir los tamaños de los caracteres. Para la impresión en papel, debe utilizar tamaños fijos, con la unidad pt, por ejemplo, que es similar a la utilizada en los tratamientos de texto.
Con el mismo principio, puede utilizar fuentes de caracteres más o menos gráficas para los títulos y fuentes de caracteres específicas para los párrafos que se van a leer en pantalla. Por el contrario, para los documentos que se van a imprimir, debe volver a los grandes clásicos de los tratamientos de texto, como Arial o Times new Roman.
Los elementos no impresos
No hay nada más molesto que imprimir páginas que contienen barras de navegación, franjas publicitarias, imágenes sobredimensionadas, etc.
Para evitar a sus visitantes todas estas molestias, cree una sencilla clase que solo muestre este tipo de elementos en la pantalla y, en consecuencia, que no se impriman.
He aquí un ejemplo de una clase:
.no-impresa {
display: none;
} A continuación, debe aplicar esta clase a los elementos deseados en la hoja de estilo dedicada a la impresión o en la consulta de recursos multimedia deseada.
Las rupturas de lectura
1. Los saltos de página
Las páginas mostradas en una pantalla no tienen tamaño; potencialmente pueden ser infinitas con la utilización de la barra de desplazamiento en los navegadores. En las páginas impresas, es otra cosa. Usted debe determinar dónde podrían mostrarse los saltos de página y las líneas consecutivas en los textos.
La propiedad page-break-before de CSS 2.1 permite determinar el salto de página antes del elemento apuntado por el selector. Siguiendo el mismo principio, tiene la propiedad page-break-after para insertar un salto después del elemento. Puede utilizar estos valores principales:
-
auto, valor por defecto, que permite no obligar a ningún salto de página.
-
always aplica siempre un salto de página.
-
avoid indica que los saltos de página están prohibidos.
Perfectamente podríamos querer que los saltos de página apareciesen siempre antes de los elementos <h1> y nunca después de los elementos <h1>, <h2> y <h3>. Esto respeta a los principios de lectura habituales.
A continuación se muestran las reglas CSS utilizadas:
h1 {
page-break-before: always;
}
h1, h2, h3 {
page-break-after: avoid;
} 2. Las líneas consecutivas
Es desagradable tener un salto de página...
Los enlaces de hipertexto
La gestión de los enlaces de hipertexto. No se realiza de la misma manera entre la visualización en una pantalla y la impresión en papel. Para la impresión en papel, puede conservar el formato habitual de los enlaces subrayados. De esta manera, se distinguirán del texto normal.
Además, puede agregar la URL de destino, lo que permite imprimir una ayuda adicional y muy apreciada.
A continuación se muestra cómo podrían ser estas reglas CSS:
@media print {
...
a {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
} 
