Haga que su sitio web se pueda imprimir con CSS

  • Conocimientos necesarios: Intermedio CSS , básico HTML
  • Requiere: Editor de texto, navegador web, impresora o generador de PDF como impresora
  • Tiempo del proyecto: 2-4 horas
  • Archivo de soporte

Hace muchos eones, en la época olvidada de los diseños de páginas web basados ​​en tablas, los desarrolladores web tenían acceso a una función de hojas de estilo en cascada (CSS) que permitía a los autores especificar un tipo de medio. Este tipo de medio le dijo al navegador cuándo aplicar estilos a la página, ya sea para pantalla, computadora de mano o incluso para imprimir.

Esto fue en 1998: los navegadores adoptaron algunas de estas características (como la impresión) y, a medida que pasó el tiempo, los desarrolladores con visión de futuro comenzaron a hacer que sus diseños basados ​​en tablas fueran imprimibles. Algunos de los elementos de la página se eliminaron para ahorrar papel y tinta, e incluso se realizaron ajustes en los diseños para que se ajustaran mejor a una hoja de papel de un tamaño fijo.

Hoy en día, los diseños basados ​​en tablas han sido casi reemplazados por construcciones basadas en div y, para aquellos que usan las especificaciones HTML5, otros elementos estructurales y semánticos. Uno de los beneficios clave de este enfoque es que CSS generalmente se usa para definir el diseño de las páginas web, lo que permite más libertad para volver a fluir y reformatear las páginas ya codificadas con solo cambios de CSS.

Esta flexibilidad también ha llevado al surgimiento del diseño web receptivo (RWD), lo que facilita que una página web se adapte a diferentes tamaños de pantalla basados ​​en CSS utilizando lógica condicional. Durante los últimos tres años, hemos visto el desarrollo de marcos, plantillas, tutoriales e incluso parodias, lo que significa que los desarrolladores de casi cualquier nivel de habilidad pueden crear páginas que pueden adaptarse a casi cualquier tamaño de pantalla que un desarrollador quiera admitir. El contenido puede refluir; la navegación se puede ajustar; los elementos pueden cambiar de tamaño y posición; la tipografía se modifica, y así sucesivamente.

Este método de construcción es perfecto para permitir que un desarrollador soporte la página impresa con poco esfuerzo adicional. Excepto por alguna razón, no ve muchos de estos recursos, incluida o incluso considerando la página impresa.

Esperamos que este tutorial le brinde la suficiente comodidad al crear estilos de impresión para que pueda agregarlos a cualquier proyecto sin aumentar su presupuesto.

Paso 01. Empezando

En primer lugar, consideremos cómo se comparan las páginas impresas de un sitio con sus páginas web de origen:



Todos sabemos que las páginas web pueden desplazarse de forma indefinida, pero una página impresa está limitada por el tamaño del papel y, potencialmente, por la cantidad de papel que un usuario está dispuesto a gastar. Las páginas impresas también son un medio estrictamente visual, mientras que una página web puede tener funciones de video, audio e incluso accesibilidad que faciliten la retroalimentación táctil. Las páginas web pueden representar tanto datos de mapas de bits (fotos, gráficos) como datos vectoriales (tipografía, SVG), pero una vez que se imprimen, son solo datos de mapas de bits en papel. Una página web es interactiva, lo que permite que los elementos de la pantalla cambien, mientras que una página impresa no cambiará mucho más que el uso de agua o fuego. Es útil tener todo esto en cuenta, porque estos puntos informan las decisiones que toma sobre el contenido de la página impresa (¿tengo que mostrar controles de audio? ¿Cómo me dirijo a los ciclos de imágenes? ¿Mi pie de página es demasiado grande para caber siquiera en un ¿hoja de papel?).

Para esta demostración voy a usar mi sitio web personal como ejemplo (recompensa mi ego y me impide ofrecerte mi compañía). Sé por experiencia que las páginas que más probablemente se imprimirán de mi sitio son los artículos y mi biografía. Mantendré mi ego un poco bajo control usando una página de artículo antiguo para comenzar.

La página de artículo de ejemplo tal como se ve en el navegador de escritorio Firefox. Aunque sea antiguo, vale la pena imprimirlo

La página de artículo de ejemplo tal como se ve en el navegador de escritorio Firefox. Aunque sea antiguo, vale la pena imprimirlo

Al mirar la página, hay una cosa que sé que el usuario esperará ver: el contenido. Como es mi sitio, quiero asegurarme de mantener elementos en la página cuando un usuario imprime:

cómo hacer un folleto emergente
  • Marca
  • Una forma para que un lector encuentre la página en mi sitio
  • Una declaración de derechos de autor
  • Cualquier marca cruzada (como el sistema de gestión de contenido de mi empresa)
  • Direcciones de enlaces en mi contenido (tal vez)

En contra de esto, hay otros elementos que la mayoría de los usuarios de impresión no necesitarán ni desearán ver:

  • Navegacion primaria
  • Navegación secundaria
  • Búsqueda de sitio
  • Íconos y enlaces de redes sociales

Y, finalmente, hay algunas cosas que, ya sea que el usuario o yo deseemos que se impriman, probablemente no lo serán:

  • Colores (especialmente para impresoras de un color)
  • Imágenes de fondo (y colores)
  • Partes de elementos temporizados / interactivos (como las fotos en un ciclador de imágenes).
  • Imágenes blancas como logotipos (se imprimirán, pero sin los colores de fondo es posible que no se muestren más que un halo de suavizado)

Como mi sitio surge de mis esfuerzos de RWD, también tengo una idea de cómo reajustar el contenido, apilar elementos, ajustar el tamaño, reposicionar bits, etc. Imagina que tu página web está en una pantalla en blanco y negro de ancho fijo y estás medio camino a casa.

Paso 02: crea un hogar para los estilos de impresión

Lo primero que debe hacer es configurar su CSS para mantener y llamar a los estilos de impresión. Si ha realizado alguna codificación RWD, le resultará familiar:

@media print {
/ * inserta tus declaraciones de estilo aquí * /
}

No está restringido a este enfoque. Aún puede llamar a su hoja de estilo de impresión desde un en el documento :

Este método implica una solicitud HTTP adicional. Un navegador no necesita los estilos de impresión para renderizar una página, pero la mayoría no renderizará la página hasta que todos los archivos CSS estén desplegados; Opera es la excepción. Además, ninguno de los navegadores actuales activará eventos de carga hasta que se descarguen todos los archivos. Dado que una hoja de estilo de impresión puede contener tan pocas declaraciones, a menudo no vale la pena la sobrecarga HTTP adicional y el retraso en la representación o activación de eventos para dividir los estilos de impresión como un archivo separado.

La misma página impresa desde Firefox directamente a PDF. Puede ver que algunos aspectos se han ido y el diseño se ha simplificado

La misma página impresa desde Firefox directamente a PDF. Puede ver que algunos aspectos se han ido y el diseño se ha simplificado

Paso 03. Aplicar los estilos

Mi logotipo es texto, y aunque no es negro sobre blanco, lo cambiaré a texto negro para que un usuario con una impresora a color no tenga que lidiar con rojo sobre papel blanco. Esto aborda mi objetivo de marca.

cómo usar la herramienta de cuadrícula de perspectiva en Illustrator

Copiar codigo

#Banner p # Title {
tamaño de fuente: 24pt;
}
#Banner p # Título a, #Banner p # Título a: enlace, #Banner p # Título a: visitado {
color: # 000; / * cambiar enlace a texto negro * /
}

Sé que el navegador puede incluir la dirección de la página en la página impresa, pero algunos usuarios la anulan y algunas direcciones de página son demasiado largas para caber. Como tengo la navegación de ruta de navegación en mi página, opto por dejarla en su lugar. Incluso si un usuario no puede leer la dirección que puede estar impresa en el pie de página, el usuario puede al menos ver la ruta para llegar a esa página en mi sitio. Esto aborda mi segundo objetivo de permitir que un lector encuentre esta página en mi sitio más adelante.

#Bread a: link, #Bread a: visitado {
decoración de texto: subrayado; / * deja una pista de que es un enlace * /
color: #000;
}
#Pan {
color: #000;
tamaño de fuente: 6pt; / * hacer el texto pequeño * /
}
#Bread> a: after {
contenido: ''; / * deshabilitar la visualización de URL si está en #Content * /
}

Mi declaración de derechos de autor vive en mi pie de página, por lo que si no hago nada más que permitir que se imprima mi pie de página, abordará mi segundo objetivo. Pero no quiero que se imprima todo en el pie de página, así que me aseguraré de inhabilitar el cuadro de búsqueda, por ejemplo.

#Footer {
tamaño de fuente: 6pt; / * hacer el texto pequeño * /
color: #000;
}
#Formulario de búsqueda {
pantalla: ninguna;
}

la mejor cámara de apuntar y disparar para poca luz

Dejo el logo de mi CMS en el pie de página. No necesito mostrar una URL (es posible que al lector no le importe), pero sigo manteniendo la marca en su lugar. Eso aborda mi cuarto objetivo de marca cruzada.

#Footer img {
flotar derecho; / * definido en otro lugar, incluido para completar * /
}

Mi quinto objetivo de mostrar la URL completa de los enlaces depende del contexto. Solía ​​incluir la dirección después de cada enlace; sin embargo, pueden surgir problemas debido a que algunas direcciones de enlace son increíblemente largas, demasiado largas para que un usuario las vuelva a escribir fácilmente.

El cuadro de diálogo de vista previa de impresión en Chrome. Al igual que con todas las vistas previas de impresión, le ofrece una idea rápida de qué esperar.

El cuadro de diálogo de vista previa de impresión en Chrome. Al igual que con todas las vistas previas de impresión, le ofrece una idea rápida de qué esperar.

Si elijo mostrar los hipervínculos, es importante que recuerde limitarlo al contenido (para que mi ruta de navegación y pie de página no dibujen URL después de cada elemento) y posiblemente excluirlo de las imágenes.

#Content a: after {/ * seleccionar enlaces solo en el área de contenido * /
contenido: '[' attr (href) ']';
decoración de texto: ninguna;
pantalla: en línea;
}

Ahora puedo recorrer y ocultar los elementos que no quiero imprimir. A diferencia de ocultar elementos de pantallas pequeñas, que no es una gran idea en RWD, podemos ocultar elementos impresos porque la página ya se ha descargado por completo y los elementos que ocultas no deberían agregar valor a la página impresa.

En este ejemplo, eliminaré los íconos de navegación, búsqueda, redes sociales y cualquier otra cosa que no tenga sentido en el papel.

#Nav, #FlyOutNav, #SubNav, .NoPrint, p.CodeAlert, #SMLinks, #SearchForm {
pantalla: ninguna;
}

Esto aún no cubre todas mis necesidades. Antes de llegar al diseño, necesitaré abordar algunos estilos estándar que tal vez desee tener. Por ejemplo, es posible que haya notado que dimensiono el texto en puntos. Hago esto porque me resulta más familiar. Siempre que esté probando en diferentes navegadores, puede usar las unidades que prefiera en sus estilos de impresión.

Tengo un conjunto predeterminado de estilos que aplico a casi todas mis hojas de estilo de impresión para asegurarme de no olvidarme de las cosas importantes. Lo modifico regularmente por sitio, pero aquí hay un buen punto de partida para mis necesidades:

cuerpo {
fondo: #fff;
color: #000;
tamaño de fuente: 8pt;
altura de línea: 150%;
margen: 0px;
}
hr {
color: #ccc;
color de fondo: #ccc;
}
h1, h2, h3, h4, h5, h6, código, pre {
color: #000;
transformación de texto: ninguna; / * porque a veces pongo todo en mayúsculas * /
}
h1 {
tamaño de fuente: 11pt;
margen superior: 1em;
}
h2 {
tamaño de fuente: 10pt;
}
h3 {
tamaño de fuente: 9pt;
}
h4, h5, h6 {
tamaño de fuente: 8pt;
}
código, pre {
tamaño de fuente: 8pt;
color de fondo: transparente;
/ * por si acaso el usuario configuró el navegador para imprimir fondos * /
}
blockquote {
imagen de fondo: ninguna;
/ * aunque es posible que no se impriman, prefiero estar seguro * /
}
a: enlace, a: visitado {
decoración de texto: subrayado;
color: #000;
}
abbr: after, acrónimo: after {/ * algo de amor HTML4 * /
contenido: '(' attr (título) ')';
/ * Sospecho que soy uno de los pocos que todavía usa estos elementos * /
}

Estos estilos logran una serie de cosas básicas:

bolígrafo de dibujo para ipad air 2
  • Limpian los espacios en blanco alrededor del contenido (la configuración de impresión del usuario manejará los márgenes de la página por usted).
  • También restablecen los tamaños de letra a puntos y configuran el texto en negro (porque es posible que su texto gris claro ordenado no active las modificaciones del navegador para convertir el texto blanco en negro al imprimir).
  • Incluso escriben el valor de tu y atributos de título en la página (lo que puede hacer con cualquier atributo en cualquier elemento, como texto alternativo en imágenes, aunque probablemente no sea una buena opción).

Asegúrese de probar con diferentes tamaños de papel, aunque el paisaje es el más fácil de ver. Esto puede resaltar rápidamente cualquier problema de escala

Asegúrese de probar con diferentes tamaños de papel, aunque el paisaje es el más fácil de ver. Esto puede resaltar rápidamente cualquier problema de escala

Paso 04. Más ajustes

Si su sitio ya se adapta a un diseño para dispositivos móviles, es probable que ya haya implementado estilos para tener en cuenta la linealización del diseño. Si no hace nada más, puede usar su diseño optimizado para dispositivos móviles como punto de partida y simplemente desactivar la navegación y otros elementos que no desea conservar.

En este punto, debe comenzar a considerar qué otros estilos tiene implementados para tener en cuenta los diseños en diferentes tamaños de pantalla. Un buen ejemplo es la dependencia de escalar los tamaños de las imágenes en función del tamaño de la ventana gráfica.

Veo muchos sitios que pueden escalar una imagen al 100% de ancho en algunas consultas de medios. Esto puede ser un problema para la página impresa porque sin darse cuenta puede escalar la imagen al ancho del papel, a veces tomando una hoja entera de papel. Considere si la imagen se puede reducir para conservar el papel y la tinta del usuario y, en algunos casos, considere si es necesario ampliarla.

Piense en los elementos de su diseño que ni siquiera pertenecen al papel. Por ejemplo, ¿tiene Flash, YouTube incrustado o widgets interactivos en juego?

Es posible que desee considerar eliminarlos por completo de la página impresa. Si no lo hace, su video de YouTube insertado (por ejemplo) aún puede ocupar mucho espacio (y papel) pero aparecer en blanco o no ofrecer ningún valor.

Algunos usuarios pueden optar por escalar el texto para que su página sea más fácil de leer; pruebe esto para establecer si necesita ajustar los estilos

Algunos usuarios pueden optar por escalar el texto para que su página sea más fácil de leer; pruebe esto para establecer si necesita ajustar los estilos

Paso 05. Prueba

Una vez que tenga todos sus estilos en su lugar, pruebe. Hay dos técnicas que utilizo y que no requieren que imprima la página. Primero, me apoyo en las funciones de vista previa de impresión del navegador, una forma rápida de ver cómo se interpretan sus estilos. En segundo lugar, cuando quiero ver cómo se procesa una página, imprimo en un PDF y luego lo reviso.

Ninguno de estos replica la experiencia de sostener una hoja de papel en sus manos (y darse cuenta de que necesita escalar su texto de manera diferente o sus imágenes son demasiado grandes), pero le permiten hacer la mayor parte de sus pruebas sin costo para usted o los árboles.

Una cosa que no puedo enfatizar lo suficiente es la prueba entre navegadores. Encienda todos los navegadores que tenga y apruebe. Puede encontrar que Chrome se ahoga en sus tipos de letra incrustados, Firefox tiene márgenes predeterminados diferentes de los que espera, u Opera simplemente le gusta envolver su logotipo de una manera que no esperaba.

Este artículo apareció por primera vez en el número 231 de la revista .net, la revista más vendida del mundo para diseñadores y desarrolladores web.

Adrian Roselli Adrian es fundador, socio e ingeniero senior de usabilidad en Algonquin Studios y se especializa en HTML, CSS, JavaScript y CMS. adrianroselli.com

¿Me gusto esto? ¡Lee esto!

  • La guía definitiva para diseño de logo
  • Nuestro favorito fuentes web - y no cuestan un centavo
  • Descubra lo que sigue para Realidad aumentada
  • Descargar texturas libres : alta resolución y listo para usar ahora