Elementos corrientes: folios y encabezados

Un encabezado o pie corriente se repite en cada hoja desde el margen de la página, no desde la caja de texto. En CSS Paged Media lo colocas en una caja de margen como @top-center o @bottom-right. Hay 16 cajas (cuatro por borde mas las cuatro esquinas); la caja solo imprime si le das content. Mantenlo fuera del bloque de texto para que el cuerpo fluya intacto.

Nunca teclees numeros de pagina a mano. counter(page) da la pagina actual y counter(pages) el total del documento, asi "3 de 20" sigue correcto tras cualquier reflow. Concatena cadenas y contadores dentro de content. Un numero fijo se desincroniza en cuanto un parrafo se recorre.

Un header corriente dinamico muestra el capitulo actual. Pon string-set: chapter content() en el titulo y luego imprimelo con content: string(chapter) en la caja de margen. Paged.js acepta un segundo argumento: string(chapter, first) toma la primera asignacion de la pagina, start el valor vigente al inicio. Asi el header se mantiene sincronizado con el contenido, sin reteclear nada.

En un documento a doble cara el folio va en la esquina exterior, donde descansa el pulgar al hojear. Usa @page :left para mandarlo a @bottom-left y @page :right a @bottom-right. Un folio pegado al lomo (borde interior) es invisible al pasar hojas y pierde su unico proposito: localizar rapido.

La portada y las paginas de apertura no deben llevar header corriente y a menudo tampoco folio visible. Apunta a la primera pagina con @page :first y vacia sus cajas de margen con content: none. Dejar el header en la portada se ve amateur y satura una pagina que deberia respirar.

Cuando el header necesita marcado rico (un logo, spans con estilo, un filete) una named string no basta. GCPM permite sacar un elemento real del flujo con position: running(name) y soltarlo en una caja de margen con content: element(name). El elemento conserva su estructura y estilo. Paged.js lo soporta; ojo, es mover, no copiar, asi que el origen ya no imprime en el cuerpo.

Los preliminares (portada, creditos, indice) se numeran en romano minuscula: counter(page, lower-roman) da i, ii, iii. El cuerpo reinicia en 1 arabigo. En la primera pagina del cuerpo resetea el contador con counter-reset: page 0 sobre una pagina nombrada. Nunca corras una cuenta arabiga continua por los preliminares; delata un export sin editar.

Convencion de libro: el header del verso (izquierda, par) lleva el titulo de la obra y el header del recto (derecha, impar) el titulo del capitulo. Sepáralos con @page :left y @page :right. Asi quien abre en cualquier punto lee a la vez el libro y donde esta dentro. El mismo header en ambos lados desperdicia el par.

Las cajas de margen se dibujan dentro del margen de la pagina, asi que ese margen debe ser lo bastante alto para alojar el header o el folio con aire. Si el margen superior es muy chico, el header corriente choca con la primera linea de texto. Regla practica: deja el header al menos su propio interlineado libre del cuerpo y ajusta el margen de pagina (por ejemplo margin: 20mm 18mm). El folio vive en el margen, no encima de la copia.

Un folio es una ayuda de orientacion, no un titular. Ponlo un par de puntos bajo el cuerpo (aprox. 8 a 9pt para un cuerpo de 10 a 11pt), en tono tenue (var(--text-2)), en la misma familia que el texto. Un folio grande, en negrita y a color compite con el contenido y abarata la pagina. Discreto y consistente le gana a llamativo siempre.

Headless Chrome --print-to-pdf ignora las cajas de margen, las named strings y counter(pages): tu @top-center simplemente no imprime nada. Dos salidas: usar Paged.js (un polyfill JS que construye margin boxes reales, headers corrientes y contadores en el navegador) o WeasyPrint, o dar la plantilla de header/footer propia de Chrome via banderas de --print-to-pdf con class="pageNumber" / class="totalPages". No esperes que Chrome puro respete GCPM.