Cuando diseñamos páginas web, asumimos que el lienzo del navegador es un espacio continuo e infinito que fluye verticalmente de forma ilimitada. Sin embargo, cuando nos enfrentamos a la necesidad de generar un informe corporativo, una factura comercial o un currículum técnico para descargar en **formato PDF**, la naturaleza del medio cambia radicalmente. Pasamos de un canvas infinito a una estructura física de páginas discretas y delimitadas (como Carta o A4).

Para controlar la visualización del contenido web en medios paginados físicos de forma estricta, la W3C (World Wide Web Consortium) desarrolló el **CSS Paged Media Module Level 3**. Esta especificación añade un conjunto de propiedades especiales en CSS para definir los márgenes de impresión, la orientación del papel, el control de huérfanas y viudas, y el forzado de saltos de página nativos.

El Estándar W3C: El módulo de medios paginados introduce la regla `@page`, la cual nos permite aplicar márgenes, dimensiones físicas y cabeceras/pies de página dinámicos al lienzo de impresión del navegador web, puenteando el viewport regular.

La Regla Estructural `@page` y el Contexto de Página

A diferencia de las reglas CSS ordinarias que seleccionan elementos del árbol DOM, la directiva `@page` apunta directamente al contenedor físico de la página. Bajo esta directiva, podemos configurar propiedades críticas de maquetación vectorial:

/* Configuración avanzada de impresión nativa en Markdify */
@media print {
  @page {
    size: letter portrait; /* Formato Carta físico */
    margin: 15mm 12mm 15mm 12mm; /* Márgenes consistentes */
  }
  
  /* Selectores específicos para páginas pares o impares si se requiere encuadernación */
  @page :left {
    margin-left: 20mm;
  }
  @page :right {
    margin-right: 20mm;
  }
}

Propiedades Fundamentales de Control de Flujo Paginado

Para asegurar que un documento técnico no se corte de forma caótica (por ejemplo, dejando el título de una sección al final de la página y el texto explicativo en la página siguiente), la especificación define un grupo de propiedades de control de corte:

  • `page-break-before` / `break-before`: Fuerza a un elemento específico a renderizarse estrictamente al inicio de una página limpia. Es ideal para que los capítulos o secciones principales (`h2`) inicien siempre de forma ordenada.
  • `page-break-after` / `break-after`: Inserta un salto de página inmediatamente después del elemento seleccionado. En Markdify inyectamos esto de forma interactiva usando `
    ` en el Markdown.
  • `page-break-inside` / `break-inside: avoid`: Evita que un elemento unitario (como una celda de tabla o un bloque de código) se divida a la mitad entre dos páginas físicas. El navegador moverá todo el elemento a la página siguiente de manera inteligente si detecta que no cabe por completo en el espacio disponible.
  • `orphans` (Huérfanas) y `widows` (Viudas): Controlan el número mínimo de líneas de un párrafo que pueden quedar solas al final (`orphans`) o al principio (`widows`) de una página física. Configurar estas propiedades en `3` garantiza que el navegador mantenga la cohesión visual de los párrafos técnicos.
/* Previene cortes feos en tablas y bloques de código */
@media print {
  table, pre, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid; /* Los títulos nunca quedan solos al final */
  }
}

Referencias Oficiales