Publicado el 30 de octubre de 2024
A partir de Chrome 131, puedes usar CSS para agregar contenido a los márgenes de las páginas cuando se imprimen. En esta entrada del blog, se explica el modelo de página para medios paginados y cómo usar esta función para mejorar el resultado de impresión de tus páginas web.
CSS incluye especificaciones que se relacionan con los medios paginados, el módulo de medios paginados de CSS y el contenido generado por CSS para medios paginados. Definen funciones que solo se usan cuando se imprime una página (incluso en PDF). Existen agentes de usuario que admiten este CSS y te permiten generar libros y otros materiales impresos a partir de HTML y CSS. Sin embargo, esta funcionalidad nunca se admitió bien en los navegadores web, a pesar de que a menudo necesitamos imprimir o crear PDFs desde las aplicaciones.
Chrome y Firefox admiten la regla @@page. Esta regla te permite definir el tamaño de la página en la que imprimirás y el tamaño de los márgenes alrededor del contenido. A partir de Chrome 131, también puedes usar contenido generado para agregar contenido a los márgenes segmentando la regla @ de margen pertinente.
El modelo de página
El modelo de página que se usa en los medios paginados define una caja de página, que es tu hoja de papel. Dentro del cuadro de la página, se encuentran el margen de la página, el borde de la página, el relleno de la página y, por último, el área de la página donde se muestra tu contenido. Cuando se imprime el contenido, se fragmenta en tantas páginas como sean necesarias para contenerlo.
Luego, el margen de la página se divide en 16 cuadros, cada uno con una regla @ correspondiente.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
Tamaño de la caja de margen
La altura de las cajas superior e inferior, y el ancho de las cajas laterales izquierda y derecha se definen según el tamaño del margen establecido con @page. Por lo tanto, las cajas de esquinas tienen un tamaño fijo creado por la intersección de esos márgenes. Sin embargo, las tres cajas entre cada esquina son flexibles. Se comportan de manera similar a las cajas en un diseño flexible con flex: auto, por lo que se estiran para llenar el espacio, pero si colocas una cadena de texto larga en una y nada en las demás, la que tiene el texto crecerá en lugar de ajustarlo.
Cómo agregar contenido a los cuadros de margen
Para agregar contenido a los cuadros de margen, usa el contenido generado por CSS, al igual que lo harías con los seudoelementos ::before y ::after. En este caso, usa la regla @ relacionada con la caja a la que deseas segmentar. El siguiente código CSS agrega el texto "Mi libro" al cuadro de margen inferior izquierdo o a las páginas de la derecha. También le aplica un estilo a ese texto.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Además de cadenas de texto, puedes agregar contadores de páginas a los márgenes. El contador page predefinido contiene la página actual. El siguiente código CSS lo agrega a la parte inferior derecha de las páginas de la derecha y a la parte inferior izquierda de las páginas de la izquierda.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
También hay un contador pages que siempre contiene la cantidad total de páginas.
Aspectos que debes tener en cuenta cuando uses márgenes de página
Si imprimes desde un navegador, este agregará automáticamente contenido de margen de página si hay espacio para mostrarlo. Lo hará incluso si agregaste contenido. Estos encabezados y pies de página generados automáticamente se pueden desactivar en el diálogo de impresión.
Si estableces los márgenes de una página en 0 o en un valor tan pequeño que no haya espacio para los encabezados y pies de página del navegador, no se mostrarán.
Debido al concepto de diseño de página predeterminado en Chromium, si la primera página del documento impreso no tiene espacio para el contenido automático, esto impedirá que el contenido del navegador se muestre en páginas posteriores, incluso si tienen espacio.
Posibilidades futuras para los medios paginados
Las especificaciones de medios paginados incluyen varias otras funciones, que se describen en el artículo Diseño para impresión con CSS. Si tienes un caso de uso para alguna de las siguientes funciones, agrégalo a los errores vinculados.
Cadenas de configuración
A menudo, los libros imprimen el título del capítulo actual en los márgenes. Este título no se puede codificar de forma rígida en tu CSS, ya que cambia a medida que avanzas en el libro. La propiedad string-set te permite establecer un valor desde tu código HTML para luego usarlo en el contenido generado. El siguiente CSS supone que los títulos de los capítulos están marcados como un <h1>. Toma el contenido de cada <h1> y lo usa en el margen superior derecho de las páginas de la derecha. Cuando llega al siguiente <h1>, el valor se actualiza para los márgenes después de ese punto.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Error de Chromium para string-set y string().
Referencias cruzadas
Una vez que se imprime un documento, las referencias a otras páginas suelen indicarse con el número de página en el que se puede encontrar la referencia. Estas referencias cruzadas se pueden crear con target-counter. Cuando se aplica a un vínculo, este funciona para saltar a la referencia en la Web. Cuando se imprime, se muestra el número de página.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Error de Chromium para referencias cruzadas.
Pies de página
Las notas al pie de página también son una función de las especificaciones de medios paginados. En HTML, usa una clase para identificar el texto que debe ser una nota al pie, por ejemplo:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Luego, usa el valor footnote de float para convertir este texto en notas al pie. Se quitará del párrafo cuando se imprima el documento y se mostrará como una nota al pie.
.fn {
float: footnote;
}