Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Imprime como quieras

por Derek Featherstone

Los desarrolladores de sitios web tienen diversos métodos para crear versiones aptas para imprimir de sus sitios. Utilizando una acción en el servidor, o bien hojas de estilo en cascada, la versión para imprimir puede eliminar las imágenes y los elementos de navegación que carecen de sentido en la página impresa, y quizás mostrar la página en una columna única utilizando una tipografía diferente y distinto tamaño.

Pero, ¿qué ocrurre cuando no hay versión distinta para imprimir o la versión para imprimir incluye anuncios u otros elementos que no convienen al usuario? Aquí es donde entran las jojas de estilo. Con un poco de conocimiento de CSS y algunas herramientas de desarrollo web, podemos crear fácilmente nuestras propias versiones para imprimir, formateadas exactamente de la manera que queramos. Una vez se ha cogido el truco, lo podrás hacer en todos los proyectos y no querrás hacerlo de otro modo.

En este momento, necesitas unas pocas herramientas específicas para hacer que estas técnicas funcionen, aunque podríamos hacerlo con otras:

  1. Consigue una copia de Mozilla Firefox si todavía no lo tienes.
  2. Instala la extensión de Chris Pederick, Web Developer’s Toolbar si aún no la tienes.

¿Cómo funciona?

Estas técnicas se basan en unas pocas cosas, y asumimos que cualquier sitio que tiene un contenido sustancial emple algún tipo previsible de plantillas que utiliza las mismas técnicas de presentación para todos los artículos en el sitio (o sección del sitio.) Una vez localizado dónde está situado el contenido en el código, se puede aislar y formatear para que tenga exactamente el aspecto que queramos.

Estas técnias son realmente muy simples, en esencia:

  1. Haz visible la retícula del sitio.
  2. Aísla el elemento (normalmente un div o una celda de una tabla) que contiene la parte buscada.
  3. Utiliza CSS para formatear la página con los tipos y tamaños de letra adecuados, márgenes, etc.
  4. Utiliza CSS para mostrar o esconder selectivamente el resto de partes de la página según convenga.
  5. Guarda la hoja de estilo para que más adelante podamos crear una versión imprimible a medida.

La parte tal vez más difícil es decidir qué selectores de CSS deben aislar el contenido deseado, y esto es difícil sólo si el sitio emplea una estructura de plantillas compleja. En este caso, empecemos un un ejemplo simple y bonito: Boxes and Arrows.

Haz una radiografía del sitio

La extensión Web developer’s toolbar permite que fácilmente hagamos una radiografía del sitio, exponiendo su esqueleto subyacente de estructura. Remarca la retícula del sitio con “Outline Block Level Elements” or “Outline Table Cells.” (o su equivalente en la traducción de la extensión que emplees.) Una vez hecho esto, veremos los detalles de ID y clases con la opción “View ID and Class Details” del menú de opciones misceláneas. Ahora, la página se parecerá a esto.

Aislar el objetivo

Ahora que vemos cuál es nuestro objetivo, necesitamos aislarlo con CSS. Con el sitio Boxes and Arrows, hemos tenido suerte — todo el contenido principal aparece en el adecuadamente llamado “contentBox.” Con otros sitios, podríamos no tener tanta suerte.

Una vez identificado el objetivo, dale un color de fondo diferente o cambia las propiedades del borde para que sea claramente reconocible y se distinga del resto de la página. Haz el contenedor y todos sus elementos descendientes visibles, entonces, muévelo a la parte superior de la parte editable y oculta todo el resto:

  * {
    visibility: hidden;
  }
  
  #contentBox * {
    visibility: visible;
  }

Da formato según tus preferencias

Al llegar a este punto, ya tenemos un buen marco de trabajo. Para imprimir, es una buena idea incluir un valor de ancho en el contenedor (you utilizo 6.5 pulgadas, 16.51 cm. como valor por defecto, pero puedes elegir cualquier valor apropiado para tu impresora y márgenes.)

Ahora puedes dar formato al texto, cambiar fuentes tipográficas, colores y tamaños si quieres. Para Boxes and Arrows, la simple adición de ancho y algo de estilo en las fuentes ya fue suficiente:

  #contentBox * {
    visibility: visible;
    width: 6.25in;
  }
  
  p {
    font-family: "Bitstream Vera Serif";
    font-size: 10pt;
    line-height: 14pt;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: "Bitstream Vera Sans";
  }

Limpia si es necesario

Ahora puedes ocultar todos los componentes que se ven en pantalla pero no quieres que se impriman. Para Boxes and Arrows, agregamos las siguientes reglas para esconder algunos elementos y ahorrar espacio.

  .figright, #readMore, #metainfo,  #recent,
  .twocol, .clear, .row, .hr {
    display: none;
  }
  
  * img {
    height: 0;
    width: 0;
    position: absolute;
  }

Estableciendo un alto y un ancho de “0” para las imágenes y posicionándolas de forma absoluta las elimina del flujo normal del documento. Si simplemente hubiéramos escondido las imágenes, podrían aparecer grandes huecos en la página porque todavía ocupan espacio dentro del flujo del documento. Obviamente, no queremos que esto suceda en cada artículo ya que algunas imágenes son clave para entender el artículo en sí mismo.

Guárdalo para más tarde

Cuando estés satisfecho con los resultados, es hora de guardar el archivo externo de hoja de estilo CSS. Asegúrate de guardar el archivo CSS con frecuencia — cuando vuelvas de la vista previa de impresión el área de edición habrá desaparecido, y deberás recargarla para continuar con las modificaciones. Utiliza “Load” (cargar) para importar el archivo CSS en el área de edición.

Ahora que la hoja de estilo está guardada, puedes recuperarla cuando desees para ese sitio. Aquí está nuestra hoja de estilo guardada para Boxes and Arrows:

  * {
    visibility: hidden;
  }
  
  #contentBox * {
    visibility: visible;
    width: 6.25in;
  }
  
  #contentBox {
	  margin-bottom: -9in;
  }
  
  p {
    font-family: "Bitstream Vera Serif";
    font-size: 10pt;
    line-height: 14pt;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: "Bitstream Vera Sans";
  }
  
  .figright, #readMore, #metainfo,  #recent,
    .twocol, .clear, .row, .hr {
    display: none;
  }
  
  * img {
    height: 0;
    width: 0;
    position: absolute;
  }

Otros trucos

Crea algo de estpacio: puede resultar difícil distinguir entre un div o tabla y otro. Crea una regla en el área de edición para colocar márgenes alrededor de los diferentes contenedores, dependiendo del tipo de técnica de maquetación del sitio:

  table {
    margin: 10px;
  }

o bien

div {
  margin: 10px;
}

Elementos a tratar: Si tienes problemas identificando algún objetivo en la página, puedes utilizar otra gran prestación de la extensión Web Developer’s Toolbar: “View Style Information” (ver información del estilo) del Menú de Información. Al seleccionar esta opción, el cursor se convierte en una línea. Pasa sobre los elementos en la página y la barra de estado indica en que parte del DOM está ubicado. Esto es especialmente útil para elementos que están muy anidados dentro de la página.

Objetivos difíciles: Las celdas de tabla sin etiquetar son a menudo difíciles de aislar. Este es uno de los conjuntos de reglas más difíciles que hemos tenido que crear hasta el momento. Hace que la celda de la segunda tabla se muestre en la primera fila de la tercera tabla de la página mostrando la segunda y tercera celdas, y después ocultando la tercera con la siguiente regla. Es complicado, pero funciona:

  html body table+table+table tr td+td {
    visibility: visible;
    width: 6.5in;
  }

  html body table+table+table tr td+td+td {
    visibility: hidden;
  }

Compatibilidad: La edición de CSS es una gran herramienta pero de momento no funciona en la barra lateral (sidebar) de Mozilla de momento, pero sí en Firefox. Si prefieres Mozilla, puedes utilizar Firefox para modificar y guardar la hoja de estilo, y después emplear la opción de “Add User Style Sheet” (añadir hoja de estilo del usuario) del menú Miscellanea para aplicar los estilos guardados.

Derek Featherstone es un profesor de secundaria reconvertido en desarrollador de web, formador técnico, consultor de accesibilidad, y creyente desde hace tiempo en los estándares de la web. Vive en Ottawa, Canada, y sufre de una esquizofrenia inducida por el Web, con tarjetas de visita de los dos negocios que tiene en la red — furtherAhead.com y WATS.ca.

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]