Control de saltos de página

Deja que el contenido fluya de forma natural por las hojas y controla SOLO las costuras con reglas de quiebre. El paginador (Chrome, Paged.js, WeasyPrint) ya corta donde la página se llena, tú solo proteges las unidades que no deben partirse. Forzar posiciones exactas de página pelea contra el motor y genera huecos.

Un error común de HTML→PDF es meter cada sección en un <div class="page"> con height: 100vh o break-after: page. Cuando la sección es corta, la caja fija igual se come una hoja entera y deja un enorme hueco blanco debajo. Escribe secciones que fluyen y agrega saltos solo donde de verdad arranca un capítulo.

Aplica break-inside: avoid a bloques atómicos que se leen como una sola cosa: tarjetas, figuras, callouts, ítems de lista, bloques de código. Sin él el paginador puede rebanar una tarjeta y dejar su título al pie de una página y su cuerpo al inicio de la siguiente. Manten la regla en unidades CHICAS, nunca en un artículo largo, o empujas una hoja entera.

Pon break-after: avoid en h2, h3 y pies de figura para que un título nunca quede solo al pie de una página mientras su párrafo arranca en la siguiente. El motor empuja el título hacia adelante para que viaje con al menos las primeras líneas que le siguen. Es el primo paginado del control de huérfanas.

Reserva los saltos forzados para cortes estructurales reales: un capítulo nuevo, la página tras la portada, un apéndice. Usa break-before: page (o break-after: page) en esos elementos específicos, no salpicados por todos lados. Abusar de saltos forzados es justo lo que crea el problema de huecos blancos; un salto intencional por capítulo basta.

Envuelve la imagen y su figcaption en un solo <figure> y pon break-inside: avoid en la figura, no solo en la imagen. De lo contrario la foto puede caer al pie de una página y su pie en la siguiente, rompiendo la asociación entre ambos. La unidad figura completa se mueve junta.

En tablas que cruzan páginas, promueve el encabezado con thead { display: table-header-group } para que se reimprima en cada hoja, y pon tr { break-inside: avoid } para que ninguna fila se rebane. Una fila partida entre páginas, o una tabla cuyo encabezado sale una sola vez, obliga a hojear atrás para descifrar columnas.

Pon orphans: 2; widows: 2 (o 3) en el cuerpo de texto para que el paginador nunca deje una sola línea de un párrafo al pie de una página ni sola al inicio de la siguiente. orphans es el mínimo de líneas que quedan al PIE antes del corte; widows el mínimo que se lleva al INICIO después. Aplican por párrafo, no por bloque.

Las propiedades modernas break-before, break-after y break-inside reemplazan a los viejos alias page-break-*, cubren columnas y regiones también, y aceptan valores como avoid-page. Escribe las modernas; conserva el alias legado solo como respaldo para motores muy viejos como wkhtmltopdf. No mezcles valores en conflicto en el mismo elemento.

Una height fija o 100vh en contenedores de contenido codifica a mano dónde termina la página y, cuando el texto crece, o lo recorta o fuerza un corte feo. Deja que el contenido determine su propio alto con min-height como mucho, y que las reglas de quiebre decidan las costuras. El alto pertenece a la hoja (vía @page size), no a tus bloques de texto.

Las reglas de quiebre no hacen nada en una vista de scroll continuo; solo surten efecto cuando el contenido se pagina de verdad. Exporta siempre el PDF real (o usa la vista previa de impresión / la vista paginada de Paged.js) y léelo página por página para confirmar que ninguna tarjeta, fila o título quedó cortado. Un layout que se ve perfecto en pantalla puede partirse mal al fragmentarse.