Printing - consultoria-sap/consultoria-sap.github.io GitHub Wiki

Solo para recordar

Usamos fork Gutenberg, re-adaptado a las necesidades de la página, versión actual.

Update Fork

Para verificar versión del fork, y controlar últimas mejoras del mismo, ver: https://github.com/SidVal/Gutenberg/wiki/Update-Fork

Para crear saltos de página

<!-- The title will be on a new page -->
<h1 class="page-break-before">My title</h1>

<p class="page-break-after">I will break after this paragraph</p>
<!-- Break here, the next paragraph will be on a new page -->
<p>I am on a new page</p>

Sin enlaces

Agregar class="no-reformat" a los enlaces que se transforman.

Sin embargo, edité el gutenberg.css para que no convierta enlaces al imprimir. Si quiero que convierta, agregar class="link"

Uso general

Head

<link rel="stylesheet" href="https://consultoria-sap.github.io/css/gutenberg.css" media="print" charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/gutenberg-css/dist/themes/modern.min.css" media="print" charset="utf-8">
<link href='https://consultoria-sap.github.io/css/resaltar.css' media='print' rel='stylesheet' type='text/css'/>

Uso avanzado (Chrome: Ctrl + J)

(function(i,n,j,e,m,c,t,css){ css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;css.media=m;t.insertAdjacentElement('beforeend',css);})(document,'link','https://consultoria-sap.github.io/css/gutenberg.css','stylesheet','print','head');

(function(i,n,j,e,m,c,t,css){ css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;css.media=m;t.insertAdjacentElement('beforeend',css);})(document,'link','https://unpkg.com/gutenberg-css/dist/themes/modern.min.css','stylesheet','print','head');

(function(i,n,j,e,m,c,t,css){ css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;css.media=m;t.insertAdjacentElement('beforeend',css);})(document,'link','https://consultoria-sap.github.io/css/resaltar.css','stylesheet','print','head');

(function(i,n,j,e,m,c,t,css){ css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;css.media=m;t.insertAdjacentElement('beforeend',css);})(document,'link','https://consultoria-sap.github.io/css/no-ads.css','stylesheet','all','head');

alert("Formatos de Impresión insertados; ahora editar para borrar elementos");
clear(console.log);

Body

  • Usamos <article> para el cuerpo del documento
    • Si hay que centrar en página, uso: <div style="padding: 70px 0;">
    • Aviso por "Fuente original" + RSS:
<div style="padding: 70px 0;" class="page-break-after">
<div class="info">
<p>El siguiente documento fue tomado de Internet, y procesado como un PDF a fines informativos.
</p>
<p>Por favor ayúdenos compartiendo el conocimiento de la mejor manera posible, no imprima el documento, puede enviarlo por correo electrónico o compartir el enlace donde lo ha obtenido en redes sociales, o bien, guardar el documento en su PC para futuras consultas. Imprimir el documento sería un error, e iría contra las Buenas Prácticas de <strong>Responsabilidad Social & Sustentable.</strong></p>
<p>Se ha respetado todo el texto original del autor.
<br /><br />
Fuente: xxxxxx.com/xxxx/xxx.html
</p>
</div>
</div>
  • Usamos <footer> para el pie de página
<footer>
PDF compartido en <a href="https://www.consultoria-sap.com" title="Ser Consultor SAP" class="no-reformat">Consultoria-SAP.com</a> 
</footer>

Otras mejoras e ideas

  • Falta encabezado
  • Depurar footer

Testing in html5

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️