[CSS] Stampare in internet

Premessa: un ringraziamento a html.it dove potete trovare nei dettagli la procedura e l’intera spiegazione sintattica.

Oggi ho dovuto rendere un sito stampabile in ogni sua pagina. Dopo un primo momento di crisi mi sono ricordato dei CSS (magici) e dell’attributo del tag di collegamento dei CSS media.

Esempio:

 

<link href="stili.css" rel="stylesheet" type="text/css"/>

<link href="stiliPrint.css" rel="stylesheet" type="text/css" media="print" />

 

Questo collegamenti (inclusioni) permettono di utilizzare per qualsiasi media il primo CSS (stili.css) e di utilizzare "in aggiunta" il secondo CSS (stiliPrint.css) solamente per il media Print, cioè la stampante (reale o virtuale tipo pdfcreator).

 

A questo punto, con una buona strutturazione del sito, è possibile ridefinire solamente zone (ID) e classi dei CSS per fare in modo che il sito abbiamo una formattazione più stampabile possibile. Ad esempio:

  • togliere alcune navigazioni inutili in una stampa
  • togliere immagini troppo invasive e visualizzare al loro posto dei testi / titoli (H1,H2, …)
  • impostare le dimensioni delle aree in percentuale, in modo possano adattarsi a qualsiasi formato della pagina
  • impostare le dimensioni del testo in EM o in %, in luogo di una rigida dimensione in pixel
  • varie ed eventuali a seconda del gusto

Se, ad esempio, il sito è tutto all’interno di una tabella ID="work" di dimensioni 860px potremo procedere così.

 

foglio stili.css

#work{width: 860px; color: …; background-color: …; border: …;}

#stampaButton{float:right; padding: 10px}

 

foglio stiliPrint.css (ridefiniamo solamente quello che ci serve)

#work{width: 100%}

/* nascondo il bottone di stampa */

#stampaButton{display:none}

 

Questa modalità di utilizzo è proprio quel CASCADING che fa parte dell’acronimo CSS (Cascading Style Sheet), cioè la possibilità di definire a cascata uno stile ridefinendo (top-bottom) lo stile in fasi successive del foglio, o meglio ancora dei fogli di stile collegati.

Sottolineo inoltre che nascondendo, o operando su una ID con più figli al suo interno, le modifiche sono propagate chiaramente ai figli.

Esempio:

 

<div id="work">

   <div id="text">

      <div id="intro">

      </div>

   </div>

   <div id="menu">

   </div>

<div>

 

Nascondendo nel CSS di stampa l’ID "text" (#text{display:none}) anche intro non sarà più visibile, in quanto il "contenitore padre" non è visibile.

 

Tutto ciò permette di avere un sito fatto in un modo "internettiano" ed un sito fatto appositamente per la stampa.

Lo stesso procedimento è applicabile anche per siti accessibili, senza la necessità di dovere ridefinire completamente lo schema CSS per sito "grafico" e sito "accessibile".

Loading Facebook Comments ...

6 pensieri su “[CSS] Stampare in internet

  1. stefra

    ahhhnnnn lo sapevo… e non sapevo di saperlo…

    chi era il filosofo che diceva che il maestro è colui che risveglia la conoscenza innata dei suoi allievi?

    Merlinox -> maestro!!!!

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *