¿Buenas reglas para configurar el css de impresión?

Question

Estoy buscando sugerencias/reglas/guías para hacer un css de impresión decente para cuando se imprime una página web. ¿Tienes algo que ofrecer?

Answer 1

Éstos son algunos de los estilos de impresión general a utilizar para obtener mejores salidas de la impresión:

/* Print styles */ 
@media print 
{ 
    tr, td, th {page-break-inside:avoid} 
    thead {display:table-header-group} 
    .NoPrint {visibility:hidden; display:none} 
    a {color:#000000} 
} 

La de arriba evita los saltos de página dentro de una fila de tabla

El estilo de la culata en T hace ninguna fila en la etiqueta de la culata en T Repita para cada página que la tabla abarca.

NoPrint es una clase que uso para mostrar algo en la pantalla, pero no en la impresión.

Y me gusta desactivar los colores de los enlaces.

Answer 2

Tenga cuidado con las imágenes de fondo y los colores. Creo que el comportamiento predeterminado de IE no es imprimir imágenes de fondo o colores.

Answer 3

Tiene esta antigua pero todavía relevante article from Eric Meyer en una lista aparte.

El punto principal es volver a empezar, establecer explícitamente las fronteras y marging/relleno para 0, fondo blanco, y "pantalla de ninguno" de los elementos no esenciales para la impresión (como ciertos menús)

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

body { 
    background: white; 
    } 

#menu { 
    display: none; 
    } 

#wrapper, #content { 
    width: auto; 
    margin: 0 5%; 
    padding: 0; 
    border: 0; 
    float: none !important; 
    color: black; 
    background: transparent; 
    } 

E ir de allí.

Answer 4

Primero lea este artículo de A List Apart (http://www.alistapart.com/articles/goingtoprint/). Cubren muchos de los conceptos básicos que está buscando (enlaces ampliados, blanqueo, etc.).

No confíe en la vista previa de impresión, asegúrese de realizar todo el proceso al probar un diseño de impresión. Para ahorrar papel, instale SnagIt o use el escritor de documentos Microsoft XPS. Puede imprimir directamente en una imagen y no perder papel.

También para artículos largos, considere cambiar su fuente a serif. Los artículos en la web son más fáciles de leer en sans-serif (Arial, Verdana) pero en versión impresa intentan en Times New Roman o Georgia.

Answer 5

Cuando define el estilo de impresión, debe pensar en un papel y en unidades físicas.

• Establezca los márgenes en centímetros (pulgadas) y los tamaños de fuente en puntos (como en OpenOffice).
• Cree una clase como 'pantalla' o 'noprint' para poder eliminar fácilmente el material no deseado .
• Olvídate del texto de colores de fantasía. Texto negro sobre fondo blanco.
• Piense en eliminar las imágenes superfluas: puede que no se vean tan bien en blanco y negro
• Quite el subrayado de los enlaces y haga que los enlaces tengan un texto en su sano juicio. Parece tonto leer "verificar esta página", donde "esto" está subrayado. O si coloca el href del enlace después del texto subrayado, puede ser más útil, pero no se ve tan bien en mi humilde opinión.

Answer 6

Una cosa que me aseguro de poner en mi hoja de estilos de impresión es:

a[href^="http://"]:after{ 
    content: " (" attr(href) ") "; 
} 

Esto escribe el vínculo real junto al texto de un vínculo para que las personas que imprimen el documento sabrán eran el enlace se supone ir.

también puse mi cuerpo de texto a ser un poco más legible para la impresión:

body{ 
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif; 
}