Fecha de publicación: 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 publicación, se explica el modelo de página para el contenido multimedia paginado y cómo usar esta función para mejorar el resultado de impresión de tus páginas web.
El CSS incluye especificaciones que se relacionan con los medios paginados, el módulo de medios paginados del CSS y el contenido generado por CSS para medios paginados. Definen atributos que solo se usan cuando se imprime una página (incluidos los archivos PDF). Existen user-agents que admiten este CSS y te permiten generar libros y otro material impreso a partir de HTML y CSS. Sin embargo, esta funcionalidad nunca se ha admitido bien en los navegadores web, a pesar de que a menudo necesitamos imprimir o crear archivos PDF desde aplicaciones.
Chrome y Firefox admiten la at-rule @page. Esta regla te permite definir el tamaño de la página en la que imprimes 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. Para ello, segmenta la regla de margen relevante.
El modelo de página
El modelo de página que se usa en el contenido paginado define un cuadro de página, que es tu hoja de papel. Dentro del cuadro de la página, se encuentra un margen de página, un borde de página, un padding de página y, finalmente, el área de la página en la que se muestra tu contenido. Cuando se imprime el contenido, se fragmenta en tantas páginas como sea necesario para contenerlo.
Luego, el margen de la página se divide en 16 cuadros, cada uno con una at-rule 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 del cuadro de margen
La altura de los cuadros superior e inferior y el ancho de los cuadros laterales izquierdo y derecho se definen según el tamaño del margen establecido con @page. Por lo tanto, los cuadros de las esquinas tienen un tamaño fijo creado por la intersección de esos márgenes. Sin embargo, los tres cuadros entre cada esquina son flexibles. Se comportan de manera similar a los cuadros en un diseño flexible con flex: auto, por lo que se estiran para llenar el espacio, pero si colocas una cadena larga de texto en uno y nada en los demás, el que tiene el texto crecerá en lugar de unirlo.
Cómo agregar contenido a los cuadros de margen
Para agregar contenido a los cuadros de margen, usa el contenido generado por CSS, tal como lo harías con los seudoelementos ::before y ::after. En este caso, usa la regla @ relacionada con el cuadro al 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 aplica un estilo a ese texto.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Además de las cadenas de texto, puedes agregar contadores de páginas a los márgenes. El contador page predefinido contiene la página actual. El siguiente 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 usas márgenes de página
Si imprimes desde un navegador, este agregará automáticamente contenido al margen de la página si hay espacio para que se muestre. Esto se 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 hay espacio para los encabezados y pies de página del navegador, no se mostrarán.
Debido al concepto de un diseño de página predeterminado en Chromium, si la primera página de tu documento impreso no tiene espacio para el contenido automático, esto evitará que el contenido del navegador se muestre en páginas posteriores, incluso si tienen espacio.
Posibilidades futuras para el contenido multimedia paginado
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égala a los errores vinculados.
Cómo establecer cadenas
A menudo, los libros imprimen el título del capítulo actual en los márgenes. Este título no se puede codificar en tu CSS, ya que cambia a medida que avanzas en el libro. La propiedad string-set te permite establecer un valor de tu HTML para usarlo en el contenido generado. En el siguiente CSS, se supone que los títulos de los capítulos están marcados como <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>, se actualiza el valor 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 también son una función de las especificaciones de contenido multimedia paginado. 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;
}