Lo hice y lo entendí

El blog de Vicente Navarro
07 nov

Hojas de estilo CSS para imprimir

Hace unos días patata dijo en un comentario que le gustan tanto algunos de los artículos de este blog que se los imprime, pero que le quedan muy mal y que si podría poner alguna hoja de estilo para imprimir. A cambio, yo no puedo hacer menos que agradecer tales halagos atendiendo su petición, ya que, por otro lado, es algo muy fácil de hacer, siempre y cuando el HTML esté muy estructurado y no se mezcle contenido con estilo, algo que muchas veces se tiende a hacer, especialmente si se usan herramientas automatizadas de creación de páginas web. Yo procuro evitarlo, aunque reconozco que en ocasiones muy determinadas y concretas lo hago.

El HTML está para el contenido y el CSS para el estilo. Idealmente, el HTML no debería de tener ninguna referencia a colores, fuentes, tamaños, alineamiento del texto, etc. Eso nos permite cambiarle muy fácilmente la hoja de estilo y tener otra página de aspecto radicalmente distinto pero con el mismo contenido. Alguna vez le querido explicar esto a alguien y me ha resultado muy fácil hacerlo apoyándome en CSS Zen Garden: The Beauty in CSS Design, una página en la que partiendo del mismo contenido, multitud de autores le dan un aspecto radical y sorprendentemente distinto únicamente cambiando el CSS, la hoja de estilo.

Para especificar una hoja de estilo diferente para impresión, deberíamos de tener en la cabecera del documento HTML (entre <head> y </head>) una entrada de CSS para el diseño en pantalla (media="screen") y otra para el diseño para imprimir (media="print"):

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Podemos consultar los tipos de media que podemos usar en el estándar CSS 2.1, capítulo Media Types. Vemos que también existe el media handheld para especificar hojas de estilos adecuadas para PDAs y teléfonos móviles.

Para la hoja de estilo de impresión de este blog, yo he decidido intervenir lo mínimo posible. Únicamente escondo todos los elementos que no deberían aparecer en la página impresa: los comentarios, el formulario para introducir comentarios, las cajas laterales, los enlaces de navegación (entrada anterior, entrada siguiente), etc. e intervengo mínimamente en un par de aspectos más.

Para empezar, oculto los elementos indeseados así:

#elementoaocultar {
visibility: hidden;
overflow: hidden;
width: 0px;
height: 0px;
}

Especifico una fuente sans-serif para el documento, ya que no me gustan nada las serif para contenidos de carácter técnico:

body {
font-family: sans-serif;
}

Y finalmente, indico que sólo cuando la página se vaya a imprimir (@media {}), que no saque los enlaces en azul y subrayados ya que sobre papel no son necesarios:

@media print {
a:link, a:visited {
text-decoration: none;
color: black;
}
}

Lo más adecuado sería poner “color: inherit;” por si las fuentes de la página no son negras, pero con Internet Explorer (¡el 7!) no funciona bien, como es tan habitual con este navegador y el estándar CSS.

Y ya está. He decidido no alterar más elementos. El resto de estilos se toman de la hoja de estilos que tiene por defecto el navegador (CSS 2.1: Default style sheet for HTML 4), que normalmente está muy bien para imprimir contenidos. Además, si usamos Firefox, podemos crear y editar el fichero userContent.css situado en el directorio chrome dentro del directorio del perfil de Firefox para alterar todo lo que queramos de la hoja de estilos de por defecto.

Por ejemplo, si creamos un fichero userContent.css con este contenido:

body {
background: yellow;
}

todas las páginas que visitemos y que no hayan definido un color o imagen de fondo tendrán un llamativo color amarillo de fondo. Por tanto, quitando las pocas cosas de body, a:link y a:visited que van predefinidas, el resto se puede modificar a gusto del usuario personalizando el userContent.css si trabajamos en Firefox.

Además, para poder probar el nuevo CSS, he cambiado un poco el código PHP que añade la hoja de estilo para que acepte el parámetro “css” en la URL (http://pagina/?css=hojadeestiloausar.css) que nos permita cambiar fácilmente el CSS a usar:

<?php if ($_GET['css']!="") ?>
  <link rel="stylesheet" href="<?php bloginfo('template_directory');echo '/'.$_GET['css']; ?>" type="text/css" media="screen" />
<?php } else { ?>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css" media="print" />

Nota: los bloques <pre></pre> como el anterior pueden aparecer cortados al imprimir, pero eso va en la naturaleza de estos bloques.

He decidido dejar este código indefinidamente, de modo que si quieres ver una entrada con la plantilla para imprimir (o lo que es lo mismo, prácticamente sin ningún formato especial), simplemente pon:

?css=print.css

al final de la URL de la entrada en cuestión. Si hay un ancla al final de la URL, hay que ponerlo antes del ancla: http://pagina/?css=print.css#ancla.

Si nos fijamos, al ver una página con esta hoja de estilos en pantalla, los enlaces salen en azul y subrayados, pero si imprimimos la entrada (o si hacemos una vista previa de impresión), veremos que los enlaces se confunden con el resto del texto gracias al @media que hemos puesto en la hoja de estilo.

Sobre la vista previa de impresión, me he dado cuenta de que al activarla, tanto en el Firefox para Windows, como en el Iceweasel para Linux salen las letras amontonadas donde hay etiquetas:

Vista previa de impresión en Firefox

pero luego al imprimir se imprime bien, sin amontonamiento de letras.

Para aprovechar este parámetro “?css=“, he pensado incluso en poner el típico enlace de “Versión para imprimir” en cada entrada, pero Google la indexaría y luego se dedicaría a mostrar a la gente la versión sin formato, como muchos habréis visto que ocurre con muchas páginas, especialmente de foros. Así que el truco del “?css=print.css” queda entre vosotros y yo. ¡No se lo contéis a nadie!

:wq

Entradas relacionadas

8 Comentarios a “Hojas de estilo CSS para imprimir”

  • abaca dice:

    Muy interesante. Hablando de secretos, no tendrás huevos de pascua por ahí ¿verdad? ;-)

  • @abaca Jeje. Puede que sí, y puede que no :P

  • jhuesos dice:

    Muy muy interesante. Cada dia aprendo algo nuevo leyendo tu blog.

    Yo soy uno de los desagradecidos usuarios que te leen por RSS y no se pasan a escribirte comentarios. Pero que sepas que aprendemos mucho de tu blog y que yo intentare pasarme mas y escribirte comentarios quejandome, diciendo las cosas que no me gustan, los cambios que quiero que hagas en tu pagina, etc etc tec… Es broma XD

    un saludo

  • @jhuesos ;-) ¡Muchas gracias! ¡Me alegro de que las entradas te parezcan interesantes!

    Respecto al RSS, procuro dejar la entrada completa para el RSS siempre que es posible. Sólo la corto cuando queda demasiado larga para la página principal del blog. Con eso quiero decir que me parece fantástico que también sigas el blog por RSS. :D

  • Sagman dice:

    Si, aprendemos muchas cosas. Yo aprendí mucho sobre las VIA EPIA (Ahora está muy cerca la adquisición de una :) ) . me enteré sobre el problema de Ubuntu sobre los HD y lo arreglé, etc.. :D . Si es que Vicente es genial escribiendo cosas :)

    Por cierto, molaría un boton para pasar el post a PDF :) . Así podemos tener tus excelentes escritos en el HD ^^

  • @Sagman ¡Muchas gracias! Respecto al PDF, cada vez me lo ponéis más difícil, ¿eh? 8O

    En cualquier caso, yo pienso que ahora que hay hoja de estilo para impresión, no es muy necesario, ya que poniendo una impresora virtual de PDFs (sea Linux o Windows) puedes convertirlos a PDF muy fácilmente.

    Es una buena idea para una nueva entrada, ya veremos si sale algo ;-)

  • Wolf777 dice:

    Saludos como estas tu blog esta muy interesante, quiciera consultarte algo que posiblemente no sea de mucha complejidad dado el avance que tienes con Css. Hice un Css solo para impresión pero algunas franjas de color como background no aparecen en la impresión, intente con imagenes gif’s pero tampoco a funcionado. Que solucion tu empleas en esos casos???

    Gracias de antemano por tomarte la molestia de atender mi consulta.

    Wolf777

  • Wolf777 Me temo que no puedo ayudarte. Nunca he probado a hacer tal cosa. ¿Has probado en otra impresora que no sea con la que estás probando ahora?

Tema LHYLE09, creado por Vicente Navarro