Y el browser previamente verifica si la página tiene algún formateo especial para que la impresión no salga como se está viendo en el browser… entonces, si no hemos preparado nuestra página para que la impresión salga disitinta a como la vemos: pues simplemente se imprimirá lo que estamos viendo.
Pero, cómo preparamos a nuestra página para que imprima de una manera más profesional?
osea, digamos que mi página está llena de colores + menúes + una cabecera que no me interesa que salga en la impresión… y que finalmente sólo quiero imrpimir el contenido principal… cómo hago?
en realidad es algo muy simple: todo lo que tenemos que hacer es crear una hoja de estilos adicional con el atributo media=”print”. Entonces, en esta nueva hoja es donde pondremos cómo queremos que se vea nuestra página al momento de imprimir… y también podemos definir qué elementos no queremos que se muestren. Vamos al ejemplo.
Digamos que tengo una página exageradamente llena de colores, como vemos ahora:
vean su código:
<html> <head> <title>Friendly Print</title> <link href="ForScreen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="ForPrint.css" rel="stylesheet" type="text/css" media="print" /> </head> <body> <form id="form1" runat="server"> <div id="container"> <div id="header"> <div id="header-logo"> <img src="images/excel.png" /> </div> Este es algún texto en la cabecera </div> <div id="sidebar"> <h3> Menú lateral </h3> <ul style="list-style-type: none"> <li><a href="aaa.aspx">Link 1</a></li> <li><a href="aaa.aspx">Link 2</a></li> <li><a href="aaa.aspx">Link 3</a></li> <li><a href="aaa.aspx">Link 4</a></li> <li><a href="aaa.aspx">Link 5</a></li> <li><a href="aaa.aspx">Link 6</a></li> <li><a href="aaa.aspx">Link 7</a></li> <li><a href="aaa.aspx">Link 8</a></li> <li><a href="aaa.aspx">Link 9</a></li> <li><a href="aaa.aspx">Link 1</a></li> </ul> </div> <div id="main"> <h3> Lorem Ipsum </h3> <p>Lorem Ipsum is simply dummy text of the…(reducido)</p> <p>Lorem Ipsum is simply dummy text of the…(reducido)</p> </div> <div id="footer"> <img src="images/tools_for_excel.png" /> </div> </div> </form> </body> </html>
dense cuenta que esta página usa dos hojas de estilo:
<link href="ForScreen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="ForPrint.css" rel="stylesheet" type="text/css" media="print" />
ForScreen.css formatea la página de modo que sea así como la ven (llena de colores), este es su código:
body { text-align: center; } #container { width: 700px; margin: 0px auto; text-align: left; background-color: #fff000; } #header { background-color: Black; color: White; } #header-logo { padding: 10px } #sidebar { width: 200px; padding: 10px; float: left; background-color: orange; } #main { margin-left:225px; background-color: green; } #footer { clear : both; background-color: red; text-align: center; padding: 10px; }
Pero ForPrint.css tiene como objetivo quitar algunos estilos y elementos para que la página se imprima más limpia. Un truco para crear esta hoja de estilos es copiar la anterior hoja de estilos e ir quitando los estilos que no se necesitan… ir ocultando otros elementos y ir formateando otros estilos.
Una vez dejadas claras las cosas, sigamos. Alguien no ha entendido? levante la mano!! nadie.
Si sólo me interesa imprimir el contenido central (la parte verde) debo especificar eso en la nueva hoja de estilos. Han pasado 10 minutos y yo ya copié y modifiqué la hoja ForScreen.css, de tal manera que el resultado final es:
#header { color: White; } #sidebar { display: none; } #footer { clear : both; text-align: center; }
Tan simple como lo ves. He borrado casi todos los estilos y he modificado ligeramente algunos… para que mi impresión me muestre sólo el contenido principal, con una imagen en la cabecera. Hagn un preview con su browser favorito y vean cómo se ve ahora:
Si no quisieras ver el pie de página, simplemente mofificarías el correspondiente estilo de esta manera:
#footer { display: none; }
Lo mismo para la cabecera.
Vamos a dar algunos tips adicionales sobre este tema en un próximo post
;)
2 comentarios:
muchas gracias por publicar esta entrada, me fue de gran ayuda, pero como dijera el dicho, "limosnero y con garrote",
la unica duda es que si con el mismo CSS puedo definir la orientacion de la hoja al imprimirlo ya sea vertical u horizontal?.
gracias
Hola agustin012,
Yo diría que aún no hay una solución con css que funcione sobre todos los browsers.
Entonces, un artificio para imprimir horizontal o vertical "a lo seguro" es previamente generando un archivo pdf de esa página, y a ese pdf generado le configurarías la orientación que deseas.
Saludos.
Publicar un comentario