Ir directamente al contenido de esta página
Sé que es un extraño encabezado, pero es la conclusión a la que se llega pensando un poco. Ahora lo matizaré, pero la idea básica es ésta: las páginas web no se ven, se leen. Puede parecer algo obvio, pero muchas veces los diseñadores web, preocupados por la selección de colores, la distribución del espacio, el interlineado, los gráficos… olvidan el hecho de que el visitante lo que va a hacer es usar la página. Salvo en el caso de los sitios web dedicados a contenidos multimedia, la mayor parte de la red es un medio textual. Este predominio del texto me lleva también a una conclusión inmediata: lo que los usuarios hacen es leer. Por tanto, nuestro deber como autores es facilitar la lectura.
Hay diversas maneras de facilitar la lectura. Algunas de las recomendaciones básicas en el ámbito de la usabilidad web con respecto a la lectura son:
Sin embargo, por un lado hay situaciones en las que no todas estas reglas son aplicables1, y por otro, incluso aplicando estas reglas, una pantalla sigue siendo un medio cuya lectura exige un esfuerzo físico mayor que una página impresa.
Así que, a la hora de tratar con textos extensos, los usuarios siempre tienen en mente el plan B: imprimir las páginas.
Llegados a este punto, algunos desarrolladores de contenidos eligen presentar resúmenes de la información en el documento HTML y poner a disposición del lector un archivo PDF apto para imprimir con el contenido completo. No es una mala opción, pero presenta, a mi juicio, dos inconvenientes. Primero, el contenido del PDF no se indexa, por lo que es posible que el usuario no logre llegar a la información que precisa a través de un buscador. Y segundo, hay que crear esos mismos PDF.
Otra opción popular es la de la versión de impresión amistosa —del inglés printer-friendly, una versión simplificada de la página web— o incluso la versión sólo texto. Sin embargo, ambas soluciones presentan el inconveninente de que duplican el trabajo de creación de los documentos, y que se exponen gravemente a que por descuido, por urgencia, o por volumen de trabajo, las versiones imprimibles no se mantengan actualizadas.
Afortunadamente, las hojas de estilo en cascada proporcionan una solución práctica a la par que elegante.
Dentro de nuestros hábitos web, hemos de reconocer que imprimir una página de internet es el último recurso. Más común es el método de seleccionar los contenidos, copiar y pegar en un procesador de texto, porque durante años nos hemos visto frustrados cuando de la impresora salen páginas con imágenes innecesarias flotando en el vacío, líneas de texto cortadas en su margen derecho, y la impertinente hoja final desperdiciada por un par de iconos o por la información del copyright del sitio que estábamos visitando. Ahora todo eso se puede evitar aplicando una CSS exclusiva para medios de impresión.
Vamos a ilustrar a continuación cómo lograr una buena impresión de una página sobre un ejemplo ficticio, la página inicial de un sitio web inexistente, gatadas.org. Nuestro objetivo es lograr que esta página se imprima de forma agradable y útil.
Si se prueba a imprimir, los resultados varían.
En Internet Explorer 6, que no ajusta el contenido a la página de impresión, se obtienen líneas cortadas —se puede comprobar por medio del menú Archivo → Vista preliminar…—. En Firefox, el contenido se ajusta, pero reduce proporcionalmente el tamaño de fuente —ídem—. Pero no son estos los únicos inconvenientes. Pasemos al análisis.
En primer lugar, el color. En pantalla he elegido ese tono crema porque ayuda a que la página sea claramente legible sin molestar por un brillo excesivo tras una prolongada exposición a la vista, pero para el usuario no es más que un gasto innecesario de tinta. Por fortuna, las imágenes y los colores de fondo no se imprimen, pero no está de más especificar los colores que se desean. Y está claro que a la hora de leer texto impreso, no hay nada como el negro sobre blanco.
En segundo lugar, los elementos innecesarios, como son la barra de navegación y los selectores de interfaz. No sólo no tienen uso alguno, sino que hemos de tener en cuenta que ocupan espacio, es decir, recursos de impresión del usuario.
En tercer lugar, tenemos una imagen —la de la cabecera—que no sólo es también inútil, sino que está desvinculada de la función que tenía en pantalla, luego también sobra.
Hay que solucionar todo esto, y hay que solucionarlo sin crear un nuevo documento. Manos a la obra.
Lo primero, antes incluso de ponernos a escribir la nueva CSS, es recordar que de alguna manera hay que señalar al navegador cuándo debe elegir nuestra hoja de estilo original, y cundo la versión para imprimir. Para ello, incluímos las siguientes líneas de código:
<link href="estilos/gatos.css" rel="stylesheet" type="text/css" media="screen" />
<link href="estilos/gatos_imprimir.css" rel="stylesheet" type="text/css" media="print" />
Especificamos en el atributo media el dispositivo de salida al que se debe aplicar cada CSS. Elegimos marcar la hoja de estilo original, gatos.css, con media="screen" en lugar de dejarla sin delimitar —si no se especifica el medio, el navegador lo interpreta por defecto como all, es decir, que lo aplicara a cualquiera—, para asegurarnos de que de ninguna manera va a entrar en conflicto con las reglas que definiremos para gatos_impresion.css, sobre todo porque vamos a crear esta segunda CSS eliminando gran parte del contenido de la original. La he vinculado por medio del elemento link, pero también seréa válido hacerlo importando ambas,
@import url(gatos.css) screen;
@import url(gatos_imprimir.css) print;
o incluso por medio de la regla @media en la propia CSS:
@media screen {
/* aquí vendrían las reglas para pantalla… */
}
@media print {
/* …y aquí las de página */
}
Ahora sí, ya podemos empezar a escribir el estilo propiamente dicho.
Bien, ahora que ya está todo listo, copiamos nuestra CSS original, gatos.css y la renombramos como gatos_imprimir.css. Presentamos aquí la hoja de estilo original, para que luego pueda compararse con la resultante:
/* ETIQUETAS MODIFICADAS*/
* {
padding: 0px;
margin: 0px;
}
body {
color: #333;
background-color: #E9E9E9;
}
#contenido p {
margin-bottom: 15px;
}
#pie p {
padding-top: 20px;
}
#navegacion p {
width: 180px;
height: auto;
color: #630;
background-color: #FFF;
border: 1px solid #630;
padding: 5px;
margin-bottom: 2px;
}
h1 {
color: #630;
background-color: transparent;
width: 640px;
border-bottom: 2px solid #630;
font-size: 150%;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 10px 0 15px 0;
}
h2 {
width: 192px;
border-bottom: 2px solid #630;
font-size: 125%;
font-family: Georgia, "Times New Roman", Times, serif;
padding-bottom: 3px;
margin: 10px 0 5px 0;
}
option {
padding-left: 5px;
}
ul {
margin-bottom: 15px;
}
li {
margin: 0 0 10px 60px;
list-style-position: outside;
list-style-image: url(../imagenes/boliche.gif);
}
a:link, a:visited {
color: #C56004;
background-color: transparent;
font-weight: normal;
text-decoration: none;
}
a:hover, a:active {
color: #C56004;
background-color: transparent;
font-weight: normal;
text-decoration: underline;
}
/* CAPAS */
#contenedor {
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #333;
background-color: #FFCA95;
background-image: url(../imagenes/cuerpo.jpg);
background-repeat: repeat-y;
}
#encabezado {
width: 900px;
height: auto;
}
#navegacion {
width: 200px;
height: auto;
color: #630;
background-color: transparent;
float: right;
margin: 0 0 10px 10px;
margin-right: -8px;
}
#contenido {
width: 845px;
height: auto;
color: #630;
background-color: transparent;
padding: 10px 20px;
}
#pie {
width: 900px;
height: 100px;
text-align: center;
color: #630;
background-color: transparent;
background-image: url(../imagenes/pie.jpg);
background-repeat: no-repeat;
}
/* PSEUDOCLASES Y CLASES */
a.barra:link, a.barra:visited {
color: #C56004;
background-color: transparent;
font-weight: normal;
text-decoration: none;
}
a.barra:hover, a.barra:active {
color: #C56004;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
.caja {
width: 100%;
color: inherit;
margin-top: 3px;
}
.sellos {
color: #630 !important;
background-color: #FFF !important;
font-weight: bold !important;
padding: 3px !important;
border-top: 1px solid #630 !important;
border-bottom: 1px solid #630 !important;
text-decoration: none !important;
}
Ahora pensamos en lo que señalé al analizar la impresión del primer ejemplo, y decidimos proceder aplicando reducción por simplificación.
Dijimos que la imagen que hemos utilizado como encabezado de la página sobraba. Como nuestro marcado XHTML ha sido lo más semántico posible, ya disponemos de una capa #encabezado que la incluía. Eliminamos todas las propiedades de esa capa, y hacemos que la capa en sí desaparezca:
#encabezado {
display: none;
}
Empleamos esta declaración y no visibility: hidden;, porque la de arriba elimina el elemento del flujo del documento; la segunda sólo lo haría invisible, dejando un hueco en blanco en el espacio que ocupa.
De la misma forma, eliminamos #navegacion, que incluía los vínculos a las secciones principales y los selectores de fuentes.
Como ahora tenemos dos capas menos, los estilos aplicados exclusivamente a elementos incluidos en ellas se vuelven también innecesarios. Así, sin temor alguno, elimino completamente #navegacion p, .caja —que aplicaba a las cajas del formulario de selección de estilos—, las pseudoclases para a.barra, y el estilo de la etiqueta option.
Sigamos. Repaso la primera impresión, y descubro algo que se me había pasado por alto: los vínculos. Como ya no tienen estados de interacción, elimino las declaraciones para :hover y :active.
Nuestra CSS se ha reducido considerablemente, pero aún no es suficiente.
La emprendo ahora con #contenedor. La finalidad de esta capa es centrar todo el contenido, así que la respeto. Pero no necesito ya que tenga una imagen de fondo —además del hecho de que los navegadores no imprimen las imágenes asignadas como fondo de elementos—, así que quito background-image y sus otras propiedades. Tampoco necesito color de texto —ya lo asignaremos al contenido— ni color de fondo. Por otra parte, no tiene sentido que para papel especifique un ancho en píxeles. Como no sabemos cuál será el tamaño del papel en el que se va a imprimir, nuestro primer impulso podría ser establecerlo a auto como su altura, pero pensando que estos son valores por defecto, elimino ambos, y establezco mejor los límites de su expansión con los márgenes. Unifico margin-left: auto; y margin-right: auto; y añado los márgenes verticales. Cambiamos la familia de fuente a Times New Roman —en algún sitio leí que facilita la lectura impresa una fuente con serifa; pido disculpas por no recordar la fuente—, y selecciono un nuevo tamaño. Queda así:
#contenedor {
margin: 1cm 2.5cm 3.5cm;
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
}
Nótese que he cambiado las unidades de medida por centímetros y puntos, más apropiadas para un documento impreso.
Ahora, a por #contenido. Como ya no tengo que preocuparme de cómo interactúa con la imagen que había establecido de fondo, ni con la capa #navegacion, elimino su padding. Y ya puestos, comprendo que el alto y el ancho también sobran. Por último, ¿qué había dicho antes de los colores? Negro sobre blanco.
Salvo unos detalles sueltos, lo que nos queda es el pie de la página. Tras meditarlo, veo que las declaraciones de código estándar y de CSS válida son también innecesarias para el lector de la página impresa. Así que fuera, display: none;. ¿Y el copyright? No me he olvidado, pero eso lo solucionaré un poco más adelante. Y como ya no hay pie, la clase para el formato de los sellos la borramos directamente.
Repaso nuevamente la CSS, haciendo unos retoques. Como para la etiqueta body sólo hay declaraciones de colores que ya no necesitamos, la elimino también. Como en este ejemplo #contenido no incluye ningún encabezado de segundo nivel que se vaya a imprimir, ídem para h2 —decisión que no tomaría si fuese la CSS para todo un sitio, por supuesto—. Decido además eliminar la imagen del boliche de las listas —porque en Firefox se reescala hasta ocupar el tamaño de viñeta por defecto del navegador—. Ya sólo queda ajustar los valores y unidades de los elementos que nos quedan, por lo que voy probando hasta ajustarlos. Así, la CSS que ha sobrevivido tras la masacre es la siguiente:
/* ETIQUETAS MODIFICADAS*/
* {
padding: 0pt;
margin: 0pt;
}
#contenido p {
margin-bottom: 10pt;
}
h1 {
color: #630;
background-color: transparent;
width: 100%;
border-bottom: 2pt solid #630;
font-size: 150%;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 10pt 0;
}
ul {
margin-bottom: 10pt;
}
li {
margin: 0 0 10pt 1cm;
list-style-position: outside;
}
a:link, a:visited {
color: #C56004;
background-color: transparent;
font-weight: normal;
text-decoration: none;
}
/* CAPAS */
#contenedor {
margin: 1cm 2cm 2.5cm;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
}
#encabezado {
display: none;
}
#navegacion {
display: none;
}
#contenido {
color: #000;
background-color: #FFF;
}
#pie {
display: none;
}
Bien, ciertamente —como se puede comprobar por medio de Archivo → Vista preliminar…— su impresión es legible.
Sin embargo, lo que ha quedado, aunque tiene la ventaja de que estamos seguros de que no sufre el problema de la no actualización de su contenido, desde el punto de vista estético no ofrece mucho mejor aspecto que un corta-y-pega o un sólo-texto. Afortunadamente, no tenemos porqué resignarnos.
Ahora es cuando empieza la parte creativa. Añadir elementos no tiene mayor dificultad que eliminarlos. Pienso en lo que quiero ofrecer como «extra» en la página impresa, y decido restituir el copyright que eliminé anteriormente —aunque sin los sellos—, y añadir un encabezado. Primero creo sus estilos en gatos_imprimir.css:
#encabezado_impresion {
margin-bottom: 5pt;
}
#pie_impresion {
font-family: Arial, sans-serif;
font-size: 90%;
text-align: center;
padding-top: 10pt;
border-top: 2pt solid #630;
}
Ahora, añado las capas respectivas al XHTML, cada una debajo de su contrapartida para la pantalla:
<div id="encabezado_impresion">
<!-- Encabezado para impresión: ajustar en CSS-pantalla su "display" a "none" -->
<img src="../imagenes/encabezado_impresion.jpg" width="539" height="118" alt=" " />
</div>
<div id="pie_impresion">
<!-- Pie para impresión: ajustar en CSS-pantalla su "display" a "none" -->
<p>© <codexexempla>, 2007</p>
</div>
Y ahora hago caso a los comentarios en gatos.css:
#encabezado_impresion {
display: none;
}
#pie_impresion {
display: none;
}
Listo.
He includo una imagen en la cabecera para mostrar las posibilidades de un estilo de impresión, pero se debe ser prudente con este recurso. Todo aquello que se incluya en la página aumenta su peso, no sólo por las líneas de código adicionales, sino porque en la página en pantalla se cargan todos los elementos añadidos. Si se incluyen muchas imágenes, el peso final de la página puede resultar inaceptable. Además, aunque no es necesario añadir un texto alternativo desde el punto de vista del usuario, es necesario si se quiere que la página valide. He incluido alt=" ".
Ésta es la CSS definitiva para pantalla:
/* ETIQUETAS MODIFICADAS*/
* {
padding: 0px;
margin: 0px;
}
body {
color: #333;
background-color: #E9E9E9;
}
#contenido p {
margin-bottom: 15px;
}
#pie p {
padding-top: 20px;
}
#navegacion p {
width: 180px;
height: auto;
color: #630;
background-color: #FFF;
border: 1px solid #630;
padding: 5px;
margin-bottom: 2px;
}
h1 {
color: #630;
background-color: transparent;
width: 640px;
border-bottom: 2px solid #630;
font-size: 150%;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 10px 0 15px 0;
}
h2 {
width: 192px;
border-bottom: 2px solid #630;
font-size: 125%;
font-family: Georgia, "Times New Roman", Times, serif;
padding-bottom: 3px;
margin: 10px 0 5px 0;
}
option {
padding-left: 5px;
}
ul {
margin-bottom: 15px;
}
li {
margin: 0 0 10px 60px;
list-style-position: outside;
list-style-image: url(../imagenes/boliche.gif);
}
a:link, a:visited {
color: #C56004;
background-color: transparent;
font-weight: normal;
text-decoration: none;
}
a:hover, a:active {
color: #C56004;
background-color: transparent;
font-weight: normal;
text-decoration: underline;
}
/* CAPAS */
#contenedor {
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #333;
background-color: #FFCA95;
background-image: url(../imagenes/cuerpo.jpg);
background-repeat: repeat-y;
}
#encabezado {
width: 900px;
height: auto;
}
#encabezado_impresion {
display: none;
}
#navegacion {
width: 200px;
height: auto;
color: #630;
background-color: transparent;
float: right;
margin: 0 0 10px 10px;
margin-right: -8px;
}
#contenido {
width: 845px;
height: auto;
color: #630;
background-color: transparent;
padding: 10px 20px;
}
#pie {
width: 900px;
height: 100px;
text-align: center;
color: #630;
background-color: transparent;
background-image: url(../imagenes/pie.jpg);
background-repeat: no-repeat;
}
#pie_impresion {
display: none;
}
/* PSEUDOCLASES Y CLASES */
a.barra:link, a.barra:visited {
color: #C56004;
background-color: transparent;
font-weight: normal;
text-decoration: none;
}
a.barra:hover, a.barra:active {
color: #C56004;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
.caja {
width: 100%;
color: inherit;
margin-top: 3px;
}
.sellos {
color: #630 !important;
background-color: #FFF !important;
font-weight: bold !important;
padding: 3px !important;
border-top: 1px solid #630 !important;
border-bottom: 1px solid #630 !important;
text-decoration: none !important;
}
Y ésta la definitiva para impresión:
/* ETIQUETAS MODIFICADAS*/
* {
padding: 0pt;
margin: 0pt;
}
#contenido p {
margin-bottom: 10pt;
}
h1 {
color: #630;
background-color: transparent;
width: 100%;
border-bottom: 2pt solid #630;
font-size: 150%;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 10pt 0;
}
ul {
margin-bottom: 10pt;
}
li {
margin: 0 0 10pt 1cm;
list-style-position: outside;
list-style-image: url(../imagenes/boliche.gif);
}
/* CAPAS */
#contenedor {
margin: 1cm 2cm 2.5cm;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
}
#encabezado {
display: none;
}
#encabezado_impresion {
margin-bottom: 5pt;
}
#navegacion {
display: none;
}
#contenido {
color: #000;
background-color: #FFF;
}
#pie {
display: none;
}
#pie_impresion {
font-family: Arial, sans-serif;
font-size: 90%;
text-align: center;
padding-top: 10pt;
border-top: 2pt solid #630;
}
Y he aquí el resultado —de nuevo Archivo → Vista preliminar…—: un sólo código XHTML y dos versiones, una ajustada a cada medio.
Esto es sólo el principio. Para terminar ya de redondear la obra, deberíamos incluir junto a cada enlace la URL a la que hace referencia, dado que el usuario al imprimir el documento ya no puede seguir el hipervínculo. La forma de hacerlo sería utilizando el pseudoselector :after y la declaración content, de esta manera:
#contenido a:link:after, a:visited:after {
content: "(http://www.gatadas.org/"attr(href)")";
}
Este estilo incluiría detrás de cada vínculo la URL correspondiente entre paréntesis. Hay que indicar que el contenido generado sólo está soportado por Netscape 6 y superior, Mozilla/Firefox y Opera 7 y superior.
Además de todo esto, CSS 2.1 para medios de impresión permite controlar propiedades como los saltos de página o el comportamiento frente a líneas huérfanas o viudas.
Éstas son mis recomendaciones a la hora de crear una CSS para impresión:
Y ahora sí, ya no hay excusa para no dar una buena impresión.
