Cómo diseñar su sitio web para imprimir con CSS

Publicado: 2015-08-28

¿Qué tiene que ver la impresión con la web?

La mayoría de nosotros vivimos en línea y obtenemos toda nuestra información de la web. Estamos conectados todo el día, todos los días, desde muchos dispositivos. Es posible que haya escuchado que la impresión está muerta cuando, de hecho, ¡eso ciertamente no es cierto! Es posible que no imprimamos con tanta frecuencia como antes, pero hay situaciones en las que ver el contenido en un dispositivo no es un sustituto de tener una copia impresa para mirar. ¿Tiene contenido instructivo valioso, cupones canjeables, instrucciones, ejemplos de cartera o cualquier otra cosa que los usuarios prefieran ver impreso? Si es así, configurar reglas de impresión personalizadas en su sitio web sin duda ayudará a dar forma a la experiencia de sus usuarios.

impresora de oficina

Cómo diseñar para imprimir

Toda la magia está contenida dentro de CSS al definir estilos específicos de impresión. Puede que le resulte útil crear una hoja de estilo print.css separada para que esté separada de todos sus otros estilos. Tenga en cuenta que no todos los sitios tienen una hoja de estilo de impresión; esta es una característica adicional y un paso en el proceso de desarrollo. Si no se especifican estilos de impresión, se utilizan los estilos predeterminados para la impresión. Definiremos estilos para hacer que las cosas sean más eficientes para la impresión, lo que anulará cualquier valor predeterminado.

Recuerde: nunca debe realizar cambios en un sitio activo. Nuestra aplicación de desarrollo local gratuita, Local, lo ayudará a simplificar su flujo de trabajo y experimentar con seguridad con su sitio. ¡Pruébalo hoy!

La convención de nomenclatura y los estilos específicos serán exclusivos de la hoja de estilo de su propio proyecto, pero se aplicarán estos conceptos. Después de agregar los conceptos básicos, revise la hoja de estilo predeterminada de su sitio web y busque cualquier situación única que necesite estilos de impresión para garantizar la mejor experiencia de impresión.

Consideraciones de color y diseño

La mayoría de la gente prefiere imprimir en blanco y negro debido al costo de la tinta de color. Además, hay un mayor contraste cuando el texto es negro y está impreso en papel blanco. Probablemente esté familiarizado con las consultas de medios, ya que son fundamentales en el diseño web moderno y receptivo. Las consultas de medios también son necesarias para crear estilos de impresión.

Esto es lo que hará que el texto en el cuerpo sea negro y eliminará cualquier color de fondo para una mejor impresión:

@media print {
body {
color: #000;
background: #fff;
}
}




Lo más probable es que el texto se imprima en Times New Roman. No hay nada de malo en eso, pero ¿qué sucede si desea especificar una fuente diferente? Tal como lo hizo en sus estilos predeterminados, esto también se puede hacer en forma impresa. Mientras estamos en eso, no olvidemos la altura de la línea.


body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




Ocultar elementos innecesarios


Probablemente haya sido condicionado para mantener la display: none al mínimo, pero esto está completamente bien para sus estilos de impresión. Al ocultar algunos elementos, les brinda a sus usuarios una mejor manera de imprimir y mantener cualquier cosa innecesaria de la copia impresa. El objetivo es permitirles imprimir efectivamente el contenido más importante, no la página web exacta.
		




Hay elementos de página que no son necesarios, como la navegación, el pie de página, la barra lateral y las imágenes de fondo, así que aquí es donde nuestra display: none será útil.


@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




Los artículos a menudo se imprimen, por lo que es bueno que cada artículo comience en una página separada. Es mucho más fácil para el usuario organizar sus impresiones si la información clave se agrupa y no se distribuye en varias páginas.
		




Al agregar esto a su hoja de estilo de impresión, los artículos siempre comenzarán en una nueva página:


article {
page-break-before: always;
}




Mantener las listas desordenadas juntas en la misma página también es una gran idea:


ul {
page-break-inside: avoid;
}




Vayamos un paso más allá y hagamos lo mismo con los encabezados, las imágenes, las citas en bloque, las tablas y otros elementos de la lista:


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}




Aquí es donde realmente se puede ajustar el espaciado para las impresiones. No es muy frecuente que vea centímetros en el diseño web, pero funciona muy bien para determinar los bordes de la página. La regla @page es cómo apuntaremos al espaciado. Este ejemplo permitirá 2 cm alrededor de todos los bordes. Esta medida se puede personalizar para permitir más o menos espacio. Por ejemplo, es posible que sus usuarios deseen tomar notas y sería útil permitir un margen mayor.
		




@page {
margin: 2cm;
}




Si las páginas están destinadas a imprimirse y colocarse en una carpeta, tenga en cuenta que existe la opción de ajustar los márgenes para cada página. La página izquierda es para las páginas 1, 3, 5... y la página derecha es la página 2, 4, 6...


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




La personalización de la primera página es útil en ciertos casos. Al utilizar la pseudoclase :first page, se puede determinar el estilo de la primera página impresa:


@page :first {
margin: 1cm 2cm;
}




estampado-estilo-02


¿La impresión te estresa? Aquí hay algunos consejos para imprimir su proyecto como un profesional.
		




Ideas de imagen y texto de introducción


Estos pueden o no aplicarse a su sitio, pero es bueno tenerlos en cuenta de todos modos.


Para evitar que las imágenes se corten y se desparramen por el borde de la página impresa, esto se evitará agregando una declaración de ancho máximo.


img {
max-width: 100% !important;
}




Un buen mensaje de bienvenida es una gran adición. El contenido impreso estará disponible por un tiempo, por lo que siempre es bueno incluir un mensaje amistoso o un recordatorio.


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




Ahora que hemos cubierto algunos de los conceptos básicos de consideración de impresión, es fácil incorporar estas ideas en su hoja de estilo de impresión. Aunque la impresión no es en lo que finalmente pensamos cuando usamos la web, es una excelente manera de brindar a sus usuarios la misma gran experiencia sin importar cómo accedan al contenido.