Imprimir webs: menuda tarea
Hoy, después de un buen rato retocando una página para imprimirla correctamente, me ha dado por simplificar el proceso de impresión para las entradas de este blog, aunque dudo que nadie se pretenda imprimir nada de aquí, pero es que no me gustaría ver a nadie pasar por lo que yo he pasado esta tarde con esa página.
Debería haber titulado la entrada cómo dar formato de impresión en blogger/blogspot o cómo imprimir en blogger/blogspot...
La cuestión es que, con lo fácil que es, no sé ni por qué Google no lo ha implementado en blogger/blogspot, aunque sea como un Widget, ni la gente lo hace normalmente en sus páginas web. Cierto que hay muchas que lo hacen, y lo hacen genial, pero la costumbre general es olvidarse de el formato de impresión de la página y dejar que el visitante lidie con ello.
Es bien fácil, aunque, claro, tener que hacer ingeniería inversa de la plantilla de Blogger, lleva su tiempo.
He aquí el procedimiento que yo he seguido para ocultar lo que no quiero que salga impreso y el formateo posterior.
En mi caso partícular, con la template que yo uso, añadir el CSS siguiente, que oculta todo excepto la entrada y sus comentarios y/o enlaces externos (trackback):
/* #################### PRINT ######################## */
@media print{
.noprint, .navbar, .post-feeds, .feed-links, .blog-pager, .print_icon, .comment-footer{
display:none!important;
}
*{
color: #000000!important;
font-size: 10pt;
background-color: transparent!important;
}
.blog-posts, #main-wrapper{
width:100%!important;
height:auto!important;
overflow:visible!important;
}
pre{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
}
/* #################### PRINT ######################## */
Por último, un icono para imprimir en cada entrada del blog, su estilo CSS y el código HTML:
.print_icon{
margin-top: -15px;
float: right;
margin-right: 25px;
}
El código del icono hay que ponerlo (en mi plantilla, aunque en el resto será parecido) entre las dos líneas marcadas en negrita.
<h2 class='date-header'><data:post.dateHeader/></h2>
<div class='print_icon'><a href='javascript:window.print();'><img alt='Imprimir / Print' src='http://img10.imageshack.us/img10/7421/printt.gif' title='Imprimir / Print'/></a></div>
</b:if>
El icono de imprimir no sé si tiene copyright. Lo he encontrado por la web y lo he modificado para que sea transparente. Si alguien tiene los derechos ya lo siento :(
Eso sí, esta entrada tiene su paradoja, ya que, al estar usando el tag <pre> para mostrar el código HTML, no puede ser imprimido correctamente, pero es que en HTML no hay una manera de hacer ajuste de línea para un tag <pre>, que para eso es el tag utilizado para texto preformateado.
Se puede hacer con estos hacks que acabo de encontrar aquí:
http://www.longren.org/wrapping-text-inside-pre-tags/