Haciendo hojas de estilo CSS para impresión
Este creo que va a ser el cursillo de CSS más fácil que voy a contarles: cómo hacer hojas de estilo en cascada (CSS) para impresión. Algo ideal para tu weblog, sitio con textos, etc. Es fácil, sólo hay que tener en cuenta tener ya un sitio con CSS, sino, tomará un poco más trabajo pero también los sitios que no tienen CSS pueden cambiar radicalmente con unas directrices.
Primero, comprender cómo funcionan las hojas de estilo
Las hojas de estilo, tienen una función especial llamada “media”. Le permite saber a cualquier dispositivo qué hoja de estilo usar. Si miran el código fuente de esta página notaran que tengo una instrucción de XHTML que llama a mi hoja de estilos para imprimir:
<link rel="stylesheet" type="text/css" media="print" href="http://www.minid.net/print.css" />Como ven, he creado dos archivos .css. Uno que tiene media="screen" y otro que tiene media="print". El primero sirve para verse sólo en el navegador y el segundo sólo cuando se imprime o cuando desde el navegador elijes la opción previsualizar impresión
.
Esto sirve simplemente para diferenciar diferentes hojas de estilos. Una ventaja para nosotros que usamos código estándar para mantener nuestros contenidos y darle la oportunidad a la gente de utilizar múltiples opciones. Cada opción está beneficiada por una hoja de estilos especial.
En este caso, vamos a cubrir las cosas básicas para experimentar con las hojas de estilo de impresión. Estas no son muy extensibles, pero permiten realizar cosillas interesantes.
Paso básico: duplicar la plantilla original y renombrarla a print.css
Este es un paso básico. Una vez que terminemos de toquetear nuestra plantilla de CSS de nuestro weblog, bastará con salvar como
el archivo con un nombre nuevo (print.cs por ejemplo) en la carpeta donde está el archivo CSS para el navegador.
Con esto tenemos dos archivos iguales pero nombrados de forma diferente. Luego en print CSS cambiaremos y eliminaremos muchos valores. Pero antes en nuestras plantillas maestras de posts en Blogger, MT o Wordpress tenemos que apuntar el camino a ese archivo print.css que salvamos y luego subimos a nuestro hosting.
En la plantilla de Blogger o MT pon:
<link rel="stylesheet" type="text/css" media="print" href="http://www.minid.net/print.css" />Donde href="http://www.minid.net/print.css" cámbialo por la dirección exacta de tu archivo print.css, por ejemplo: href="http://atalaya.blogalia.com/print.css". Luego, actualiza tu weblog con una reconstrución total (esto para que el cambio surta efecto en todas las páginas) y con eso ya podremos comenzar a experimentar editando el archivo print.css y subirlo al servidor para ver los cambios.
Editando el archivo print.css
Recuerda, la propiedad display: none será tu amiga de ahora en más. Los valores pt, cm y mm serán tus colegillas de turno, así que acostumbrate a no utilizar ni px, em ni pc porque son valores especiales para representar en pantalla, no en papel que es nuestro caso ahora.
Ahora, el paso básico para editar la plantilla es plantearse qué es lo que debe y no debe aparecer en la página cuando se imprima. En mi caso, no me hace falta que aparezca toda esa barra gris que tienes a tu izquierda en la pantalla. Tampoco necesito que aparezcan el logo de minid.net, ni el pie de cada página… sólo quiero que aparezca el post; con buena letra; los comentarios y las imágenes que publique en el post también centradas.
Para ello, debemos utilizar el comando display: none en todas las cosas que queremos que desaparezca. Un ejemplo claro, en mi weblog, toda la barra gris está bajo una <div> llamada menu
, sobra con ponerle la instrucción y desaparecerá cada vez que previsualicemos el documento en el navegador antes de imprimir (una buena forma de ahorrarse tinta de la impresora probando):
div#menu {
width: 291px;
background-color: #F5F5F5;
background-image: url(/images/bg_menu.gif);
background-position: bottom;
background-repeat: no-repeat;
padding: 40px 0 130px 0;
float: left;
}Ahora limpiaremos todos las propiedades de div#menu y lo reduciremos a esto:
div#menu {
display: none;
}Hacemos refrescar (F5 en el navegador); previsualizamos en nuestro navegador y veremos que el menu no sale… ¡magia!. Ahora debemos ir con cuidado e ir quitando todo lo que no queremos que aparezca. Ahora la página se imprimirá con algunos márgenes que quedan. Debes quitar todas las propiedades de margenes de las divs y tablas. Todo tiene que fluir suavemente por la horizontalidad de la página.
Mientras vamos probando
Mientras subas un cambio de print.css a tu servidor y sobre-escribas tu archivo, siempre debes hacer un refresco de página en tu navegador y luego buscas la previsualización para impresión que trae el mismo.
Haz esto porque sino no verás los cambios cada vez que te olvidez de este paso.
Realizar reemplazo de algunos valores, como por ejemplo las tipografías. Algunas tipografías son feas cuando se imprimen a papel, yo utilizo las tipografías serif para impresión, dan una buena sensación en mi opinión. Además como las tipografías las utilizo con valores em lo cambio por pt y voy probando hasta tener un tamaño ideal para leer.
Poco a poco vamos limpiando y cambiando valores en la plantilla print.css. Por lo general ésta queda reducida a unas pocas líneas de CSS. Mientras menos mejor, recordad eso.
Resumiendo y algunos truquitos
¿Vieron lo simple que es esto? Es una pavada. No hay nada científico, ni dificil, sólo es reemplazar unos valores y quitar otros de una copia de plantilla de CSS. El resto es sólo experimentar para que todo quede bien en papel. Mira como ha quedado mi plantilla print.css es realmente pequeña comparada con la principal.
Un truquillo bueno, que aparezcan cosas cuando se impriman y que desaparezcan cuando se ven en pantalla.
Puedes poner en todas tus páginas un párrafo <p> con una clase class="hide" por ejemplo, y en la plantilla para ver en pantalla usas el display: none para esconder el párrafo cuando mires en pantalla, pero cuando imprimes ese párrafo aparece en el papel. De esta forma, puedes meter por ejemplo, la famosa frase de copyright en tus textos, o la licencia de Creative Commons.
Con éste método puedes esconder una <div> con una imágen de fondo blanco de tu logotipo, y hacerlo aparecer y acomodarlo en cualquier parte de la pantalla cuando sea para imprimir, pero esconderlo cuando se vea en la pantalla.
Ahora, si no has entendido, formula tus preguntas en los comentarios. Si entendiste algo, comienza a experiementar, verás que tus resultados serán automáticos y la gente se podrá por ejemplo imprimir tus historias, poemas o la tontería de turno que escribas… como esta 
¡Hasta otra!
32 Respuestas a la entrada “Haciendo hojas de estilo CSS para impresión”
Escrito por TOXICO
Julio 25th, 2004 at 3:28 am
¿Vista preliminar..? Si, como no
No me había dado cuenta (la verdad, no creo que mucha gente imprima alguna vez algo de lo que hay aquí), pero ahora, si visualizas un post y seleccionas la Vista preliminar (Archivo > Vista preliminar), podrás comprobar que únicamente se imprime lo est…
Escrito por argie01
Julio 25th, 2004 at 11:17 am
Gracias por minid por el cursito Está bueno
Escrito por alberto bastos
Julio 25th, 2004 at 12:47 pm
Aunque son contados los weblogs en que imprimir un post tiene sentido… me gusta la idea. Y mira que es rematadamente fácil.
Lo pensaré, lo pensaré.
Escrito por Juanjo
Julio 25th, 2004 at 1:44 pm
Yo, además del CSS, genero el HTML más sencillo y extraigo los enlaces numerándolos y mostrándolos al final.
De esta forma tenemos una versión en papel perfectamente legible.
Ejemplo:
Artículo
http://blackshell.usebox.net/archivo/245.php
Versión para imprimir
http://blackshell.usebox.net/print.php?id=245
Lo único que faltan son los comentarios.
Escrito por mini-d
Julio 25th, 2004 at 3:30 pm
Bueno, realmente si vale la pena o no imprimir algo escrito por un weblogger lo dejo a tu criterio. Yo por ejemplo, imprimo muchas cosas y me las llevo a la cama o me las letro mientras viajo en bus o metro.
Escrito por mini-d
Julio 25th, 2004 at 3:32 pm
Juanjo, si tienes un weblog con un código ordenado y bien separado en conceptos (CSS por un lado y XHTML) por otro no hace falta que generes ninguna página. Te ahorras un paso siempre.
Escrito por alberto bastos
Julio 25th, 2004 at 4:25 pm
Bueno, imagino que el hecho de imprimir anotaciones tendrá mucha relación con qué tipo de bitácoras se visitan.
En bitácoras técnicas o de actualidad, con anotaciones relativamente extensas si puede ser útil obtener una copia en papel. Pero si hablamos de blogs personales y variaciones de éstos, normalmente se trata de anotaciones cortas o de lectura rápida.
Escrito por Angel Moreno
Julio 25th, 2004 at 7:29 pm
Es un recurso muy importante, a lo mejor no mucho en weblogs, pero muy util con intranets…
Podemos cambiar radicalmente la maquetacion de una ficha o un listado de articulos, para así cuando se impriman, queden mas visibles, o mas enmarcados… Es un recurso muy util para evitar hacer algun informe..
Escrito por Juanjo
Julio 25th, 2004 at 8:57 pm
Tienes razón, Diego. Pero mi motivo para generar una página aparte (que uso un CSS especial) es porque veo interesante que se vean (valga la redundancia) los enlaces (no se pueden seguir en papel, pero si tenemos la referencia… genial :D).
Respecto a lo de imprimir o no artículos de una bitácora… en mi caso a veces escribo recetas o pequeñas guías que puede ser útil tenerlas en papel.
En cualquier caso es interesante desde un punto de vista de accesibilidad (la versión para imprimir se puede ver muy bien en una PDA, por ejemplo, con un navegador más limitado que el que podemos tener en una máquina de escritorio).
Escrito por xoan
Julio 26th, 2004 at 12:34 pm
Existen muchos métodos para hacer eso mismo de manera dinámica. Una referencia desde Logicola a un script de Sergi que los muestra al principio (cambiarlo y adaptarlo para que muestre la URL es sencillo).
A veces JS y DOM hacen maravillas (no hay que odiarlos tanto como se les odia, y darles una oportunidad :P)
Escrito por Garito
Julio 26th, 2004 at 4:15 pm
Hola a todos!
Despues de un tiempo reciclandome al XHTML y CSS2, he decidido dejar atras las chapuzas que nos hemos visto obligados a hacer (scripts raros y demas)
Asi pues estoy ansios porque Diego (hola!) siga “instruyendonos” en el noble arte del diseño y la usabilidad
Gracias, tio, y palante!!
Escrito por Garito
Julio 26th, 2004 at 4:16 pm
Hola a todos!
Despues de un tiempo reciclandome al XHTML y CSS2, he decidido dejar atras las chapuzas que nos hemos visto obligados a hacer (scripts raros y demas)
Asi pues estoy ansios porque Diego (hola!) siga “instruyendonos” en el noble arte del diseño y la usabilidad
Gracias, tio, y palante!!
Escrito por Milton Mazzarri
Julio 27th, 2004 at 1:24 am
Si por ejemplo deseo que las direciones de mis enlaces aparezcan en la version imprimible de mis documentos, simplemente recurro al CSS2 de la siguiente manera:
#content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; }Ahora bien, si los enlaces son internos en el sitio se puede recurrir a la propiedad CSS3.
#content a[href^="/"]:after { content: " (http://dreamweaver.webcindario.com" attr(href) ") "; }Espero sirva de algo la informacion…
Escrito por xoan
Julio 27th, 2004 at 10:36 am
¿Y la gente que usa IE? ¿Ese 95% de nada..?
¿Qué les decimos?
Sigo pensando que, por ahora, la solución más adecuada es JS y DOM, o en todo caso, PHP y hacer lo que hace Juanjo; pero CSS2 y CSS3 creo que aún debe quedar un poco aparcado para estos temas.
Escrito por Milton Mazzarri
Julio 28th, 2004 at 11:27 pm
Considero que Diego publico este artículo para hacer hincapie acerca de la usabilidad que puede darsele a las hojas de estilos en cascada en el desarrollo de presentaciones para otro medio distinto al de la pantalla, en este caso en particular, para impresiones. Simplemente hice una acotación en donde puede darsele respuesta al problema de la visualización de los enlaces en la vista de impresión usando CSS. En mi opinión no considero necesario invertir tiempo en desarrollar una página alternativa para la impresión, si esto lo podemos controlar desde una hoja de estilos, bienvenido sea.
Escrito por xoan
Julio 29th, 2004 at 3:21 pm
Ya, pero la usabilidad debe ir enfocada al usuario (en general). Cuando solo un 5 ó 6% de ese usuario ven los resultados de esa usabilidad, no creo que se pueda considerar como tal.
Está claro que esa respuesta es válida, incluso correcta, pero sólo cuando se pueda aplicar a un porcentaje considerablemente alto.
Escrito por Milton Mazzarri
Julio 30th, 2004 at 1:30 am
Estoy de acuerdo en que la usabilidad debe ser para los usuarios en general, pero fijate que simplemente con este artículo se esta aprovechando las ventajas del uso de las hojas de estilo en cascada en documentos bien estructurados (nada más), en ningun momento he reprochado al JS y DOM, solo mencione que si uno posee un documento bien estructurado y si se aprovechan las ventajas de que le ofrecen las hojas de estilo en cascada no deberia perderse tiempo en desarrollar un sistema que genere dinamicamente páginas de impresión. ¿No se si te das cuenta de mi punto de vista?.
¿Que el 95% de los usuarios usa un navegador antiguo, obsoleto que no reconoce realmente CSS2 y CSS3?, bueno, solo espero que esto vaya cambiando como ha pasado ultimamente, creo que los usuarios se estan dado cuenta de las ventajas que representan los navegadores “alternativos”, esta gente que en realidad se interesa en las inquietudes de los usuarios y si responde ante el desarrollo de soluciones a posibles bugs, ¡merecen apoyo!.
He leido en muchas ocasiones aca en minid que la gente que se cambia a Firefox por ejemplo, ya no quiere regresar a IE, Firefox ofrece muchas ventajas. Opera es excelente con el contenido.
Ahora bien, regresando al tema de IE, el hecho de que la mayoría lo use trae como consecuencia (en mi opinion) que en ocasiones como diseñador te ves limitado o con ciertas contradicciones, o te veas obligado a realizar ‘hack’ en tus hojas de estilos para que tus diseños en el “navegador de la gente” se vea bonito.
Lo que menos quiero es generar polémica con este asunto, aunque siempre la habrá, es como la constante guerra entre los sistemas operativos, ¿cual es el mejor?.
Escrito por Denken Ãber
Julio 31st, 2004 at 7:59 pm
Week-log
El “breve recorrido sobre los post de esta semana que me llamaron la atención” ™….
Escrito por Raul
Agosto 3rd, 2004 at 10:48 am
¿Vista preliminar..? ¿Cómo puedo activarla desde código…? En IExplorer, gracias.
Escrito por Ceklog » ¿Es posible separar el contenido de la presentación?
Agosto 15th, 2004 at 6:23 pm
[...] os CSS que podéis encontrar en esta dirección. Esto lo explicó minid hace unos días en un excelente artículo. Espero que quede clara la impor [...]
Escrito por Ceklog
Agosto 15th, 2004 at 8:23 pm
¿Es posible separar el contenido de la presentación?
Todos los que trabajan normalmente con páginas web saben que es posible saben que es posible, sin ir más lejos esta bitácora sepera el contenido (HTML o XHTML) de la presentación (CSS).
Podéis ver como queda esta web si le quitamos el archivo CSS (e…
Escrito por Claudio
Octubre 22nd, 2004 at 4:15 pm
ESTA MUY BUENO SU ARTICULO ..PERO
QUISIERA SABER COMO IMPRIMIR SIN QUE ME SALGA EL BENDITO CUADRO DE DIALOGO SELECCIONA IMPRESORA ,,YA QUE TENGO UNA IMPRESORA PREDETERMINADA..
Y ESO PARA QUE ME SIRVE? ..ES QUE ES PARA UN SISTEMA DE FACTURACION ONLINE DONDE NO SE PUEDEN DAR EL LUJO DE TIEMPO DE ESTAR LIANDO CON EL BENDITO CUADRO CUADRO DE DIALOGO…
GRACIAS POR ESCUCHARME
Escrito por juan pablo
Octubre 29th, 2004 at 5:22 pm
me parece que es solo para weblogs, esto se puede implementar para imprimir digamos una factura en un apel preimpreso.
gracias!!
Escrito por jonathan garcia
Octubre 29th, 2004 at 9:03 pm
esto esta buenisimo la impresi}on me gusta que haran despues de hacer esto gracias un beso a toda las nenas soy colombiano quiero conocer algunas nenas mi correo es boca2004a@hotmail.com
Escrito por Alex
Noviembre 11th, 2004 at 5:00 pm
Interesant xo llarga
Escrito por Eleniel
Diciembre 14th, 2004 at 10:45 pm
Las ventajas ofrecidas por CSS y el resto de estándares son inegables. Con el tiempo me he dado cuenta de que Diego actúa como to: diseña según los estándares. Conciedero que prestarle atención a Internet Explorer es un error. Mientras se haga Microsoft no va conciderar el respetar al W3C. Ese 95% de nada ha bajado a un 90% de nada porque el producto de Gates es incompetente. Y sigue bajando.
Escrito por Emiliano
Enero 14th, 2005 at 3:39 pm
Hola, en principio te felicito por tu blog.
Estoy armando un sitio para imprir sus paginas y la segunda pagina no aparece, corta el texto.
Porfavor si tenes algun ejemplo, seria muy util.
Desde ya mgcias.
Emiliano
Escrito por Filthy
Enero 18th, 2005 at 1:41 pm
Gracias por el artículo, me ha venido genial. Sólo quiero formular una pregunta, por si alguien sabe cómo hacerlo: ¿Es posible darle formato al título de página y al vínculo que referencia la página impresa, al igual que la leyenda de paginación(Ej:’Pagina1 de 2′)?
Muchas Gracias y un saludo.
Escrito por Mayerly
Marzo 11th, 2005 at 11:34 pm
Gracias, por la información. Es posible implementar este código para páginas que funcionaran desde la web?
Escrito por jorcanvi
Abril 13th, 2005 at 5:10 pm
Hola, muy buenas. Muy bueno el artículo. Tengo una duda y queria saber si alguien sabe como hacerlo. (quizas ya lo dijeron en algun comentario anterior y no me di cuenta, si es asi pido perdon de antemano).
Quisiera saber si es posible separar el contenido de las paginas. Yo tengo una pagina que tiene que mostrar una informacion (el contenido de esta informacion es una cabecera, 3 meses del año y un pie de pagina, cada cosa lo meto en una capa y todas estas en una capa que la llamo pagina). Si por ejemplo el usuario quisiera ver 9 meses te lo mostraria como 3 capas pagina (cadxa uno con su contenido correspondiente). El caso es que a la hora de imprimirlo no consigo que me salga cada capa pagina en una sola pagina, ya que cuando mando muchas paginas a la 5 o 6 pagina ya me van saliendo dos paginas juntas. No se si me he explicado bien. Lo que yo queria saber es si hay alguna manera de “decir” que comience en una pagina nueva.
Muchas gracias por todo, y siento el testamento que he escrito
Escrito por DARXESS
Noviembre 11th, 2005 at 4:39 am
Muy bueno el curso, tienen razon lo que dicen que impirmir un post no tiene sentido, pero el cursito biene barbaro para aquellos que tienen que imprimir algo en una factura preimpresa por ejemplo.
saludos.
Escrito por Ignacio
Junio 24th, 2006 at 12:36 pm
Hola, gracias por la informacion sobre css, pero tengo una duda… como puedo hacer para que ademas de que no se imprima no me deje el espacio?
Te explico, al imprimir oculto el menu, pero me deja el espacio y comienza a imprimir como a 10 cm del borde de arriba, se puede hacer para que comience a imprimir desde arriba del todo?
que oculte el menu y que tambien elimine el espacio donde esta.
Un saludo y gracias!!