Se encuentra en:
Formato de impresión para interfaces web
LIBP-0194 (Libro de pautas)
- Área: Catálogo de componentes de interfaces de impresión
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
Se establecen las pautas para diseñar formatos de pantallas y hojas de estilos CSS que permitan una visualización adecuada para su impresión. La combinación de listados con la posibilidad de ver todos los elementos y la aplicación de estilos adecuados, permitirán presentar interfaces optimizados para su exportación a otros formatos (xls, xml, pdf, etc) o directamente realizar su impresión en soporte papel.
Estas pantallas imprimibles son una alternativa a los tradicionales informes para impresión mediante tecnología jasperReport o similar.
Pautas
| Título | Carácter |
|---|---|
| Hojas CSS para impresión | Obligatoria |
| Eliminar elementos de navegación | Obligatoria |
| Utilizar puntos (pt) | Obligatoria |
| Utilizar fuentes legibles | Recomendada |
| Eliminar los elementos flotantes | Obligatoria |
| Establecer un color de letra y fondo por defecto | Obligatoria |
| Formato de impresión para los enlaces | Recomendada |
Hojas CSS para impresión
Se asociarán a las pantallas de listado o informe hojas de estilo optimizadas para la impresión.
Se tendrán que crear hojas de estilo css adaptadas para ocultar ciertos componentes de la pantalla y mostrar los elementos imprimibles en un formato adecuado.
Mediante el atributo media="print" se asociarán los ficheros css optimizados para transformar el interfaz tal y como se muestra en el siguiente ejemplo:
<link rel="stylesheet" href="/servicios/madeja/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/servicios/madeja/print.css" type="text/css" media="print" />
Cuando la página está visualizándose en el navegador se utilizará la primera hoja de estilos "style.css", mientras que en la impresión de la misma se hará uso de forma automática del fichero "print.css".
Eliminar elementos de navegación
El menú de navegación debe ser eliminado en el formato de impresión.
En la versión para impresión de la pantalla, no es de utilizada un menú de navegación ya que el usuario no va a pulsar sobre él. Por tanto, se debe eliminar todo lo que no forme parte del contenido. El siguiente código de ejemplo realiza esta operación:
#menu, #footer, #cabecera, .contenido-irrelevante {
display: none;
}
Utilizar puntos (pt)
Se deben utilizar pt en vez de px, %, o em en las medidas.
Los valores px, %, em, etc., son medidas pensadas para mostrar a un determinado tamaño de información en pantalla mientras que pt es el recomendado para la impresión. Así pues, la recomendación puede implementarse de la siguiente forma:
body {
font-family: Arial, sans-serif;
font-size: 10pt;
}
Utilizar fuentes legibles
Se recomienda la utilización de fuentes muy legibles para la impresión de pantalla.
La utilización de fuentes no muy legibles que inicialmente se vean correctamente en la pantalla, en la impresión, no sean bien. Se recomienda la utilización de Verdana para el texto normal y Courier New para el código fuente (ya que usa ancho fijo).
Eliminar los elementos flotantes
Eliminar los elementos flotantes de la pantalla ya que no van a imprimirse correctamente.
Normalmente, los elemento flotantes dan problemas a la hora de realizar su impresión. Es por ello que se deberán eliminar mediante la siguiente forma:
float: none;
Establecer un color de letra y fondo por defecto
Se deberá establecer un color de fondo blanco y un color de letra negro o similar con alto contraste.
Para obtener unos resultados de impresión óptimos, será necesario que el color de fondo de la pantalla sea blanco y que se establezca un color para la fuente con el suficiente contraste: negro o similar.
Un ejemplo puede ser:
body {
backgroud: #ffffff
color: #000000
}
Formato de impresión para los enlaces
Añadir un código css para imprimir los enlaces de la pantalla
Haciendo uso de la propiedad :after es posible imprimir los enlaces de una página con una visualización adecuada:
a[href]:after {
content: " (Enlace " attr(href) ")";
display: block;
color: blue;
text-decoration: none;
}
Contenidos relacionados
Pautas
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| LIBP-0011 | Funcionalidades de la capa de presentación | Libro de pautas | Directriz | Obligatoria |
