Imprimir hojas de estilo puede ser un dolor si no sabes lo que estás haciendo. Antes de siquiera acercarse a uno, debe asegurarse de realizar una investigación sólida sobre cómo hacerlo.
Hoy lo ayudaremos a analizar primero las consideraciones conceptuales que debe tener en cuenta al crear una hoja de estilo de impresión. Luego, analizaremos algunos códigos del famoso HTML5 Boilerplate para ver algunas soluciones modernas para solucionar los problemas que surgen al imprimir desde la web.
Donde el diseño web se encuentra con la impresión
La web y la impresión son dos bestias fundamentalmente diferentes. Son tan diferentes que a menudo encontrarás diseñadores que trabajan a tiempo completo en un medio o en el otro casi sin cruzar. Como resultado, los diseñadores de impresión a menudo saben muy poco sobre diseño web y los diseñadores de web saben muy poco sobre diseño de impresión.
Sin embargo, curiosamente, la mayoría de los expertos exigen un poco de superposición en cada proyecto web que cree. Por supuesto, estamos hablando de hojas de estilo de impresión, que resultan en una especie de mundo bizarro donde CSS se está utilizando para diseñar para imprimir. Es un escenario loco, pero de todos modos se espera que lo planees.
Desafortunadamente, incluso si conoces bastante bien el CSS, las hojas de estilo de impresión pueden lanzarte algunas curvas. Hay bastantes trucos extravagantes que necesitarás implementar además de un montón de planificación conceptual.
Veamos cómo comenzar este proceso haciendo algunas preguntas clave.
Imprimir vs. Web: ¿Cuáles son las diferencias fundamentales?
Esta es una pregunta importante que debe hacerse al crear una hoja de estilo de impresión. Después de todo, estás convirtiendo un diseño de un medio a otro, por lo que vale la pena reflexionar sobre cómo difieren.
? ¿Está convirtiendo un diseño de un medio a otro por lo que vale la pena reflexionar sobre cómo difieren?Pensemos en las áreas obvias. En primer lugar, una página es un lienzo muy limitado. Los sitios web representan un espacio bastante infinito que puede desplazarse hasta donde quiera en cualquier dirección. Sin embargo, las páginas físicas están atascadas a 8,5 "por 11" con un área imprimible de incluso menos que eso.
Esto tiene implicaciones importantes. Significa que el contenido prolongado consumirá toneladas de papel. Esto nos lleva a pensar en dónde podemos recortar. Por ejemplo, si estamos imprimiendo artículos con cientos de comentarios, tal vez deberíamos apagarlos. También hay un cambio obvio que debe hacerse al ancho de nuestro contenido. Tanto la copia como las imágenes deben tener el tamaño adecuado.
Interacción
Otra diferencia importante entre la impresión y la web es la capacidad de interacción. La web representa un medio dinámico muy interactivo mientras que la impresión es estática; lo que está en el papel está atascado allí!
Esto significa que necesita repensar los elementos interactivos en la página. Por ejemplo, los menús de navegación suelen ser una de las primeras cosas a ir. Una página impresa no tiene ningún uso para ellos y realmente pueden consumir espacio si se convierten a listas desordenadas simples.
? Necesita una buena manera de tomar todos esos enlaces en línea y mostrar al lector a dónde llevan?También tienes que considerar lo que va a pasar con los controles deslizantes de imagen y similares. Si su página tiene una presentación de diapositivas con diez imágenes en la parte superior, eso no se traducirá bien en papel.
El nivel más básico de interacción en la web es un enlace. Esto también se vuelve problemático. En su computadora, puede simplemente hacer clic en un enlace para ver a dónde va, en papel, esta funcionalidad se pierde, por lo que necesita una buena manera de tomar todos esos enlaces en línea y mostrar al lector a dónde llevan.
¿Quién está imprimiendo esta página y por qué?
La segunda pregunta importante que se debe hacer se relaciona con el motivo por el cual la página se imprime en primer lugar. Un buen diseñador no solo se propone hacer que las cosas se vean bien, el diseño tiene que maximizar la utilidad para el usuario.
"Un buen diseñador no solo se propone hacer que las cosas se vean bien, el diseño debe maximizar la utilidad para el usuario".Por supuesto, esto significa que debe considerar lo que quiere el usuario típico. Esto no va a ser una respuesta universal. Cada tipo de proyecto tendrá un uso único para la página impresa.
Por ejemplo, los usuarios de Google Maps quieren casi todo lo eliminado de la página para imprimir: anuncios, el enorme mapa interactivo, la barra de búsqueda de Google, todo esto y más deben abandonarse para obtener una lista clara de direcciones legibles.
Obviamente, estos objetivos son bastante diferentes de los que imprimen una publicación de blog de diseño para que circulen en una reunión como punto de discusión. Aquí el énfasis está en la presentación de mucho texto en lugar de muy poco.
Aprendiendo por ejemplo: HTML5 Boilerplate
Cuando trabajas con tipos de CSS a los que nunca te has acercado, una de las mejores formas de aprender es simplemente mirar a tu alrededor y ver qué están haciendo los demás.
El primer lugar en el que generalmente comienzo en casos como este es la HTML5 Boilterplate de Paul Irish. Este proyecto es una colaboración sólida de profesionales líderes de la industria. No es de ninguna manera infalible, pero sigue siendo un gran ejemplo para aprender.
Si descargamos el Boilerplate y abrimos el archivo CSS, encontramos los estilos de impresión en la parte inferior:
Este fragmento de código bastante pequeño tiene mucho que hacer, lo que significa que hay mucho de lo que aprender. Vamos a sumergirnos y ver qué podemos encontrar.
Consulta de medios impresos
Lo primero que debe notar es el uso de una consulta de medios para especificar los estilos de impresión. Esto le dice al navegador que todos los estilos contenidos en este bloque solo deben aplicarse bajo una circunstancia especial, en este caso, un usuario que imprima la página (esto ayudará a terminar con la antigua técnica de "haga clic para obtener una versión para imprimir").
Selector universal y estilos de manta
Lo siguiente que observo es que el selector universal (*) se activa inmediatamente para aplicar algunos cambios de estilo de manta a la página.
El resultado aquí es una simplificación drástica de los estilos visuales en la página. Cualquier imagen de fondo o color se desactiva, el color del texto se vuelve negro, las sombras de texto se desactivan, etc. Todo esto mejora la legibilidad y ahorra tinta.
Imprimir enlaces amistosos
¿Recuerda que dijimos anteriormente que habría que hacer algo con los enlaces impresos? Resulta que puedes manejar esta tarea usando CSS puro, ¡una hazaña impresionante! El buen viejo Eric Meyer estaba haciendo esto en 2002 con el diseño CSS de A List Apart: Going to Print.
Después de aplicar por primera vez un subrayado a todos los enlaces de la página para ayudarlos a destacar (algunos también cambian ligeramente de color), hay un fragmento de código aplicado que realmente imprime el enlace después del texto:
El resultado es que un enlace típico se cambiará a enlace (http://goo.gl/CWGL4). Como puede ver, esto es perfecto para una impresión. Como nota al margen, no todos los navegadores admitirán el CSS anterior, pero aquellos que no se imprimirán bien, solo sin el texto del enlace entre paréntesis.
Observe que Boilerplate va un paso más allá al deshabilitar esta acción en las imágenes y en los enlaces que contienen JavaScript.
Optimización de saltos de página
Notará un montón de código para tratar con saltos de página: salto de página después: evitar; y p, h2, h3 {huérfanos: 3; viudas: 3; } Ambos están destinados a ayudar a las páginas a fluir mejor. El primero prohíbe un salto de página directamente después de los encabezados y los párrafos, siempre que sea posible, el segundo garantiza que no menos de tres líneas puedan quedar huérfanas o viudas en una página.
¿Qué son los huérfanos y las viudas? Cuando tiene la primera línea de un párrafo varado solo en la parte inferior de una página, eso es un huérfano. De manera similar, la última línea de un párrafo puede ser transferida a la página siguiente, esto es una viuda. El código anterior garantiza que, cuando sea posible, aparecerán al menos tres líneas de texto.
Tamaño de la imagen
Establecer el ancho máximo de la imagen al 100% asegura que no tengas imágenes sangrantes extrañas. Probablemente te hayas encontrado con esto antes como usuario: vas a imprimir una página web y terminas con varias páginas que contienen solo imágenes parciales que estaban aisladas de la página principal. ¡Esto se puede prevenir fácilmente con la línea de código anterior!
Márgenes de página
La forma en que HTML5 Boilerplate define los márgenes de la página es muy interesante. La mayoría de los artículos antiguos sobre hojas de estilo de impresión incluyen métodos muy diferentes. De hecho, ni siquiera conocía este método hasta que escribí este artículo.
Resulta que puedes usar @page para simplemente aplicar un margen alrededor de la página. El código anterior aplica un margen de 0.5 cm (¿los centímetros son CSS? ¡Ay!) En todas las páginas de manera uniforme.
Si desea complicarse, puede modificarlo para ajustar la configuración de todas las demás páginas. El siguiente código establece los márgenes de la página izquierda (1, 3, 5, etc.) y de la página derecha (2, 4, 6, etc.) de forma independiente.
Es una solución simple y elegante que es, sorprendentemente, CSS2.
Otras lecturas
Dado que HTML5 Boilerplate es una plantilla genérica, no contiene muchos de los fragmentos de código que son típicos de tipos muy específicos de sitios como los blogs. Antes de atacar su propio proyecto de hoja de estilo de impresión, explore algunos de los siguientes artículos para asegurarse de que está al día.
- 10 consejos para mejorar las hojas de estilo de impresión de Web Designer Depot
- Cómo hacer una gran hoja de estilo de impresión de Aliso el Geek
- Imprimir hojas de estilo: Lo básico (sin excusas) por Jens Meiert
- Imprimir hoja de estilo - la guía definitiva de Webcredible
Conclusión
Las hojas de estilo de impresión representan una forma completamente diferente de pensar y usar CSS. No siempre son las tareas más intuitivas, por lo que no espere encontrar las respuestas correctas de manera intuitiva. Asegúrese de hacer su tarea y prueba extensivamente.
¿Tiene algún truco o buenas prácticas con respecto a las hojas de estilo de impresión? Háganos saber en los comentarios a continuación!