Watermark su stampa di pagina web

È possibbile inserire nel proprio sito un watermark che apparirà nella stampa della prima pagina.

Possiamo rendere anche molto rilevante la consistenza del watermark semplicemente agendo sui settaggi del foglio di stile.

Prima di tutto inseriamo il div contenitore nell'html del template: è un div nascosto quindi può essere inserito in qualsiasi punto dell'html, per ordine meglio subito dopo l'apertura del body.

<div class="print">
     <p><h2>Articolo stampato da https://domain.ext</h2></p>
     <p><h1>&copy; domain.ext</h1></p>
</div>

Il testo è ovviamente del tutto customizzabile, e può anche essere sostituito / integrato con un immagine, logo etc.

Poi impostiamo le regole del css per formattare il contenuto del div (rendendolo nascosto) e -soprattutto- modifichiamo la visibilità esclusivamente in fase di stampa:

<style>

.print {

     display: none;

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: auto;

     z-index: 1000;

     opacity: 30%;

     color: black;

     font-weight: bolder;

     text-align: center;

     margin-top: 50%;

     rotate: -45deg;

     border: dashed medium;

     text-align: center;

}

@media print {

     .print h1 {

          font-size: 64px;

     }

     .print h2 {

          font-size: 48px;

     }

     .print {

          display: block;

     }

}

</style>

Attenzione all'opacità, verificate bene che sia compatiblile con la leggibilità del contenuto mandato in stampa!

Sia chiaro, come tutti i metodi di 'protezione' dei contenuti anche questo è ampliamenta bypassabile da chi minimante sappia come muoversi.

Enjoy  ;)