CSS per la stampa e div a larghezza fissa
Giovedì 28 Maggio 2009 - 08:05
di Cesare Lamanna
Uno dei rischi da tenere presenti quando si appronta un CSS per la stampa è quello dei contenuti potenzialmente tagliati sul lato destro della pagina.
Soluzioni? Nel suo articolo Preparare un CSS per la stampa, Alessandro Fulciniti ne fornisce una sicura e affidabile:
Sovente ci si trova infatti a stampare una pagina web e vedersi il contenuto tagliato sul lato destro. Se non si è usato un layout liquido è fondamentale far sì che il layout sia liquido in fase di stampa: basta ridefinire su “auto” la larghezza del contenitore principale.
Può però capitare che per qualunque motivo si decida di adottare nel foglio di stile una larghezza fissa. A quel punto è cruciale sapere qual è la larghezza massima che i vari browser consentono e superata la quale avviene il disastroso taglio in fase di stampa. Un test in tal senso è stato svolto da Neal Grosskopf, che pubblica in questo post i risultati. La misura che ci mette al riparo da brutte sorprese? 670px.
Potrebbe sembrare tra l’altro una precauzione inutile, visto che praticamente tutti i browser di default hanno selezionata l’opzione che adatta automaticamente il testo alle dimensioni della pagina per impedire, appunto, il taglio sulla destra. Il fatto è che così facendo il browser rimpicciolisce a dimensioni spesso inaccettabili il testo (questa prova l’ho fatta io). Senza dire che quell’opzione può essere disattivata.
Riassumendo: è sempre opportuno rendere liquido il layout in fase di stampa; se proprio non si vuole o non si può, si tenga presente la dimensione di 670px per andare sul sicuro.
Commenti
1
In realtà potrebbe non essere sufficiente impostare una larghezza automatica solo al contenitore più esterno. E’ sempre meglio assicurarsi che anche gli elementi interni ad esso abbiano una larghezza ridefinita nel css per la stampa (o quantomeno in millimetri considerando una larghezza utile per la stampa di 150-165mm) o potrebbero verificarsi comunque problemi di contenuti tagliati.
# - postato da Fabrizio Calderan - 28 Maggio 2009 - 10:14
2
La stampa con i CSS è una cosa spesso rognosa… una soluzione talvolta elegante è la generazione di un pdf da scaricare e/o stampare… Anche se solamente aggira il problema.
Io ho spesso risolto con 660px di larghezza fissa ma non sono mai stato entusiasta di sta cosa.
3
Non sarebbe meglio affidarsi ad un CSS dedicato, impostando le dimensioni in punti ? Non mi sono mai posto il problema ma, credo, che sia la soluzione più adatta per questo tipo di problemi.
Saluti!# - postato da Alessio - 29 Maggio 2009 - 08:43
4
Meglio non impostare la larghezza, secondo me è abbastanza rischioso…
Poi bisogna anche tenere conto del tipo di contenuto da stampare.
Ad esempio, se si deve stampare un articolo o una guida è meglio disattivare totalmente il CSS “screen” e crearne uno per la stampa in cui si nascondono tutti gli elementi inutili concentrandosi solo ed esclusivamente sull’articolo.# - postato da Giacomo Ratta - 05 Giugno 2009 - 00:17