/* =========================================================================== STAMPA — foglio condiviso del framework =========================================================================== COSA DEVE FARE. Dare del CONTENUTO una versione leggibile su carta o in PDF: via la navigazione, via i comandi, via gli effetti che su carta non esistono, e il testo che usa tutta la larghezza del foglio. PERCHE' STA QUI E NON IN styles/. Di print.css c'erano DODICI copie, sette delle quali identiche byte per byte: la stessa correzione andava rifatta dodici volte, e infatti non e' mai stata fatta. Come per awvComponents.css e awvIcons.css, il framework se lo porta dietro; il foglio del sito resta e viene caricato DOPO, per le sole differenze di quel progetto (il logo, i colori dell'intestazione). ----------------------------------------------------------------------- IL DIFETTO CHE RENDEVA INUTILE IL FOGLIO PRECEDENTE Si dichiaravano insieme queste tre cose: @page { size: A4; margin: 25mm; } html, body { width: 210mm; height: 282mm; } #container01, #container02 { width: 740px; } La prima lascia 210 - 25 - 25 = 160mm di larghezza stampabile, cioe' 605px. La seconda impone al corpo 210mm (794px) e la terza al contenuto 740px: entrambe piu' larghe dello spazio che esiste. Misurato su Demo: contenuto 740px dentro 605px stampabili, cioe' circa 36mm tagliati a destra su OGNI pagina. Ed e' un difetto che non si vede a schermo, solo sulla carta. La regola generale e' che il riquadro di pagina lo definisce @page, e basta: dare una larghezza a html/body significa litigare con lui. Qui infatti non si dichiara nessuna larghezza, si tolgono quelle dello schermo. height:282mm era anche peggio: su una pagina di poche righe forzava comunque un secondo foglio quasi vuoto. =========================================================================== */ @media print { /* -------------------------------------------------------------------------- IL FOGLIO Margini piu' stretti dei 25mm precedenti: quelli mangiavano un quarto della larghezza utile. 15mm laterali sono comodi da rilegare e lasciano 180mm di testo. Il margine inferiore e' piu' alto perche' li' molti browser stampano il proprio pie' di pagina (URL e numero). -------------------------------------------------------------------------- */ @page { size: A4; margin: 16mm 15mm 18mm; } /* -------------------------------------------------------------------------- FONDO BIANCO, INCHIOSTRO NERO Gli sfondi non si stampano quasi mai (i browser li omettono se non si spunta "grafica di sfondo"), quindi un testo chiaro su fondo colorato esce bianco su bianco: illeggibile. Meglio deciderlo noi che lasciarlo al caso. Ombre e sfumature non aggiungono niente su carta e sporcano la resa. -------------------------------------------------------------------------- */ *, *::before, *::after { background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; transition: none !important; animation: none !important; } html, body { /* NIENTE width/height qui: vedi il blocco in testa. */ background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body { /* i pt sono l'unita' della carta: 10.5pt e' la misura di un testo continuo leggibile senza sprecare fogli */ font-size: 10.5pt; line-height: 1.45; } /* -------------------------------------------------------------------------- NESSUN TESTO CHIARO Conseguenza diretta della regola qui sopra: tolti gli sfondi, un testo bianco resta bianco su bianco. Non e' un'ipotesi - su Demo la didascalia dello slider e il riquadro "Ultimi eventi" sono testo bianco sovrapposto alla foto, e sarebbero spariti. Sulla carta e' meglio perdere il colore che perdere il testo, e un titolo verde su una stampante in bianco e nero diventa comunque un grigio piu' chiaro del testo che introduce: la gerarchia la fanno corpo e peso. Un progetto che stampa a colori puo' rimettere i propri nel suo print.css, che viene caricato dopo questo (serve pero' !important, per battere questa). -------------------------------------------------------------------------- */ body, body * { color: #000 !important; } /* -------------------------------------------------------------------------- TESTO A BANDIERA, NON GIUSTIFICATO I fogli editoriali giustificano il testo di #article. Su una colonna larga quanto un A4, senza sillabazione, la giustificazione allarga gli spazi fino a formare i "fiumi" bianchi verticali - visibile nella prima prova di stampa di questa pagina. E' anche una nota barriera di lettura (WCAG, tecnica F88), la stessa ragione per cui il riquadro di conferma del ripristino non e' giustificato. hyphens serve comunque, per le parole lunghe a fine riga: l'attributo lang sull' c'e' gia', quindi il browser sillaba nella lingua giusta. -------------------------------------------------------------------------- */ #article, #article p, #article li, #article td, #article th, #article blockquote { text-align: left; } /* La sillabazione vale per il testo corrente, NON per le celle: in una colonna stretta il browser sillaba anche parole corte, e nello storico si leggeva "Siste-ma" al posto di "Sistema". Nelle tabelle basta overflow-wrap. */ #article p, #article li, #article blockquote { hyphens: auto; -webkit-hyphens: auto; } /* -------------------------------------------------------------------------- VIA I CONTENITORI DELLO SCHERMO Larghezze fisse, colonne affiancate, margini percentuali e posizionamenti servono a impaginare una finestra, non un foglio. Qui il contenuto deve scorrere in una colonna sola, larga quanto la pagina. -------------------------------------------------------------------------- */ #global, #headerbox, #container01, #container02, #main, #article, #wrapper, #aw-scope, #startcontent { width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; overflow: visible !important; border: none !important; } /* -------------------------------------------------------------------------- IL RIQUADRO DEL TITOLO DI PAGINA Dentro #conttitle c'e' l'

, ma il sito gli applica IN LINEA la foto della pagina come sfondo, con un'altezza fissa (354px su Demo) perche' il titolo ci stia sopra. Azzerando gli sfondi - come si deve fare in stampa - quel riquadro resta vuoto: un buco di quasi 9cm fra il titolo e il testo. Riscontrato in pagina prima di scrivere questa regola. L'altezza va quindi tolta INSIEME allo sfondo, se no si toglie l'immagine e si tiene il suo ingombro. Vale come regola generale: dove un'immagine e' sfondo e non , chi la nasconde deve anche far collassare il contenitore. La foto non si stampa di proposito: i browser omettono gli sfondi se non si spunta "grafica di sfondo", quindi sarebbe comunque incerta, e a piena larghezza si prenderebbe un terzo di foglio. Un progetto che la vuole puo' rimetterla nel proprio print.css con background-image + print-color-adjust. -------------------------------------------------------------------------- */ #conttitle { height: auto !important; min-height: 0 !important; padding: 0 !important; } /* I fogli editoriali rientrano il testo del 10% per lato per tenere la riga corta su schermi larghi. Sul foglio quella riga e' gia' corta, e il rientro butterebbe via 36mm. */ #article p, #article ul, #article ol, #article h2, #article h3, #article h4, #article blockquote, #article table { margin-left: 0 !important; margin-right: 0 !important; } /* -------------------------------------------------------------------------- VIA CIO' CHE SU CARTA NON HA SENSO Il criterio: si toglie tutto quello su cui non si puo' cliccare. Navigare, cercare, cambiare lingua, ordinare, sfogliare, accettare i cookie sono azioni; su un foglio restano solo ingombro, e spesso su piu' pagine. -------------------------------------------------------------------------- */ /* navigazione e intestazione */ #navcontainer, #nav, #navlist-list, .navlist, .nav-toggle, .subnav, #breadcrumbs, #flag, .lang, #skipnav, #search, #social, #header ul.menu { display: none !important; } /* pie' di pagina del sito: menu di servizio, loghi, dati societari. Se servono in stampa, il posto giusto e' il foglio del sito, che puo' rimettere in mostra il solo #company. */ #footerbox, #footer, #footmenu-list, #company, .footmenu { display: none !important; } /* barra di sessione e comandi di amministrazione: la barra utente, i pulsanti grandi (ul.admin), le icone di riga (modifica/elimina/storico), la ricerca e la paginazione. Sono tutti comandi. */ #session, ul.admin, .awv-actions, .awv-action, form.awv-search, nav.admpaging, .admpaging { display: none !important; } /* comandi dentro i form: il testo dei campi si stampa, i bottoni no */ button, input[type="submit"], input[type="button"], input[type="reset"], .tiptap-toolbar, .ProseMirror-menubar, .trumbowyg-button-pane { display: none !important; } /* contenuti che sulla carta sono un rettangolo vuoto */ iframe, video, audio, object, embed, canvas, .aw-share { display: none !important; } /* banner di consenso: se la stampa parte prima che l'utente abbia scelto, altrimenti si porta via mezza prima pagina */ #iubenda-cs-banner, .iubenda-cs-container, .iub-cs, #cookie, .cookie, .cookie-bar, #cookiebar { display: none !important; } /* immagine di sfondo a tutta finestra */ #bg { display: none !important; } /* -------------------------------------------------------------------------- LO SLIDER DELLA HOME Non si nasconde del tutto: l'immagine grande e' spesso l'unica cosa che caratterizza la pagina. Si stampa la PRIMA diapositiva e si tolgono i comandi - frecce, pallini, play/pausa - che senza un dito sono decorazione. Il transform va azzerato, se no si stampa il vuoto fra una slide e l'altra. -------------------------------------------------------------------------- */ .aw-controls, .aw-prev, .aw-next, .aw-dots, .aw-toggle { display: none !important; } /* Le altezze fisse dello slider sono calcolate per la finestra: su Demo il riquadro e' alto 510px mentre l'immagine ne occupa 354, e quei 156px di differenza sulla carta diventano un vuoto in mezzo alla pagina. In stampa l'altezza la deve dare il contenuto. */ .aw-slider, .aw-viewport, .aw-slide { height: auto !important; min-height: 0 !important; } /* Il riquadro dello slider tiene le proporzioni con un riempitivo ::before{padding-top:31.25%}, il vecchio trucco del rapporto d'aspetto. Non e' un'altezza, quindi height:auto non lo tocca: su Demo lasciava 156px di vuoto fra l'immagine e il testo che segue. Toglierlo pero' non basta: le slide sono in position:absolute (lo dice il commento stesso di home.css), quindi senza riempitivo la viewport tornerebbe alta zero e l'immagine sparirebbe - provato. Le due regole vanno insieme: via il riempitivo E la slide rimessa nel flusso, cosi' l'altezza la da' l'immagine, che e' quello che serve su carta. */ .aw-viewport::before { display: none !important; } .aw-slide { position: static !important; opacity: 1 !important; } .aw-link { height: auto !important; } .aw-slide img { height: auto !important; object-fit: fill !important; } .aw-viewport { overflow: hidden !important; } .aw-track { transform: none !important; display: block !important; width: auto !important; } .aw-slide:not(:first-child) { display: none !important; } .aw-slide { width: auto !important; } /* Didascalia della slide e riquadro "Ultimi eventi": a schermo stanno SOPRA la foto, in posizione assoluta, con testo bianco su una sfumatura scura. Tolta la sfumatura resterebbero sovrapposti a un'immagine che il browser stampa com'e': testo bianco su cielo chiaro, illeggibile. Rimessi nel flusso normale, escono sotto l'immagine come testo qualunque. */ .aw-caption, .aw-log, .aw-hero { position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* -------------------------------------------------------------------------- IMMAGINI max-width in percentuale non basta: se il contenitore e' piu' largo della pagina l'immagine lo segue e sborda. Il limite va dato in millimetri, cioe' nell'unita' del foglio. L'altezza massima evita che una foto verticale si prenda un foglio intero da sola. -------------------------------------------------------------------------- */ img, figure, svg { max-width: 100% !important; height: auto !important; page-break-inside: avoid; break-inside: avoid; } #article img { max-height: 120mm; } /* -------------------------------------------------------------------------- DOVE SI SPEZZANO LE PAGINE Un titolo in fondo al foglio con il suo testo su quello dopo e' il difetto piu' visibile di una stampa fatta male. orphans/widows evitano la riga singola isolata. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { page-break-after: avoid; break-after: avoid-page; } h1, h2, h3 { page-break-inside: avoid; break-inside: avoid; } p, li { orphans: 3; widows: 3; } blockquote, pre { page-break-inside: avoid; break-inside: avoid; } /* -------------------------------------------------------------------------- TABELLE CHE ENTRANO IN UN A4 Quattro cose, in ordine di efficacia: 1. la tabella prende la larghezza della pagina e non di piu'; 2. il testo va a capo DENTRO la cella anche senza spazi (codici, URL): senza questo una cella sola allarga tutta la tabella oltre il foglio; 3. corpo piu' piccolo e spaziature strette - su una tabella si accetta un testo piu' fitto che su un paragrafo; 4. via la colonna dei comandi, che e' la piu' larga e la piu' inutile. Sul punto 4: si toglie l'ultima colonna solo alle tabelle che contengono davvero le icone di riga (:has), perche' in aWVgest la colonna "Azioni" e' sempre l'ultima. Dove :has non e' supportato la regola viene ignorata e restano comunque nascoste le icone (.awv-actions sopra): la colonna resta, ma vuota e stretta. In nessuno dei due casi la tabella si disallinea. -------------------------------------------------------------------------- */ table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; font-size: 8.5pt; page-break-inside: auto; } th, td { padding: 2pt 3pt !important; border: 0.5pt solid #999 !important; vertical-align: top; /* break-word e non "anywhere": va a capo dentro la parola SOLO se quella parola da sola non ci sta. Con "anywhere" su tutte le celle il browser spezzava anche dove non serviva - date rese come "2026-/09-/06" e "Ripri-/stina" - perche' preferisce sempre la colonna piu' stretta. */ overflow-wrap: break-word; } /* Qui invece "anywhere" serve davvero: sono le celle che contengono chiavi, percorsi di script e nomi di file lunghi, senza spazi dove andare a capo. Senza, una cella sola allarga la tabella oltre il foglio. */ td.awv-cell-long, .awv-mono, .awv-diff, .awv-diff-prima, .awv-diff-dopo { overflow-wrap: anywhere; } /* Non serve un white-space:nowrap sulla colonna della data: con break-word la data va a capo al proprio spazio ("2026-09-06 / 15:32:43") e resta leggibile. Un nowrap generico sulla prima colonna sarebbe anzi dannoso, perche' in browse() quella colonna e' il titolo del record e forzarlo su una riga sola allargherebbe la tabella oltre il foglio - cioe' il difetto da cui siamo partiti. */ th { font-weight: bold; text-align: left; } /* l'intestazione si ripete su ogni foglio: una tabella lunga senza questo diventa illeggibile dalla seconda pagina in poi */ thead { display: table-header-group; } tfoot { display: table-footer-group; } tr { page-break-inside: avoid; page-break-after: auto; } /* la colonna dei comandi */ table:has(.awv-actions) th:last-child, table:has(.awv-actions) td:last-child { display: none !important; } /* Il testo lungo nelle celle e' limitato a due righe DA NOI, per tenere corta la lista a schermo (.awv-cell-long in awvComponents.css). Su carta quel limite taglia il testo senza dirlo: la stampa serve proprio a portarsi via il contenuto per intero. */ #article table.awv-table td.awv-cell-long, table.awv-table td.awv-cell-long { max-width: none !important; max-height: none !important; } /* il ritaglio sta sul
interno, non sulla cella (vedi awvComponents.css) */ #article table.awv-table td.awv-cell-long > .awv-clamp, table.awv-table td.awv-cell-long > .awv-clamp { display: block !important; -webkit-line-clamp: none !important; max-height: none !important; overflow: visible !important; } /* -------------------------------------------------------------------------- L'INDIRIZZO DEI COLLEGAMENTI Su carta un link e' testo sottolineato che non porta da nessuna parte: chi legge non ha modo di sapere dove andava. Si stampa l'indirizzo accanto, ma solo per i link ESTERNI e solo dentro il contenuto - farlo per i link interni riempirebbe la pagina di URL del sito che si sta gia' leggendo. Se un progetto non lo vuole, gli basta rimettere #article a[href]::after { content: none !important; } nel proprio styles/print.css, che viene caricato dopo questo. -------------------------------------------------------------------------- */ #article a[href^="http"]::after, #article a[href^="//"]::after { content: " (" attr(href) ")"; font-size: 0.85em; overflow-wrap: anywhere; word-break: break-all; } /* Nota: i link interni di questi CMS sono relativi (c'e' ), quindi il selettore sopra li esclude gia' da solo. Un progetto che scrive i propri link in forma assoluta se li vedrebbe stampati: in quel caso si escludono nel foglio del sito con #article a[href^="https://iltuodominio"]::after { content: none; } */ a { text-decoration: underline; color: #000 !important; } /* -------------------------------------------------------------------------- ACCESSIBILITA' .sr-only resta invisibile anche in stampa: e' testo pensato per chi ascolta, e sulla carta sarebbe una ripetizione. La didascalia delle tabelle invece torna visibile, perche' su un foglio staccato dal suo contesto il nome della tabella e' l'unica cosa che dice cosa si sta guardando. -------------------------------------------------------------------------- */ caption.sr-only { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; margin: 0 0 2pt !important; padding: 0 !important; font-weight: bold; text-align: left; white-space: normal !important; } }