Medios paginados CSS - Regla @page

Los medios paginados se diferencian de los medios continuos en que el contenido del documento se divide en una o más páginas discretas. Los medios paginados incluyen papel, transparencias, páginas que se muestran en las pantallas de las computadoras, etc.

El estándar CSS2 introduce algunas funciones básicas de control de paginación que permiten a los autores ayudar al navegador a descubrir cómo imprimir mejor sus documentos.

El modelo de página CSS2 especifica cómo se formatea un documento dentro de un área rectangular, el cuadro de página, que tiene un ancho y un alto finitos. Estas características se dividen en dos grupos:

Funciones de CSS2 que definen un diseño de página en particular.
Funciones CSS2 que controlan la paginación de un documento.

Definición de páginas: la regla @page

El CSS2 define un "cuadro de página", un cuadro de dimensiones finitas en el que se representa el contenido. El cuadro de página es una región rectangular que contiene dos áreas:

The page area- El área de la página incluye los cuadros dispuestos en esa página. Los bordes del área de la página actúan como el bloque contenedor inicial para el diseño que se produce entre los saltos de página.
The margin area - Rodea el área de la página.

Puede especificar las dimensiones, orientación, márgenes, etc., de un cuadro de página dentro de una regla @page. Las dimensiones del cuadro de página se establecen con la propiedad 'tamaño'. Las dimensiones del área de la página son las dimensiones del cuadro de página menos el área del margen.

Por ejemplo, la siguiente regla @page establece el tamaño del cuadro de página en 8.5 × 11 pulgadas y crea un margen de '2 cm' en todos los lados entre el borde del cuadro de página y el área de la página

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

Puede usar las propiedades margin, margin-top, margin-bottom, margin-left y margin-right dentro de la regla @page para establecer márgenes para su página.

Finalmente, la propiedad de marcas se usa dentro de la regla @page para crear marcas de registro y recorte fuera del cuadro de página en la hoja de destino. De forma predeterminada, no se imprimen marcas. Puede utilizar una o ambas palabras clave de recorte y cruz para crear marcas de recorte y marcas de registro, respectivamente, en la página de impresión de destino.

Configuración del tamaño de página

La propiedad de tamaño especifica el tamaño y la orientación de un cuadro de página. Hay cuatro valores que se pueden utilizar para el tamaño de la página:

auto - El cuadro de página se establecerá con el tamaño y la orientación de la hoja de destino.
landscape- Anula la orientación del objetivo. El cuadro de la página tiene el mismo tamaño que el objetivo y los lados más largos son horizontales.
portrait- Anula la orientación del objetivo. El cuadro de página tiene el mismo tamaño que el objetivo y los lados más cortos son horizontales.
length- Los valores de longitud para la propiedad 'tamaño' crean un cuadro de página absoluto. Si solo se especifica un valor de longitud, establece tanto el ancho como el alto del cuadro de página. No se permiten valores de porcentaje para la propiedad 'tamaño'.

En el siguiente ejemplo, los bordes exteriores del cuadro de página se alinearán con el destino. El valor porcentual de la propiedad 'margen' es relativo al tamaño objetivo, por lo que si las dimensiones de la hoja objetivo son 21,0 cm × 29,7 cm (es decir, A4), los márgenes son 2,10 cm y 2,97 cm.

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

El siguiente ejemplo establece el ancho del cuadro de página en 8.5 pulgadas y la altura en 11 pulgadas. El cuadro de página en este ejemplo requiere un tamaño de hoja de destino de 8.5 "× 11" o más.

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   -->
</style>

Una vez que crea un diseño de página con nombre, puede usarlo en su documento agregando la propiedad de la página a un estilo que luego se aplica a un elemento en su documento. Por ejemplo, este estilo representa todas las tablas de su documento en páginas horizontales:

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

Debido a la regla anterior, mientras imprime, si el navegador encuentra un elemento <table> en su documento y el diseño de página actual es el diseño vertical predeterminado, inicia una nueva página e imprime la tabla en una página horizontal.

Páginas izquierda, derecha y primera

Al imprimir documentos a doble cara, los cuadros de página en las páginas izquierda y derecha deben ser diferentes. Se puede expresar a través de dos pseudoclases CSS de la siguiente manera:

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

Puede especificar el estilo de la primera página de un documento con: primera pseudoclase -

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   -->
</style>

Controlar la paginación

A menos que especifique lo contrario, los saltos de página se producen solo cuando cambia el formato de página o cuando el contenido desborda el cuadro de página actual. Para forzar o suprimir los saltos de página, utilice las propiedades page-break-before, page-break-after y page-break-inside .

Tanto el salto de página antes como el siguiente aceptan las palabras clave automática, siempre, evitar, izquierda y derecha .

La palabra clave auto es la predeterminada, permite que el navegador genere saltos de página según sea necesario. La palabra clave siempre fuerza un salto de página antes o después del elemento, mientras que evitar suprime un salto de página inmediatamente antes o después del elemento. Las palabras clave izquierda y derecha fuerzan uno o dos saltos de página, de modo que el elemento se representa en una página izquierda o derecha.

Usar las propiedades de paginación es bastante sencillo. Suponga que su documento tiene encabezados de nivel 1 y comience nuevos capítulos con encabezados de nivel 2 para indicar secciones. Le gustaría que cada capítulo comience en una nueva página de la derecha, pero no desea que los encabezados de las secciones se dividan en un salto de página del contenido posterior. Puede lograr esto usando la siguiente regla:

<style type = "text/css">
   <!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   -->
</style>

Utilice solo los valores auto y evite con la propiedad page-break-inside . Si prefiere que sus tablas no se dividan entre páginas si es posible, escribiría la regla:

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

Control de viudas y huérfanos

En la jerga tipográfica, los huérfanos son aquellas líneas de un párrafo que se quedan en la parte inferior de una página debido a un salto de página, mientras que las viudas son las líneas que quedan en la parte superior de una página después de un salto de página. Generalmente, las páginas impresas no se ven atractivas con líneas sueltas de texto en la parte superior o inferior. La mayoría de las impresoras intentan dejar al menos dos o más líneas de texto en la parte superior o inferior de cada página.

los orphans propiedad especifica el número mínimo de líneas de un párrafo que deben dejarse en la parte inferior de una página.
los widows propiedad especifica el número mínimo de líneas de un párrafo que debe dejarse en la parte superior de una página.

Aquí está el ejemplo para crear 4 líneas en la parte inferior y 3 líneas en la parte superior de cada página:

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>