CSS para imprimir

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>

1. Modelo de caja

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.

ValorHorizontalVertical
top-leftleftmiddle
top-centercentermiddle
top-rightrightmiddle
top-left-cornerrightmiddle
top-right-cornerleftmiddle
left-topcentertop
left-middlecentermiddle
left-bottomcenterbottom
bottom-leftleftmiddle
bottom-centercentermiddle
bottom-rightrightmiddle
bottom-left-cornerrightmiddle
bottom-right-cornerleftmiddle
right-topcentertop
right-middlecentermiddle
right-bottomcenterbottom

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.

2. Size

Define el tamaño de la caja page.

@page{
   size: portrait;
   @top-left{
      content: "Titulo";
   }
   @top-right{
      content: "Pag. " counter(page);
   }
}

Page-size
ValorDescripcion
autovalor por defecto.
portraintorientacion vertical.
landscapeorientacion horizontal.
absolutoA4, A0, A3, letter etc

size: A4 landscape;
page-size: 190mm;
page-size: auto;

3. Pseudoclases

Pseudoclases
PseudocaseDescripcion
:firstpara la primera página.
:leftpara las páginas que su posición será a la izquierda.
:rightpara las páginas que serán encuadernadas a la derecha.
:blankselecciona las páginas sin contenido (en blanco) que se generan por los saltos de página.
@page :left {
   margin-left: 3cm;
   margin-right: 4cm;
}

4. Salto de pagina

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.

Valores de page-break-before y page-break-after
ValorDescripcion
autoNi fuerza ni prohibe un salto de página antes (después) de la caja generada.
alwaysSiempre fuerza un salto de página antes (después) de la caja generada.
avoidEvita un salto de página antes (después) de la caja generada.
leftFuerza 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.
rightFuerza 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*/
   }
}

5. Orphans y widows

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;

6. Contadores

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);
   }
 }

7. Nota de pie de 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>