Gravatar de Armonth

Plantillas CSS para impresión y 9 consejos

Publicado el Jueves 24 de Agosto 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:

  1. 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 un display: none;.
     #menu, #footer, #cabecera, .contenido-irrelevante {
   display: none;
 }
  2. Utiliza pt en lugar de px, % o em: Los valores px, %, em, etc., son medidas pensadas para mostrar a un determinado tamaño información en pantalla mientras que pt sirve mejor a nuestros propósitos. Recomendación:
     body {
  font-family: Arial, sans-serif;
  font-size: 10pt;
 }
  3. 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.
  4. Utiliza float:none;: Los elementos flotantes dan problemas con algunas versiones de Mozilla Suite, borra los floats que no necesites o en su lugar utiliza float: none;.
  5. 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;
 }
  6. 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.
  7. 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.
  8. Puedes hacer lo mismo que en el punto siete pero con el atributo alt="" de las imágenes.
  9. 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 (feed)

  1. Gravatar de Chely Chely nos comenta:

    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

    Viernes, 22 de Septiembre/2006 @ 20:03

  2. Gravatar de Armonth Armonth nos comenta:

    Depende de:

    a) El navegador
    b) El propio código de CSS

    Para corregir b) debes copiar y pegar la plantilla “screen” cómo “print” y editar a partir de ahí (osea: replicar todo el código para que los background: aparezcan)…

    Pero aparte de eso, depende de a) el navegador, por ejemplo Firefox tiene en “File -> Page Setup” una opción que pone “Print Background (colors & images) desactivada por defecto.

    Sábado, 23 de Septiembre/2006 @ 1:20

  3. Gravatar de merit martinez merit martinez nos comenta:

    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!!!!!!

    Viernes, 19 de Enero/2007 @ 23:49

  4. Gravatar de Armonth Armonth nos comenta:

    Hola Merit, pues me temo que la parte de diseño gráfico es la que más verde tengo así que lo veo difícil, aunque gracias igualmente.

    Un saludo

    Sábado, 20 de Enero/2007 @ 2:19

  5. Gravatar de Paco Paco nos comenta:

    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.

    Lunes, 9 de Abril/2007 @ 19:44

  6. Gravatar de Armonth Armonth nos comenta:

    Paco: prueba a utilizar @page {} para mostrar el logo.

    Lunes, 9 de Abril/2007 @ 20:10

  7. Gravatar de Hugo Hugo nos comenta:

    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.

    Miércoles, 2 de Mayo/2007 @ 11:30

  8. Gravatar de Armonth Armonth nos comenta:

    Hugo lo mismo han pedido justo arriba: @page { }. Y CSS 2.1 no es un estándar al 100% (va por su segundo borrador si no me falla la memoría por lo que no es del todo oficial) por lo que si el soporte de CSS 2.1 en IE6 ya es malo ni quieras saber sobre CSS 3.0.

    Miércoles, 2 de Mayo/2007 @ 17:35

  9. Gravatar de Maki Maki nos comenta:

    Alguien tien manuales de plantilas CSS para que me ayuden a comprender mas rapidamente como hacerlas Xd Porfavor Y Gracias

    Martes, 8 de Mayo/2007 @ 16:01

  10. Gravatar de j_aroche j_aroche nos comenta:

    Gracias por los consejos, me van a ser útiles para mejorar un poco más mi CSS ;)

    Jueves, 11 de Octubre/2007 @ 22:29

  11. Gravatar de J. A. Rodríguez J. A. Rodríguez nos comenta:

    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

    Viernes, 12 de Octubre/2007 @ 3:49

  12. Gravatar de Armonth Armonth nos comenta:

    J.A Rodríguez lo que pasa es que esa parte está algo desactualizada y es una cosa rara, te explico si pones:

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

    Y lo mismo para el stylesheet print:

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

    En Firefox y algunos navegadores pasa que se carga correctamente ambos CSS pero al darle a “Vista preliminar” para ver qué tal se imprimirá la vista preliminar no hace caso al CSS de impresión. Lo raro viene ahora: si imprimes se imprime con las reglas usadas en el CSS correspondiente a impresión, sólo falla la vista preliminar. De ahí que recomendase usar esa forma de llamar a los CSS aunque en realidad sean lo mismo.

    Lo gracioso es que si cambias el orden de los atributos CSS esto no pasa, es decir dejando el orden como:

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

    Es un “bug” raro que me ha/nos ha generado muchos problemas y cosas raras. La solución pasa por ignorar lo que dije en su momento (que voy a pasar a actualizar) y asegurarse que media=”" es el último atributo (de lo contrario falla la previsualización) o tener sólo un CSS y añadir reglas especificas con @media.

    Viernes, 12 de Octubre/2007 @ 7:27

Comentarios cerrados