Plantillas CSS para impresión y 9 consejos
Publicado el Thursday 24 de August del 2006 @ 18:39 por Armonth.
- 12
- 0
Comentar
Suele ser habitual tener hojas de estilo en CSS para la presentación de nuestras webs, una de las grandes ventajas de trabajar con XHTML y CSS es la separación de contenido y presentación: Con una plantilla CSS podemos modificar la forma de presentar información sin modificar el contenido.
Vamos a ver un ejemplo de plantilla CSS únicamente para impresión con algunos consejos para aplicar, lo primero es definirla en el documento y aunque podríamos hacerlo todo en un CSS mediante @media lo vamos a hacer en dos:
<link rel="stylesheet" href="style.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="print.css" type="text/css"
media="print" />
Lo importante de esto es que el CSS al cual se le da un media="print" es el de impresión y el media="screen" el clásico para presentación, hay otros cómo por ejemplo media="handheld" para dispositivos de mano (PDA’s, etc) pero estos ya no entran en está entrada.
Ahora sólo toca poner lo que queramos en print.css por lo que es hora de los consejos:
- Elimina todo rastro de elementos de navegación: al imprimir no sirve de nada un menú de navegación, el lector no va a poder pinchar en él por lo tanto elimina todo lo que no forme parte del contenido. Es muy fácil, sólo debes pillar los distintos identificadores (
id="") y añadirles undisplay: none;.#menu, #footer, #cabecera, .contenido-irrelevante { display: none; } - Utiliza
pten lugar depx,%oem: Los valores px, %, em, etc., son medidas pensadas para mostrar a un determinado tamaño información en pantalla mientras queptsirve mejor a nuestros propósitos. Recomendación:body { font-family: Arial, sans-serif; font-size: 10pt; } - Utiliza fuentes MUY legibles: Lo que con una fuente se lee bien en pantalla, impresa no tiene por que verse igual de bien: Arial para texto normal y Courier New para código (ya que usa ancho fijo) te servirán. Huye del típico abuso de Comic Sans o Verdana a 10 pixeles.
- Utiliza
float:none;: Los elementos flotantes dan problemas con algunas versiones de Mozilla Suite, borra los floats que no necesites o en su lugar utilizafloat: none;. - Especifica el fondo y el color de letra por defecto: Fondo siempre blanco y letra con un buen contraste: negro o similar:
body { background: #fff; color: #000; } - Las tablas salen sin presentación: Por defecto las tablas aparecen sin bordes, si tienes una forma de presentar las tablas en CSS para la web, copia esa parte del código al fichero CSS para impresión. Ésto también se puede aplicar a cualquier elemento.
- Utiliza a[href]:after para mostrar los enlaces. Seis líneas de CSS y los enlaces se mostraran justo a la derecha del texto enlazado entre paréntesis y con un bonito tono azul. Si no recuerdo mal los selectores (:after, :before, etc) no funcionan en Internet Explorer.
- Puedes hacer lo mismo que en el punto siete pero con el atributo
alt=""de las imágenes. - Resumiendo: Hacer plantillas CSS para impresión es lo mismo que para presentación: retocar, refrescar la web, “previsualizar impresión” y empezar de nuevo. Lo único que cambia es que debemos quitar elementos superfluos, no fiarnos de lo que se ve en pantalla y que el código del CSS usado al final sera mucho más corto que en la presentación.
Actualmente tengo pendiente hacer una versión impresa en condiciones pero lo más importante ya está: elementos de navegación fuera, publicidad fuera, arial 10pt +/- para una buena impresión y solamente se muestra logo+artículo.
Referencias y más para leer
Y ya de paso recomiendo “Principios básicos de CSS” en castellano por parte de Tierra de nómadas.
12 Comentarios
-
Chely:
Hola,
andaba buscando como editar la impresión de un sistema que ando haciendo de mi trabajo. Utilizo CSS para la edición en pantalla y jamás considere la impresión hasta que mi jefa me lo pidió =O!!
De lo que se trata esto es de un reporte en una tabla, en el tope, total, etc de la tabla las celdas son oscuras con letras blancas… NO LO IMPRIME.. que puede ser? ya hice 2 CSS (screen y print) y no veo los resultados.
Saludos
Chely H -
merit martinez:
hola, estaba buskando plantillas de impresion, y la verdad me gustaria ke dieran mas informacion sobre temas de diseño grafico o artes visuales thanks!!!!!!
-
Paco:
Hola, estoy intentando imprimir un catálogo y lo que me gustaria es que el logotipo de la empresa me apareciera en todas las cabeceras de pagina y no solo en la primera.
-
Hugo:
Me gustaria saber si alguien pudo imprimir en todas las páginas una cabecera (con un logo por ejemplo), y un pie (un div con texto) en todas las páginas. Yo utilice el attribute fixed, y funcinoa cuando solo hay una página en el IE7 y en el Firefox. Cuando hay 2 páginas, se me sobreescribe el contenido con el pie.
En el IE6 no funcina el fixed. Dicen que cn el CSS3 se pueden corregir estas cosas, he intentando probarlo, pero no me funciona el CSS3 en mi navegador, no se si hay que utilizar algo.Bueno, si alguien lo ha conseguido, que ponga un código, o alguna referencia web. Muchas gracias, saludos.
-
Maki:
Alguien tien manuales de plantilas CSS para que me ayuden a comprender mas rapidamente como hacerlas Xd Porfavor Y Gracias
-
j_aroche:
Gracias por los consejos, me van a ser útiles para mejorar un poco más mi CSS ;)
-
J. A. Rodríguez:
Tengo una pregunta.
Tal vez sea por el tiempo, pero no sé por qué dices que algunos navegadores no toman en cuenta media=’print’ para la vista previa si no se importa el estilo de pantalla:
“Lo vamos a hacer diferente ¿por qué? pues porque algunos navegadores no muestran la hoja para impresión en ‘Previsualizar impresión’(…)”yo he notado lo contrario en Firefox 2, Opera 9.23 y Explorer 7 (por increíble que parezca):
por ejemplo.
No he podido probarlo en Safari (desgraciadamente, hoy me tocó Windows) y voy a verlo en seguida con Konqueror. De todas formas, me queda duda sobre el origen de tu aseveración.
saludos