@page :nth( ) Selector Css de página en medios paginados 8.6.14

@page :nth( ) Selector Css de página en medios paginados

Las especificaciones de Css tienen un grupo o apartado dedicado en exclusiva a controlar el contenido de los documentos cuando su salida es un medio paginado. Hace ya un tiempo le dediqué un artículo (Estilos Css para imprimir: La regla @page en los medios paginados) que si bien está plenamente vigente no recoge, como es lógico, las novedades que el consorcio ha ido añadiendo.

Recientemente fue publicado el módulo CSS Generated Content for Paged Media (status WD) que desarrolla algunos aspecto relacionados con los medios paginados y el contenido generado por Css en ese medio.

Entre otras novedades hay alguna que merece la pena, a mi entender, tener presente e ir conociendo por su practicidad y posibilidad de uso para aquellos que tengáis que lidiar con salidas impresas.

Seleccionar cualquier página o grupo de ellas

Css ya definía algunas pseudoclases para el control de la primera página @page :first, y las páginas a izquierda y derecha, @page :left y @page :right respectívamente además de @page :blank para las páginas en blanco que pueden surgir por los page break forzados.

Ahora en el documento del que te hablo desarrolla una nueva pseudoclase para poder seleccionar desde la hoja de estilos cualquier página o grupo de ellas: el selector @page :nth( ).

Nota que en el uso de todas estos selectores hay un espacio en blanco precediendolos.

@page :nth(1)

Selecciona la primera página del documento. Equivalente a @page :first

@page :nth(2n)

Selecciona todas las páginas pares.

El selector :nth( ) funciona y admite operadores de la misma forma que lo hace al declararse a cualquier otro elemento.

Cuando el selector :nth( ) se aplica a una página y esa página pertenece a un grupo (page-group) selecciona la enésima página dentro del grupo, no del documento.

Grupos de páginas

Muchos documentos paginados tienen una estructura que se repite: capítulo -> sección --> apartados... Css no contemplaba este hecho y no tenía forma de apuntar a las páginas en función de estos grupos.

Estos grupos se crean de forma automática tras un salto de página forzado (break page). Ahora también es posible hacerlo a voluntad.

Cada div crea el grupo de páginas "A" y sus hijos (elementos <child>´s en la imagen) el grupo de páginas "B". Una misma página puede pertenecer a distintos grupos como ocurre con la 5ª página de la imagen. Así es posible acceder a ella desde la hoja de estilos con diferentes selectores:

@page :nth(5 of A)

Selecciona cada 5ª página de los <div>´s

@page :nth(1 of B)

Selecciona la primera página de cada <child>

@page :nth(5)

Selecciona la 5ª página del documento.

Otras novedades

Este documento además viene con otras novedades igual de interesantes o más que éstas. Entre otras la generación de encabezados y notas a pie de página con su contenido mediante Css.

Si le echas un vistazo también podrás informarte sobre las funciones content(), string() y las referencias cruzadas dentro del documento target-counter() o las marcas o Bookmarks. Entre otras.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso