Imprimir MalaCiencia

No sé si alguna vez alguien habrá querido imprimir algún artículo de este blog. Si alguien lo ha hecho, habrá sufrido un pequeño inconveniente que afecta a la gran mayoría de páginas web: se imprime todo. Y todo significa la barra de Blogger, las barras laterales de enlaces, los anuncios... todo. Puede que incluso se impriman los colores de fondo, aunque la mayoría de navegadores vienen configurados por defecto para ignorar los colores e imágenes de fondo a la hora de imprimir. Y eso es sin duda una molestia. Las barras de navegación no tienen ninguna utilidad a la hora de imprimir una copia en papel. Más bien son molestas, ya que ocupan un espacio que podría destinarse al texto en sí. Muchos sitios web tienen un botón en sus páginas con el lema “versión para imprimir”, para mostrar una página con una maquetación diferente, sin todos esos elementos innecesarios y molestos sobre el papel. Como es lógico, esa funcionalidad requiere un cierto esfuerzo para el desarrollador del sitio. Sin embargo, hay una forma mucho más sencilla y elegante de resolver el problema, sin necesidad de “duplicar” cada página.

Hace tiempo comenté qué son las CSS, y cómo un buen uso de ellas y del (X)HTML Strict nos permitía separar completamente el contenido de una página de su apariencia. El estándar CSS tiene una serie de características no muy conocidas (o el menos, muy poco utilzadas) por muchos diseñadores, y es el poder discriminar la aplicación de determinado conjunto de reglas de estilo, en función del medio en el que se presente la página. ¿El qué? Veamos, la mayoría de la gente da por sentado que a la Web se accede mediante un ordenador, utilizando un navegador que visualiza las páginas (es más, la mayoría da por sentado que se accede con Internet Explorer bajo Windows en un PC). Sin embargo, no es la única forma (o al menos no debería serlo, aunque la mayoría de sitios están pensados únicamente para ese tipo de acceso). Últimamente se están popularizando dispositivos móviles con la posibilidad de acceder a Internet, como PDAs o teléfonos móviles muy sofisticados (de hecho, hay que ir olvidándose del término “teléfono móvil” y referirse a ellos como “terminales móviles”). También existe la posibilidad de acceder mediante algún servicio de TV, o software para invidentes que “lee” en voz alta el contenido de la página. Pues bien, el estándar CSS permite aplicar unos estilos u otros, dependiendo del medio de acceso. Y entre estos medios se encuentran las impresoras.

La forma de hacerlo es muy simple. Basta con especificar el atributo media en la etiqueta (X)HTML correspondiente (o la regla @media en el código CSS), que puede tomar varios valores como screen para referirse a un monitor de ordenador, speech para referirse a un sintetizador de voz, o lo que ahora nos interesa, print para referirse a un dispositivo de impresión. Si no se especifica nada, las reglas de estilo se aplicarán independientemente del medio de acceso, que es lo que ocurre con la mayoría de páginas. Pero si utilizamos este atributo, podemos definir una apariencia completamente diferente para el monitor y para la versión impresa. Y todo ello, como no me canso de insistir, sin tocar una sola coma del código HTML que forma la página en sí.

Pues bien, he aplicado esta buena práctica a este blog, de forma que si imprimiis un arículo cualquiera, sólo aparecerá el contenido del mismo (título y pie incluido), ocupando todo el ancho disponible, y con el fondo blanco. Ni barras laterales, ni anuncios, ni bordes. Podéis comprobarlo vosotros mismos imprimiendo esta página, o si queréis ser ecológicos y no malgastar papel y tinta, seleccionando la opción "Vista preliminar" (o "Print preview") de vuestro navegador, que mostrará cómo quedaría la página impresa. Como veis, el resultado final es más cómodo de leer, y al tener más espacio para el texto, utilizamos menos papel. Así que desde aquí animo a todos los que lean esto y tengan una página propia, a hacer lo mismo. No es nada complicado.

Hay que decir que no todos los navegadores implementan correctamente la impresión de una página, según estos estándares. Hay opciones interesantes, como el controlar los saltos de página (y evitar que al final de una página quede sólo la primera línea del siguiente párrafo) que no implementan todos los navegadores. Además, muchos de ellos no componen correctamente la página cuando hay elementos con un posicionamiento "peculiar". Como suele ser habitual, la peor nota va para el Internet Explorer, y en el caso concreto de este blog, en la versión impresa el texto no fluye alrededor de las imágenes (para los entendidos, digamos que "pasa" de los float), o al menos, hasta la versión 6, ya que no he probado la 7. Así que os recomiendo también que utilicéis navegadores que implementen mejor los estándares del W3C, como el Firefox o el Opera.