Medios paginados

Existe una particularidad de CSS denominada CSS Paged Media, que no es más que un conjunto de características y propiedades específicas para medios paginados, como por ejemplo podrían ser, documentos impresos o la exportación en archivos .pdf.

La regla @page

Existen varias propiedades CSS interesantes para estos medios, que pueden ser utilizadas dentro de un bloque @page:

Propiedad Valores Significado
size auto | tipo documento | Indica el ancho y alto de cada página.
margin Idéntica a la propiedad margin que conocemos.

Mediante la propiedad size se puede establecer el formato de la página, tanto mediante los valores predefinidos portrait o landscape (vertical o apaisado), como especificando las medidas mediante unidades:

@page {
  size: 8.27in 11.69in;  /* DIN A4 */
  margin: .5in .5in .5in .5in;
}

De forma adicional, también puedes indicar el tipo de documento mediante algunas palabras clave como valor de la propiedad size (las cuales se pueden usar junto a landscape o portrait para definir su orientación):

Valor Medidas Significado
A5 148mm×210mm Documento de mitad de tamaño de un folio DIN A4.
B5 176mm×250mm Documento de tamaño entre A5 y A4.
A4 210mm×297mm Documento de exactamente el tamaño folio DIN A4.
B4 250mm×353mm Documento de tamaño entre A4 y A3.
A3 297mm×420mm Documento del doble de tamaño de un folio DIN A4.
letter 215.9mm×279.4mm Documento de tamaño de las cartas americanas.
legal 215.9mm×355.6mm Documento de tamaño de notificación legal americana.
ledger 279.4mm×431.8mm Documento de tamaño libro americano.

Nota: Cualquier propiedad utilizada dentro de una regla @page que no sea una de las anteriores será ignorada.

Una vez tenemos definida la estructura de cada página del documento, pasaremos de una página web que tiene una estructura continua a un documento paginado, donde cada cierto tamaño tiene un salto de página que interrumpe el contenido.

Paginación de contenidos

Al establecer dichos saltos de página, el contenido se adapta al tamaño de cada página especificado, pero puede ocurrir que debido a los límites impuestos por los saltos de página, un cierto contenido se corte a la mitad y se vea continuado en la siguiente página, comportamiento no deseable en prácticamente el 100% de los casos.

Orphans & Widows

Existen casos en los que el comportamiento descrito anteriormente no sea un problema, sin embargo, pueden darse muchos casos en los que sí lo sería:

  • Una imagen o una tabla empieza al final de una página (se muestra cortada).
  • Un párrafo de texto comienza en la última línea de una página (es poco atractivo).
  • Un nuevo tema comienza a mitad de página (lo ideal sería comenzar a principio de página).

Para evitar estos problemas de paginación se suelen utilizar algunas propiedades interesantes:

Propiedad Valores Significado
orphans Número de líneas «huérfanas» permitidas (antes de salto)
widows Número de líneas «viudas» permitidas (después de salto)

Mediante la propiedad orphans (líneas huérfanas) indicamos hasta que número de líneas no vamos a permitir que aparezcan de forma aislada al final de una página.

Por ejemplo, si especificamos orphans: 3, significa que cualquier párrafo cortado con el salto de página, debe mostrar más de 3 líneas al final de la página. En caso contrario, se moverá el párrafo completo a la siguiente página.

p {
  orphans: 3;
  widows: 3;
}

Por otra parte, la propiedad widows (líneas viudas) es la propiedad opuesta a orphans. Si al principio de una página quedan menos de ese número de líneas indicado en widows, se ajusta para que lo supere.

Saltos de página

Por último, mencionar las propiedades de salto de página, muy útiles para evitar comportamientos que pueden quedar poco atractivos en un documento paginado:

Propiedad Valores Significado
page-break-inside auto | avoid Evita cortar elementos en un salto de página
page-break-before auto | always | avoid | left | right Evita o crea un salto de página antes del elemento
page-break-after auto | always | avoid | left | right Evita o crea un salto de página después del elemento

La propiedad page-break-inside se utiliza para evitar que un cierto elemento pueda ser cortado a la mitad en un salto de página, como por ejemplo imágenes, tablas o fragmentos de código:

@media print {
  table,
  img,
  pre,
  code {
    page-break-inside: avoid;
  }
}

De forma similar, las propiedades page-break-before y page-break-after se utilizan para evitar o forzar al generar el documento paginado que ciertos elementos se mantengan antes o después del salto de página.

Pseudoclases de página

También existen algunas pseudoclases específicas para paginación, que permiten hacer referencia a páginas concretas del documento generado, pudiendo aplicar estilos sólo a este tipo de páginas:

Pseudo-clase Significado
:first Primera página del documento paginado.
:left Páginas izquierdas del documento paginado.
:right Páginas derechas del documento paginado.
:blank Páginas en blanco (generadas por los saltos de página).

Sólo algunas propiedades CSS como margin, padding, background u otras pueden estar permitidas dentro de estas pseudoclases especiales.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.