General
Hay varias formas de imprimir una página de un sitio web. Una posibilidad es utilizar el comando de impresión que ofrece el navegador. Otra es establecer un enlace (texto o icono) en la página web. Si se dispone de un archivo CSS de impresión, se puede imprimir una página con formato adicional.
Imprimir sin imprimir CSS:
- Se imprime toda la página web, incluida la información innecesaria, por ejemplo, la publicidad o la navegación.
- Las imágenes de fondo y los colores sólo se imprimen si el usuario ha realizado los ajustes necesarios en su configuración de impresión. Por lo tanto, es posible que el texto blanco sobre un fondo de color en el sitio web no sea visible en la impresión.
- La anchura de la página web no se corresponde con la anchura de impresión.
Impresión con CSS de impresión:
- salida visual controlable para la impresión
- Se pueden eliminar elementos innecesarios, como barras de menú o anuncios.
- Fuente más fácil de leer para la impresión (serif)
- También se pueden imprimir las URL de los enlaces
- Se pueden ajustar varios colores de fuentes poco legibles
Los archivos CSS para los distintos medios se integran en el Typoscript en la configuración de la siguiente manera:
2. dentro de un archivo CSS que se integró en la configuración de TypoScript como se muestra arriba:
Toda la información de estilo se inserta en el archivo CSS definido para todos los medios entre las llaves. Ejemplo para body:
@media print { ...body { font-family: Georgia,'Times New Roman',Times,serif; background-color: transparent; font-size: 12pt; color:#000; }
...
}
Ejemplo de archivo CSS para impresión
/* font-family for print view */ * {font-family: Georgia,'Times New Roman',Times,serif; background-color: transparent;} body { font-size: 12pt; color:#000; line-height: 1.4; word-spacing:1.
1pt; letter-spacing:0.2pt; width:100% !important; margin:0 !important; padding:0 !important; } /* elementos ocultos para la vista de impresión */ #header,#rootline,#footer,#printlink,#servicemenu,.
nav,#search,#logo {display: none;} /* establecer todos los márgenes y paddings del diseño a 0px */ #content {padding: 0; margin: 0;} /* desactivar float para elementos visibles */ #contentWrap,#contentMain,#contentRight,#contentBorder {float:
none;} /* establecer el ancho de cada columna al 100% */ #contentMain,#contentRight,#contentBorder {width: 100%;} /* establecer líneas entre la salida de cada columna, mejora la legibilidad*/ #contentMain,#contentRight,#contentBorder {border-bottom:
3pt solid #ccc; padding-bottom: 30pt; margin-bottom: 30pt;} /* establecer elementos posicionados absolutos de nuevo a estáticos */ #language {position: static; clear: both;} /* establecer color de fuente a negro */ a,h1 a,h2 a,h3 a,h4 a,h5 a,h1,h2,h3,h4,h5 {font-weight:
bold; color:#000;} /* establecer URL después de los enlaces */ a[href]:after { background-color: inherit; color: #666; content: " (http://domain.
tld/" attr(href) ")"; font-style: italic; } a.external-link[href]:after, table a.external-link[href]:after, a.
external-link-new-window[href]:after, table a.external-link-new-window[href]:after { content: " (" attr(href) ")"; } /* no se muestra el enlace para E-Mail etc.
*/ a.mail[href]:after, table a[href]:after, .csc-textpic-imagewrap a[href]:after { content: " "; } /* desactivar la posición de la imagen en el centro y a la derecha encima o debajo del texto */ div.
csc-textpic-center div.csc-textpic-imagewrap {margin: 0;} div.
csc-textpic-right div.csc-textpic-imagewrap {width: 100%;} div.csc-textpic-center {text-align: left;} /* salto de línea para pre */ pre {white-space: pre-wrap;} /* tablas */ thead {display: table-header-group;} tr {page-break-inside: avoid;}
Aktualisiert: 15.08.2024