Medios paginados

Media queries para adaptar contenido a páginas


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: 0.5in 0.5in 0.5in 0.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. Estas propiedades pueden utilizarse tanto en medios paginados (contexto en el que estamos en este artículo), como en multicolumnas, donde tiene un soporte menor:

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

La propiedad 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 {
    break-inside: avoid;
  }
}

De forma similar, las propiedades break-before y 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.

Fragmentos rotos

Se considera un fragmento roto, cuando tenemos un elemento que, por las medidas del padre, se «interrumpe» y continua en la línea siguiente, pero por su naturaleza, da la impresión que se ha roto. Para cambiar este comportamiento, podemos utilizar la propiedad box-decoration-break:

Propiedad Valores Significado
box-decoration-break slice | clone Determina si se debe «partir» el elemento, o clonar en varias partes.

Un ejemplo claro del uso de esta propiedad, se puede ver en el siguiente ejemplo:

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam excepturi
    similique iure voluptate beatae cum libero, <span>assumenda expedita
    possimus, neque hic minus</span>, enim eveniet temporibus quibusdam
    fuga cupiditate laborum maxime.</p>
</div>

<style>
.container {
  width: 200px;
}

span {
  border: 3px solid black;
  background: gold;
  box-decoration-break: clone;
}
</style>

Observa que el elemento <span>, un elemento que tiene una naturaleza en línea, se podría ver «partido» si tiene definido un borde y/o un fondo. Este es el comportamiento por defecto de la propiedad, que está establecida al valor slice. Podemos indicarle el valor clone, si lo que queremos es que el navegador cree varios clones independientes y «cierre» las partes, en lugar de mostrarla con aspecto de estar roto o «partido».

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.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev