javascript - bootstrap - HTML impreso por página notas al pie

title html css

Question

La especificación de CSS3 GCPM definió lo siguiente

<style>
 .footnote { float: footnote }
</style>

<p>A sentence consists of words. <span class="footnote">Most often.</span>.

renderizando como

Una oración consiste en palabras. ¹

¹ Más a menudo. [al final de (cada) página]

cuando se imprime (también funciona para el tipo de medio de pantalla, pero siempre y cuando funcione para imprimir, estoy feliz).

Que es exactamente lo que quiero hacer, no importa lo complejo que sea, pero por lo que sé, ningún navegador moderno implementa esta especificación, ni la especificación de paginación css. ¿Hay alguna forma de lograr este efecto si estoy dispuesto a usar javascript? Como mínimo, sería posible generar un pdf utilizando algunas bibliotecas, pero si es posible no me gustaría perder el poder de html (cosas como flotadores, etc.).

Y por si acaso te estás preguntando, las notas son

Una nota es una cadena de texto colocada en la parte inferior de una página en un libro o documento o al final de un capítulo, volumen o el texto completo.

y las notas al pie son

... notas al pie de la página, mientras que las notas finales se recopilan bajo un encabezado separado al final de un capítulo, volumen o trabajo completo.

Para más información me refiero a la página de wikipage en notas en tipografía .

Una posible dirección en la que se puede buscar una solución es calcular la altura de una página, en ese caso, se observa una disparidad entre la altura esperada de 29.7cm y la altura de prueba y error (al menos en mi sistema) de 26.1cm , esto puede ser Observado usando el siguiente código:

<style>
    @page{
        margin:0px;
        padding:0px;
    }
    html,body,*{
        margin:0px;
        padding:0px;
    }
    p{
        border:1px solid black;
        height:26.1cm;
    }
</style>

y un par de <p> vacíos. Consideraría que una explicación de esta disparidad (permitiendo así su control) es una solución suficiente.

Answer 1

Espero que esto sea lo que está buscando ... Se basa en esta respuesta con algunos ajustes para el caso de uso específico.

En mi opinión, el contador css es la parte divertida.

Resultado de pantalla completa <- Pruebe la vista previa de impresión en este
Ejemplo de trabajo

HTML:

<div id="pagewrapper1">
    <p>Zombies<sup>1</sup> reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit, morbo vel maleficia? De Apocalypsi undead dictum mauris brains<sup>2</sup>. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.<sup>3</sup>

    </p>
    <ol class="footnotes">
        <li>This is a foot note about Zombies.</li>
        <li>This is a foot note about Brains.</li>
        <li>This is a foot note about Horror.</li>
    </ol>
</div>
<div id="pagewrapper2">
    <p>Zombies<sup>4</sup> reversus ab inferno... and so on...

CSS:

*{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-size: 1em;
    padding:0;
    margin:0;
    height:100%;
}
#pagewrapper1, #pagewrapper2 {
    position:relative;
    border: 1px solid #000;
    min-height:100%;
    -webkit-region-break-inside: avoid; /* added these bits to work out print issue */
    page-break-after: always;
    page-break-inside: avoid;
}
p {
    margin:20px;
}
sup {
    font-size: .6em;
}
ol.footnotes {
    list-style-type: none;
    margin-left: 3em;
    position: absolute;
    bottom:0;
}
ol.footnotes > li {
    counter-increment: customlistcounter;
}
ol.footnotes > li:before {
    content: counter(customlistcounter)" ";
    position:relative;
    top:-4px;
    font-size: .6em;
    width: 3em;
}

jQuery para posición y contador:

$(''#pagewrapper1, #pagewrapper2'').css({
        ''padding-bottom'': $(''.footnotes'').height()
});

$(''#pagewrapper2 ol.footnotes'').css({
    ''counter-reset'': ''customlistcounter '' + $(''#pagewrapper1 ol.footnotes li'').size()
});

He jugado con esto un poco más, la vista previa de impresión se ve bien en Firefox, Chrome e IE10, pero parece tener problemas en Safari.

Answer 2

He estado usando PrinceXML para hacer exactamente lo que estás diciendo, la desventaja es que debes instalarlo en tu computadora con un script de shell.

Un colega y yo estamos trabajando en una aplicación simple que es básicamente un editor de texto html pero que podemos exportar el html como un PDF, con una tabla de contenido, notas al pie y todo.

Prince es el mejor que hemos encontrado hasta ahora. Déjame saber si esto no es algo que funcione para ti.

Answer 3

Primero en responder tu pregunta sobre la altura de la página 26.1cm vs 26.1cm . Esto se puede atribuir a algunas causas, que incluyen al menos las siguientes:

1. Su impresora actual puede imponer sus propios márgenes no imprimibles causados ​​por su mecanismo de impresión.
2. Su navegador actual agrega sus propios márgenes para encabezados y pies de página, etc. y puede suprimirlos o no dependiendo de si el usuario ha elegido suprimir los encabezados y pies de página. Algunos navegadores suprimen, otros retienen el espacio y lo eliminan.

Ninguna de estas dos fuentes está disponible para el autor de la página para interrogarla.

Pero...

He logrado desarrollar una solución JQuery que hará que las notas a pie de página se comporten como deberían.

1. La nota al pie incrustada se extrae, se cuenta automáticamente y se reemplaza por un número de superíndice. Es decir:

   <div>My first sentence consists of words<span class="footnote">My first footnote.</span></div>

   se convierte en

   <div>My first sentence consists of words<sup>1</sup></div>

   con el texto

   1 My first footnote.

   en la parte inferior de la "página" de tamaño de impresión actual.

2. El contenido del documento se formatea en "páginas" al insertar las notas a pie de página de la página al final de cada "página" en tamaño de impresión. No se necesita ninguna inserción especial <div> por página.
3. La solución no divide un bloque de texto, sino que inserta las notas a pie de página entre los bloques de texto existentes (la solución admite la exploración de elementos de nivel superior <div> o <p> ).
4. He probado esto en Safari, Firefox y Chrome (solo para Mac).

Vea el fiddle para el ejemplo de trabajo. El Javascript es un poco más complejo de lo que me gustaría (92 líneas) y funciona al hacer que el navegador disponga temporalmente el diseño de la página en función de su página de instrucciones y Altura de página antes de volver al diseño normal.

ACTUALIZADO:

He producido una versión más fácil de seguir que combina la técnica @ apaul34208 utilizada para lograr el tamaño completo de la página independiente del navegador, pero conserva los conceptos de extracción de notas incorporadas y paginación automática de las notas correctas para cada página para adaptarse a la impresora. Esto ahora funciona para Safari, Chrome y Firefox (solo probado en Mac) sin cambios tanto en A4 como en US Letter. Los saltos de página se limitan a un límite <div> o <p> . Gracias a Paul.

El ejemplo de trabajo actualizado está aquí: fiddle

o pantalla completa para la vista previa de la página aquí: solo página de resultados