Cómo hacer que una página web se pueda imprimir

Imprimir una página web puede resultar frustrante. Con demasiada frecuencia, las páginas web impresas cortan secciones de texto y enyesan los anuncios sobre el resto. En otras ocasiones, puede enviar una página a la impresora y obtener nada más que papel blanco limpio. Si es importante que el contenido de su sitio sea atractivo y legible después de que se envíe a la impresora, entonces debe preparar su página para su viaje al papel.

Cree una versión separada para imprimir

1

Cree una página HTML separada para imprimir. Duplique el contenido principal de la página completa, reduciéndolo a texto principalmente. Elimine los encabezados y pies de página innecesarios (a menudo se componen de enlaces que no tendrían sentido en el papel). Elimine anuncios y menús de las columnas laterales. Elimine las imágenes o asegúrese de que aparezcan en línea con un tamaño adecuado. Minimice el uso de tablas y el posicionamiento explícito de elementos HTML. Utilice solo fuentes que seguramente encontrará en casi todas las computadoras (Times New Roman, Arial, Verdana).

2

Agregue un botón "Imprimir" a la página principal que enlaza con su página imprimible. El botón, en HTML, podría verse así:

3

Pruebe su página imprimible con varias impresoras y realice los ajustes necesarios.

Utilice CSS para hacer que el contenido sea más imprimible

1

Utilice dos hojas de estilo en cascada en lugar de una al diseñar su sitio. Se utilizará una hoja de estilo para cuando se visualice su página en la computadora. La segunda hoja de estilo se utilizará cuando su página se envíe a la impresora para que se convierta en una copia impresa. Establezca el atributo "media" en los enlaces de la hoja de estilo para asignar cada hoja de estilo a su medio. Por ejemplo:

2

Cree etiquetas en la hoja de estilo de impresión para ocultar imágenes, enlaces, encabezados y otros elementos que no deberían aparecer en la página impresa. Agregue una clase "doNotPrint" solo a la hoja de estilo de impresión:

.doNotPrint {display: none; }

En su HTML, establezca el valor de clase de cualquier elemento que desee ocultar en la impresora en "doNotPrint":

¡Me niego a que me impriman!

Elementos como este aparecerán en la pantalla, pero no en la página impresa.

3

Agregue estilo a la hoja de estilo de impresión que hace que todo el texto sea negro sobre un fondo blanco:

cuerpo {familia de fuentes: "Times New Roman", Arial, serif;
font-size: 12px;
colores: #000000;
color de fondo: #FFFFFF;
}

Si establece elementos específicos como encabezados (p. Ej.,

) a colores no imprimibles, también deberá establecerlos explícitamente en negro en la hoja de estilo de impresión.

4

Pruebe su página en algunas impresoras si puede y ajuste su diseño si es necesario.