Buenas reglas para configurar css de impresión? [cerrado]

Question

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

Answer 1

Aquí hay algunos estilos de impresión generales que se pueden usar para obtener mejores impresiones:

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

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

El estilo de thead hace que las filas de la etiqueta de thead se repitan para cada página que abarca la tabla.

NoPrint es una clase que uso para mostrar algo en la pantalla, pero no está impreso.

Y, me gusta desactivar los colores de los enlaces.

Answer 2

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

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

Esto escribe el enlace real junto al texto del enlace para que las personas que imprimen el documento sepan dónde se supone que debe ir el enlace.

También configuré el texto de mi cuerpo para que sea un poco más legible para imprimir:

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

Answer 3

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

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

También para artículos largos, considera cambiar tu 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 en Times New Roman o Georgia.

Answer 4

Tiene este artículo antiguo de Eric Meyer en una lista aparte.

El punto principal es comenzar de nuevo, estableciendo explícitamente los bordes y marcando / rellenando a 0, fondo blanco, y " mostrar ninguno " a cualquier elemento no esencial para imprimir (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;
    }

Y vete de allí.

Answer 5

Cuando está definiendo el estilo de impresión, tiene que 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).
• Crea una clase como 'screen' o 'noprint' para poder eliminar fácilmente los no deseados material.
• Olvídate de texto de color de fantasía. Texto negro sobre fondo blanco.
• Piense en eliminar las imágenes superfluas: es posible que no se vean tan bien en blanco y negro
• Eliminar el subrayado de los enlaces y hacer que los enlaces tengan un texto sano. Parece tonto leer " consultar esta página " ;, donde " este " está subrayado. O si pones el href del enlace después del texto subrayado, entonces puede ser más útil pero no se ve muy bien en mi humilde opinión.

Answer 6

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.