4

Necesito su ayuda para poder poner el numero de cada pagina no me sale. Ya intente con el siguiente codigo.

En HTML puse ese campo hasta al final

<div id="footer" class="row justify-content-center">
    <div class="row" style="width: 1141px;">
        <div class="col" style="margin-left: 174px;"></div>
        <div class="col"><img src="./images/avaxLogo.jpg" style="width: 150px;"></div>
        <div class="col">
            <p style="text-align: right; color: gray;" class="pageFooter"></p>
        </div>
    </div>
</div>

Y en CSS estos estilos le puse lo siguiente

.pageFooter:before {
  content: counter(page) ' of ' counter(page);
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
}

Y solo imprime lo siguiente introducir la descripción de la imagen aquí

Se supone que las paginas que tengo son 15 y solo me muestra siempre 1 0f 1 y si pongo lo siguente

counter-increment: pages;

Me pone 1 of 0, 2 of 2 o 1 of 1 y yo necesito que me muestre 1 of 15, 2 of 15 y asi sucesivamente sin que se repita o si hay alguien que me pueda explicar como mandar a llamar tanto el CSS y HTML la regla @page.

De antemano muchas gracias por su ayuda.

2
  • 1
    por si lo he entendido quieres que salga el número de página cuando se imprime el html? Pero eso ya lo hace el navegador por defecto. Cuando imprimes te salen enumeradas las páginas. Cuando estas en una pagina y le das a imprimir ya te salen
    – hawks
    Commented el 15 abr. 2020 a las 18:56
  • Solo que no quiero que salga el link y el nombre del documento por eso quiero buscar una forma de hacerlo con CSS Commented el 15 abr. 2020 a las 19:30

1 respuesta 1

2

Combinando CSS custom properties y la propiedad counter se puede conseguir lo que comentas.

Para ello es necesario, tener un selector que nos sirva de contador de paginas.

La propiedad CSS counter-reset permite crear contadores para selectores y así saber cuantas veces aparece dicho selector en el html. En mi caso, he usado la clase .page para contar cuantas veces aparece y así tener el total de las paginas.

En el fichero CSS he creado una variable --total-pages y le asigno 0 y luego mediante javascript busco cuantas veces hay un elemento con la clase .page y así setear el valor --total-pages al valor obtenido.

Luego inicializo 2 contadores uno para contar las paginas y el otro para el total. Pero solo incremento el de las paginas tal como ya lo tenias en tu código.

 counter-reset: page-counter 0 total-pages var(--total-pages);

Espero que te sirva.

const totalPages = document.querySelectorAll('.page').length;
document.documentElement.style.setProperty('--total-pages', totalPages);
:root {
  --total-pages: 0;
}

html {
  box-sizing: border-box;
}

body {
  counter-reset: page-counter 0 total-pages var(--total-pages);
}

.page {
  min-height: 100vh;
  width: 80vw;
  background: lightblue;
  margin-bottom:1rem;
}

.page::before {
  counter-increment: page-counter 1;
  content: counter(page-counter) " of " counter(total-pages);
}
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>

Me he basado en esta respuesta

2
  • Y para colocarlo al final también funciona el bottom: 0; O como seria? Commented el 15 abr. 2020 a las 22:39
  • lo he mirado y es bastante complicado hacer la paginación cuando se imprime. Hay varios workarounds pero quizá no funcione ninguno. En la respuesta que he dado no pensé que el tamaño del element .page dependerá del contenido que tenga y no siempre será 100vh. Puedes mirar este artículo si te sirve smashingmagazine.com/2015/01/designing-for-print-with-css
    – hawks
    Commented el 16 abr. 2020 a las 8:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.