Cómo definir estilos distintos para la impresión de una página web en la impresora. Te mostramos un par de técnicas distintas, aplicando los estilos en CSS en archivos independientes o usando @media.
A veces necesitamos que nuestra página se imprima en una impresora de manera distinta a como se visualiza en la página web. Por ejemplo, si en una página se muestra un informe con datos que se desea guardar impreso en papel, probablemente deseemos que en la impresora se muestre con una fuente más pequeña, para que se pueda condensar todo el contenido de manera que quepa en un folio. También es posible que en los informes deseemos que aparezca el logo de la compañía centrado en la cabecera del informe, mientras que ese logo de la empresa en la pantalla aparece en la cabecera con la barra de navegación.
Cualquier cambio que necesites aplicar al estilo de una página a la hora de imprimir el documento lo puedes aplicar también usando el lenguaje CSS. En resumen, las Hojas de Estilo en Cascada sirven para definir el aspecto de la página, y estos estilos se pueden declarar de manera distinta a la hora de imprimir un documento HTML y a la hora de verlo en el navegador.
Cómo enlazar con una hoja de estilos CSS que afecte solamente a la impresión
Como ya sabemos, en CSS se puede definir estilos en un documento externo, de esta manera:
<link href="estilos.css" rel="stylesheet" type="text/css">
Con esto suponemos que tenemos un archivo llamado estilos.css, que está en el mismo directorio de la página, donde se definen los estilos del documento.
Las diferentes maneras de incluir estilos en una web están comentadas en nuestro Manual de CSS.
De modo parecido, podemos asignar una hoja de estilos externa para definir el aspecto cuando un usuario imprime la página web:
<link href="estilos_impresion.css" rel="stylesheet" type="text/css" media="print">
Lo único que cambia es el atributo media="print", que indica que esta hoja de estilos es sólo para cuando se va a imprimir la web.
Ejemplo de dos hojas css distintas para impresión y visualización
Ahora veamos un ejemplo de página web que tiene dos hojas de estilo distintas, una para cuando se está en el navegador y otra cuando se va a imprimir.
Tenemos un HTML que incluye dos hojas de estilos y dispone varias capas, que luego maquetaremos o posicionaremos con CSS.
<html>
<head>
<title>informe superpuzzles</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<link rel="stylesheet" type="text/css" href="estilo_imprimir.css" media="print">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
Superpuzzles
</div>
<div id="logo">
<img src="logo.gif">
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vínculo 2</a>
</ul>
</div>
<div id="derecha">
<div id="principal">
Contenido de un posible informe
</div>
</div>
</div>
<div id="pie">
© 2005 DesarrolloWeb.com
</div>
</div>
</body>
</html>
Como se ha podido ver en el HTML anterior, se han incluido dos archivos CSS con estilos. El primero es estilo.css, que es el estilo que se utilizará al visualizar la página en el navegador. El segundo link con una hoja de estilos CSS es estilo_imprimir.css, que definirá el aspecto de la página al imprimirla (fijarse en el atributo media="print" de la etiqueta).
Los códigos CSS son muy parecidos, simplemente hemos hecho un par de cambios para ilustrar lo que venimos diciendo. En la visualización de la página no se mostrará la capa con id="logo". Por su parte, al imprimir la página no se mostrará la barra de navegación de la izquierda y los contenidos centrales se mostrarán en todo el ancho del espacio de impresión. Tampoco se mostrará la capa id="cabecera".
El código CSS de visualización en navegador
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#logo{
visibility:hidden;
display: none;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #d0d0ff;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffff;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}
#principal{
background-color: #ffffff;
padding: 0 0 0 20px;
width: 580px;
float: left;
}
#principal table{
background-color: #ffffff;
width: 580px;
border: 2px solid #cccccc;
font-size:10pt;
}
El código CSS que se utilizará para la impresión de la página
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#contenedor{
text-align: left;
width: 600px;
margin: auto;
}
#cabecera{
visibility:hidden;
display: none;
}
#logo{
visibility:visible;
display: block;
margin-left: 20px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
visibility:hidden;
display: none;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}
#principal{
background-color: #ffffff;
padding: 0 0 0 20px;
width: 600px;
float: left;
}
#principal table{
background-color: #ffffff;
width: 600px;
border: 2px solid #cccccc;
font-size:10pt;
}
Si queremos ver cómo se imprimiría la página, pero sin necesidad de utilizar la impresora (para no gastar papel ni tinta o si no tenemos impresora), podemos acceder al menú Archivo - Vista preliminar de nuestro navegador. También podemos imprimir en un PDF y luego abrir ese PDF.
Estilos distintos para impresión con @media
La técnica anterior puede ser útil para mantener separados los estilos de impresión y los estilos generales. Sin embargo, si lo deseas, también puedes mantener una única hoja de estilos en la que tengas ocasionalmente unas modificaciones en el CSS que solamente se aplicarían en la impresión del documento.
Para ello podemos usar la regla @media de la que ya hemos hablado anteriormente. Así podríamos definir un conjunto reglas de estilos que afectarían solamente a la impresión:
@media print {
body {
font-size: 11pt;
background-color: #fff;
}
table {
boder: none;
}
}De ti depende cómo organizar tu CSS, si en archivos independientes o si lo prefieres todo unido en el mismo archivo, usando @media cuando necesites especificar estilos para un medio concreto.
Conclusión sobre estilos CSS para impresión
Hemos podido aprender dos variantes de trabajo para usar estilos específicos para impresión. Esperamos que este taller de css para imprimir haya sido de utilidad.
Para acabar os ofrecemos un par de enlaces. El primero es un taller en el que se explica cómo evitar, con CSS, que una página se imprima. El segundo es cómo definir saltos de página para la impresión del documento.
Ana Alvarez Sanchez
Diseñadora y escritora en el ámbito de la web y las aplicaciones, apasionada del...