Krypton Solid

5 poderosos consejos y trucos para imprimir hojas de estilo – Smashing Magazine

5 poderosos consejos y trucos para imprimir hojas de estilo – Smashing Magazine

La impresión sigue siendo tratada de forma algo superficial por la mayoría de los diseñadores web, que tienden a obsesionarse con los píxeles en lugar de las impresoras. En el mundo real, una parte significativa de la gente confía en las páginas impresas de sitios web como referencia: todavía hay algo en tener una hoja de papel física en las manos, incluso en esta era de saturación digital.

La impresión sigue siendo tratada de forma algo superficial por la mayoría de los diseñadores web, que tienden a obsesionarse con los píxeles en lugar de las impresoras. En el mundo real, una parte significativa de la gente confía en las páginas impresas de sitios web como referencia: todavía hay algo en tener una hoja de papel física en las manos, incluso en esta era de saturación digital.

Otras lecturas en SmashingMag:

Los desarrolladores web pueden tomar varios pasos para cerrar la brecha entre el mundo de las impresoras y las pantallas LCD:

  • Trate a la impresión como un socio igualitario en el diseño adaptable y receptivo.
  • Imprima imágenes y colores de fondo, cuando corresponda.
  • Agregue URL visibles o enlaces escaneables para una fácil referencia desde la página impresa.
  • Utilice filtros CSS para mejorar el resultado de los gráficos impresos.

Diseño para impresión, no pantalla

Primero, cubramos los conceptos básicos. Las hojas de estilo de impresión modernas generalmente se colocan dentro de una consulta de medios:

@media print {

}

No es necesario volver a crear el CSS completo para su sitio web porque, en general, la consulta de impresión heredará los estilos predeterminados; Solo el diferencias necesita ser definido. La mayoría de los navegadores invertirán automáticamente los colores al imprimir para ahorrar tóner, pero esto no tendrá el mismo grado de calidad que una solución hecha a mano. Para mejores resultados, hacer explícitos los cambios de color. Como mínimo, una consulta básica sobre medios impresos debe constar de lo siguiente:

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

Tiempo display: none ha sido con razón ridiculizado en diseño receptivo, es totalmente apropiado para imprimir hojas de estilo: en la mayoría de los casos, nuestro objetivo no es recrear una captura de pantalla de una página completa, sino proporcionar una versión impresa concisa y bien diseñada de la misma. Como segundo paso, elimine los elementos de la página que son simplemente irrelevantes en la impresión, incluidas las barras de navegación y las imágenes de fondo.

/* Default styles */

h1 {
   color: #fff;
   background: url(banner.jpg);
}

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }
}

Escribir una hoja de estilo de impresión es una de las pocas ocasiones en las que usará centímetros o pulgadas en CSS. En gran parte irrelevantes para las pantallas, los sistemas de medición del mundo real se vuelven muy útiles en la impresión. Para asegurarse de que está utilizando la página impresa de manera efectiva, escriba CSS para mostrar su contenido de borde a borde, negando cualquier margen o relleno que pueda estar presente, y equilibre esto con un @page regla:

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }

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

   @page {
      margin: 2cm;
   }
}

Para el contenido al que se puede esperar que los usuarios agreguen notas escritas a mano en la página, como material educativo, puede considerar aumentar el margen de impresión.

También debemos asegurarnos de que el contenido no se divida en las páginas cuando se imprima. Un paso obvio es evitar que los títulos se impriman en la parte inferior de la página:

h2, h3 {
   page-break-after: avoid;
}

Otra regla evitará que las imágenes se destiñen por el borde de la página impresa:

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

Un tercero asegurará que los artículos siempre comiencen en una página nueva:

article {
   page-break-before: always;
}

Por último, podemos evitar que elementos grandes, como listas e imágenes desordenadas, se dividan en varias páginas.

ul, img {
   page-break-inside: avoid;
}

Si bien estas declaraciones no son exhaustivas, son un buen comienzo.

Forzar imágenes de fondo y colores

En algunos sitios web, como carteras, las imágenes de fondo y los colores son un componente visual importante. Si el usuario está imprimiendo desde un navegador WebKit (Chrome de Google o Safari de Apple), podemos obligar a la impresora a representar los colores como se ven en la pantalla (es decir, forzar la aparición de imágenes y colores de fondo en la página impresa). En términos generales, haríamos esto para las impresoras en color, que podemos probar en una consulta de medios separada:

@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

Lamentablemente, (todavía) no existe un equivalente inmediato en Firefox, Opera o Internet Explorer.

No podemos (todavía) interactuar directamente con una página impresa para explorar enlaces, por lo que las URL de los enlaces deben estar visibles en la versión impresa de la página web. Para mantener la página relativamente limpia, prefiero expandir solo los enlaces salientes en los artículos y suprimir los internos. Si ha utilizado URL relativas en su sitio web para enlaces locales, puede hacerlo fácilmente a través de un selector de atributos y :after pseudo = clases, evitando así que se impriman enlaces internos y enlaces alrededor de imágenes:

@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }

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

Tome el siguiente código HTML y contenido:

<p>You’ve explored this <a href="https://www.smashingmagazine.com/blog">website</a>; now it’s time to <a href="http://www.webplatform.org/">read other Web development documentation</a>.</p>

Aquí está el resultado impreso:

Captura de pantalla 13/01/2013 a las 8.58.10 p.m.

Un problema es que los enlaces de anclaje y los enlaces alrededor de las imágenes también se ampliarán en la página impresa. Podemos arreglar los enlaces de anclaje con bastante facilidad con una regla CSS que lo contradiga:

article a[href^="#"]:after {
   content: "";
}

Los enlaces alrededor de imágenes son bastante más difíciles, porque CSS actualmente no permite la selección de un elemento basado en sus hijos. Idealmente, los enlaces alrededor de imágenes tendrían una clase a la que podríamos dirigirnos a través de CSS. A largo plazo, CSS4 presenta un selector principal que hará el trabajo:

$a:after > img {
   content: "";
}

CSS4 también facilitará la expansión de enlaces externos:

a:not(:local-link):after {
   content:" <" attr(href) "> ";
}

Todos estos enfoques asumen que los usuarios continuarán escribiendo URL a mano. Una mejor solución es facilitar el acceso a la versión digital de la página proporcionando un código QR correspondiente.

A menudo considerados como una monstruosidad publicitaria, los códigos QR tienen su lugar en determinadas circunstancias. Un ejemplo obvio es proporcionar un sello fácilmente escaneado en una página web impresa que permite al usuario volver a la versión en vivo sin tener que escribir la URL.

Página web impresa con un código QR autorreferencial
Página web impresa con un código QR autorreferencial. Vista ampliada.

Para crear el código QR correspondiente, usaremos la API de gráficos de Google, que tiene cuatro componentes obligatorios:

  • El tipo de información de gráficos que queremos que proporcione Google (qr, en nuestro caso);
  • El tamaño renderizado del sigilo QR, en píxeles;
  • La URL a codificar;
  • La forma de codificación de caracteres que se utilizará.

Normalmente asociamos la URL con un elemento de encabezado en la parte superior de la página:

<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>

Para crear el resultado impreso, proporcionaremos un margen en el lado derecho del h1 que sea lo suficientemente grande para el encabezado, y luego coloque un código QR en esa área:

header h1 {
   margin-right: 200px;
   margin-bottom: 2rem;
   line-height: 1.5;
}

Debido a que el código QR será único para cada página, esto se agregaría como una hoja de estilo incrustada:

@media print {
   header h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

Este enfoque tiene la desventaja de obligar al desarrollador a ingresar una URL individualmente para cada página en el código API. Si su proveedor de alojamiento web está ejecutando PHP, puede proporcionar la URL de la página actual automáticamente:

@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

Para WordPress:

@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

Obviamente, las dos soluciones anteriores solo funcionarán en páginas PHP y WordPress.

Utilice filtros CSS3 para mejorar la calidad de impresión

Los navegadores a menudo tienen problemas para imprimir imágenes de pancartas, especialmente si las pancartas son blancas sobre un fondo oscuro:

logo-fondo-negro
Logotipo como imagen sólida
logo-fondo-negro-impreso
Resultado impreso
logo-fondo-negro
Logotipo como PNG con máscara alfa
logo-transparente-impreso
Resultado impreso

En teoría, podría usar un elemento CSS para cambiar entre diferentes versiones del logotipo para imprimir, pero eso significaría duplicar el tamaño del archivo para obtener un beneficio potencialmente mínimo. En su lugar, recomiendo usar filtros CSS (y su equivalente SVG, para Firefox) para invertir la imagen justo antes de que llegue a la página impresa:

@media print {
   header {
      background: none;
      color: #000;
   }

   header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
   }
}

Los filtros CSS3 hacen lo que cabría esperar: invertir los colores en las imágenes del encabezado, cambiar el negro al blanco y viceversa, pero solo funcionan en Chrome y Safari. Para cubrir Firefox, necesitamos un enfoque diferente: el filtro equivalente escrito como un archivo SVG separado:


<svg xmlns="http://www.w3.org/2000/svg">
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>

El funcionamiento de la feColorMatrix Los filtros SVG son un poco complejos de cubrir aquí. Puede encontrar mucha más información en el artículo “Aplicación de tintes de color a páginas web con filtros SVG y JavaScript” en Dev.Opera.

El resultado de imprimir cualquier forma de logotipo (es decir, PNG con máscara alfa o fondo negro sólido) es ahora este:

logo-invertido-impreso

Conclusión

Debido en parte al hecho de que el uso de la impresora es no rastreada por el software de análisis de sitios web y, por lo tanto, carece de métricas sólidas (aunque lograr esto también es posible, lo cual discutiremos en un artículo futuro), los desarrolladores web tienden a ignorar la impresión. Esto es algo comprensible, porque la mayoría de las veces solo leemos y navegamos páginas en línea. Como resultado, los desarrolladores tienden a desarrollar sitios web para las pantallas y dispositivos frente a ellos, en lugar de para la impresora en el otro extremo de la oficina.

Por otro lado, incluso si las personas solo ocasionalmente necesitan imprimir algo desde la Web, sería ideal que el diseño de la página se adaptara a la impresora, al igual que los sitios web modernos se adaptan a varios tamaños de pantalla y dispositivos. La impresión debe considerarse otro aspecto del diseño adaptativo, la usabilidad y la accesibilidad, y una parte igualmente importante del desarrollo web.

Al tratar la impresión como otro aspecto del diseño adaptativo, satisfacemos las necesidades de más usuarios de sitios web y, al mismo tiempo, ahorramos tinta, papel y otros recursos, todos los cuales son aspectos importantes de diseño sostenible.

Más recursos

A List Apart tiene una larga y loable historia de apoyo a las hojas de estilo impresas a través de sus artículos y tutoriales. Si bien algunos de los siguientes recursos son ahora bastante antiguos, siguen siendo relevantes para cualquiera que desee explorar la impresión como un socio igualitario en el diseño web.

Fuente de la imagen en la portada: Bottlerocket Creative.

Deja un comentario