En CSS se puede controlar que y como se imprimira una pagina web. A esto se le llama los estilos de medios paginados. La llamada se hace con LINK.
<LINK type="text/css" media="print" href="impresion.css" />
Pero también se puede hacer en la propia pagina.
<Style>
@media print {
//Aqui las reglas CSS
}
</Style>
Se genera una caja general donde se aloja todo el contendido. Esta caja se conoce como page y es el mismo que en media=screen. El tamaño total de la caja = margen + border + padding + width o height.
| Valor | Horizontal | Vertical |
|---|---|---|
| top-left | left | middle |
| top-center | center | middle |
| top-right | right | middle |
| top-left-corner | right | middle |
| top-right-corner | left | middle |
| left-top | center | top |
| left-middle | center | middle |
| left-bottom | center | bottom |
| bottom-left | left | middle |
| bottom-center | center | middle |
| bottom-right | right | middle |
| bottom-left-corner | right | middle |
| bottom-right-corner | left | middle |
| right-top | center | top |
| right-middle | center | middle |
| right-bottom | center | bottom |
Ten presente el área no imprimible: Es el área de una hoja en la que un dispositivo físico, como una impresora, no es capaz de imprimir, por lo general debido al mecanismo de la impresora. Este valor depende de la impresora y es generalmente una pequeña región a lo largo de cada borde de la hoja de papel.
Define el tamaño de la caja page.
@page{
size: portrait;
@top-left{
content: "Titulo";
}
@top-right{
content: "Pag. " counter(page);
}
}
| Valor | Descripcion |
|---|---|
| auto | valor por defecto. |
| portraint | orientacion vertical. |
| landscape | orientacion horizontal. |
| absoluto | A4, A0, A3, letter etc |
size: A4 landscape; page-size: 190mm; page-size: auto;
| Pseudocase | Descripcion |
|---|---|
| :first | para la primera página. |
| :left | para las páginas que su posición será a la izquierda. |
| :right | para las páginas que serán encuadernadas a la derecha. |
| :blank | selecciona las páginas sin contenido (en blanco) que se generan por los saltos de página. |
@page :left {
margin-left: 3cm;
margin-right: 4cm;
}
Para evitar que ciertos elementos se corten y repartan en 2 páginas se puede definir los saltos de página antes: page-break-before, después: page-break-after (no se heradan) o dentro page-break-inside del elemento (Si se heredan). Estos saltos de página sólo se pueden aplicar a elementos de bloque.
| Valor | Descripcion |
|---|---|
| auto | Ni fuerza ni prohibe un salto de página antes (después) de la caja generada. |
| always | Siempre fuerza un salto de página antes (después) de la caja generada. |
| avoid | Evita un salto de página antes (después) de la caja generada. |
| left | Fuerza uno o dos saltos de página antes (después) de la caja generada para que la siguiente página sea compuesta como una página izquierda. |
| right | Fuerza uno o dos saltos de página antes (después) de la caja generada para que la siguiente página sea compuesta como una página derecha. |
@page:blank {
@top-center {
content: 'Esta es una página en blanco';
/*otras declaraciones*/
}
}
La propiedad orphans (huérfanas) especifica el número mínimo de líneas de un párrafo que deben dejarse al final de una página. La propiedad widows (viudas) especifica el número mínimo de líneas de un párrafo que deben dejarse al comienzo de la página.
orphans: 4; widows: 2;
En los medios impresos también es posible generar contenido vía CSS además de con los pseudoelementos "tradicionales" con los Page-Margin Boxes mencionados antes. Y en conjunción con las pseudoclases :left :right :first :blank especificar en qué tipo de páginas generarlo.
@page:left {
@bottom-left {
content: counter(pagina);
}
}
@page:right {
@bottom-right {
content: counter(pagina);
}
}
También es posible que cierto contenido sea movido al pie de la página y que se muestre como las típicas notas a pie de página.
@page {
@footnote {
float: bottom;
}
}
span.nota_al_pie {
float: footnote;
}
>p>Algo de texto... XXX >span class="nota_al_pie">yyy>/span>... >/p>