media=”print” (actualizado)

15/nov/2005 8

Es muy difundido hoy en día el CSS dentro del diseño de sitios web, y existe una gran exigencia por parte del usuario para que se puedan ver bien sus sitios en las más diferentes plataformas y los ya innúmeros browsers. Un importante medio que no es muy utilizado, y que sin embargo es muy fácil de ser aplicado para un resultado óptimo, es el de crear una hoja de estilos exclusivamente para que la página, y los ítems que desees sean impresos de la mejor forma posible, permitiendo al usuario ahorrar tinta y mejorar la visualización del contenido. Para esto, es necesaria una hoja de estilos nueva y el llamado respectivo entre <head> </head>:

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

Lo primero a realizarse es duplicar la hoja de estilo del sitio, hecha para la distribución del contenido para pantallas (media="screen"). No queremos trabajar doble, escribiendo todo el código CSS nuevamente. A partir de ahora, muchos valores deben ser reemplazados de px o em a cm y pt. Así que debes tener claro los tamaños y tipos de conversiones a ser realizadas.

Un importante paso es tener claro qué es lo que queremos imprimir. Si todo el sitio, o solamente un artículo y el encabezado, o el imagotipo + menues + contenido… enfin, queda en ti saber cuál es el fin que persigues. En este artículo presentaré algo general, para que puedas profundizar y customizar tu mismo código como te dé la gana.

Teniendo claro qué mostrar o qué no quiero que se imprima, a desmenuzar el código. El principal atributo será display: none; el que permite esconder lo que lo contiene, pero sin perder el espacio que lo soporta. Comencemos con un menú:

div#menu {
width: 300px;
color: #333;
font-size: 11px;
background: #999;
}

Si queremos que el menú desaparezca:

div#menu {
display: none;
}

Es necesario hacer esto con todo lo que no se requiere que se vea impreso. Se debe cuidar tb la diagramación, mientras mejor fluya el texto (más si el texto es largo) mejor. Para un mejor orden, se puede justificar el texto (text-align: justify;) y las imágenes se pueden posicionar usando float: left; o float: right;

También será necesario darle un pequeño margen a los lados, para que el contenido no se vea muy a corte. 10% por cada lado será suficiente. Otro punto importante es el fondo, no queremos que se imprima el color o pattern que corresponda por lo que en body:

body {
background: transparent;
}

Sobre el tema de los links, a veces es importante que se sepa que existe un enlace en cierto texto, por lo que se le aplica un simple código:

a:link, a:visited {
color: #666;
font-weight: bold;
text-decoration: underline; 
background: transparent;
}

Esto nos da un color más suave que el resto del texto (si el texto es negro #000) y un underline para mayor diferenciación.

Un buen truco y sólo en browsers que soportan bien CSS2, es el siguiente código:

a:after {
content: " ( http://www.csslab.cl " attr(href) " ) ";
font-size: small;
}

Nuevamente, esto funciona para Firefox (Mozilla) y Netscape. Lo que hace es desplegar, luego del link, la URL entre paréntesis [en este caso, CSSLab (http://www.csslab.cl) ].

Creo que eso es todo. Suerte y no gasten mucha tinta.

Links:

Comentarios

  1. Juglar :: Definir la impresión de la web :: January :: 2005 [#]

    […] Printing a Book with CSS: Boom! CSS Lab » media=”print” Ref: Bitácora de webmaster Menéame « Anterior: Selectores CSS Siguiente: Layouts CSS» […]

  2. diego [#]

    Me parece bien el articulo, pero no me funciona siempre, he tenido un problema con una imagen de fondo que al momento de mandar la vista preliminar no aparece la imagen que tiene de fondo la pagina, esto sucede para el Mozilla y para el Internet Explorer, en ambos caso no muestra la imagen de fondo. Puedes decirme cual es el probelma??? Por tu atencion al comentario gracias.

  3. CSSLab Admin [#]

    postea tu codigo, o donde este tu codigo en los foros mejor, asi puedo echarle una mirada para darte una respuesta mejor. asi a ciegas, se hace dificil adivinar. saludos.

  4. » Pronto… | CSSLab [#]

    […] media="print" […]

  5. CSSLab » Tip Precoz 2: combinando @media [#]

    […] media type especifican el soporte al cual apunta la hoja de estilos definida: pantalla (screen), papel (print), móviles (handheld), etc. Algunas propiedades CSS están diseñadas para medios […]

  6. pucheta [#]

    buenas, tengo el siguiente codigo:

    @media print {
    .oculto {display:none}
    }

    que al pulsar un boton evita imprimir determinadas cosas. lo que necesito es asociar un checkbox para seleccionar alguna imagen que no quiero que se imprima ¿tienes idea de como puedo hacer??

  7. imprimir solo imagen [#]

    […] […]

  8. Pseudo contenido con CSS ↝ CSSLab [#]

    […] en un muy antiguo artículo proponía su uso en hojas de estilos para impresión media="print" donde para mejor accesibilidad a todos los links se entregara como información impresa la URL al […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab