en CSS

Hojas de estilo para impresión

Hoy vamos a hablar sobre cómo, mediante hojas de estilo, podemos optimizar nuestras páginas para ser impresas.

Aún a dia de hoy es habitual encontrar muchos sites que ofrecen a sus lectores versiones «imprimibles» de sus páginas, enlaces que nos envían a una nueva página en la que se han eliminado algunos elementos y se han formateado los contenidos de forma que encajen y se visualicen correctamente en papel.

Dejando un lado el trabajo extra que esto supone, crear páginas específicas para impresión duplicando contenido del documento principal puede acarrear daños colaterales tales como penalizaciones en el posicionamiento de nuestra web, por contenido duplicado en Google. Aún existiendo técnicas para evitar esto ( NOINDEX ), no tenemos porqué arriesgarnos ni realizar ese esfuerzo extra de duplicación.

Mediante el atributo media de CSS, podemos enlazar a una hoja de estilos que actuará exclusivamente cuando el usuario trate de imprimir una página.

En esta nueva hoja de estilos trataremos de conseguir lo siguiente:

1. Eliminar contenidos no deseados

Posiblemente no sean necesarias ni la cabecera completa del site, ni las opciones de navegación principales, el breadcrumb, ni, si las hubiera, las columnas laterales con información adicional, ¡o la publicidad!. Al usuario le interesa el contenido principal de la página.

#navigation, #breadcrumb, #sidebar, #footer { display: none }

2. Formatear la página

Desde asegurarnos que los elementos van a encajar en la página correctamente ( nada de floats ni margins, todos los anchos porcentuales… ) hasta revisar el formato visual de los elementos ( lo que en la versión online enfatizamos usando el color rojo, quizás valga la pena enfatizarlo con negrita o subrayado en la versión impresa: el usuario posiblemente imprima en blanco y negro ).

También, para rizar el rizo, podemos tratar de añadir a los enlaces algo de información adicional, indicando a qué URL apunta cada uno, o recopilándolos todos al final de la página. Os recomiendo la lectura del artículo que trata precisamente sobre esto en A List Apart .

3. Tener especial cuidado con las imágenes

Es habitual, a la hora de maquetar una página mediante CSS, el uso de imágenes de fondo para conseguir ciertos efectos, delimitar contenedores, etc… Hay que tener en cuenta que, por defecto, la mayoría de navegadores no imprimen las imágenes de fondo, con lo que, por ejemplo, si el logotipo de la página está como fondo de una capa que contiene el nombre la misma… no se verá en la versión impresa.

Una forma de evitar esto sería usar un logo optimizado para impresión ( B/N ), incluído dentro del propio HTML de la página, pero oculto por CSS para la versión de pantalla, pero visible para la versión impresa

#print_logo { display:none; }

#print_logo { display:block; }

Podéis ver un ejemplo práctico en las fichas de programa de Softonic Inglés , que renovamos hace poco para incluir este tipo de mejoras:

9628-10775.jpg
versión online

9628-10776.jpg
versión para impresión

Como último detalle: a menos que indiquéis en vuestra hoja de estilos genérica el media=»screen», el documento de impresión heredará todas las propiedades de dicha hoja de estilos.

Aunque es posible redefinir y sobreescribir todas las propiedades de nuevo en la hoja de estilos de impresión, lo más sencillo es lo que indico arriba: especificad el media = «screen» en vuestra CSS genérica. De esta forma en el CSS de impresión os evitaréis tener que eliminar el formato de todos los elementos: sólo tendréis que definir aquellas clases e ids que necesitéis.

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)