/* ========================================================================== Stampa — il Riepilogo si porta dal commercialista, quindi la stampa non e' un ripiego: e' una delle due forme in cui questo documento esiste. Tre fatti che governano tutto il foglio. 1. UNA STAMPANTE LASER NON GESTISCE IL COLORE: traduce in luminanza. Tradotti cosi', i verdi chiari diventano grigi altissimi — --g-200 e' un grigio al 74 %, --g-100 all'83 %, --g-050 al 94 %, cioe' quasi carta bianca. Quindi NESSUN RIEMPIMENTO PORTA INFORMAZIONE DA SOLO: ogni area stampa il proprio CONTORNO e la propria ETICHETTA DI VALORE. 2. IL COLORE NON ARRIVA, quindi il segno di un negativo non puo' essere il rosso: su carta un importo negativo stampa ANCHE la parentesi contabile. Rosso e ambra restano comunque distinguibili fra loro perche' la loro luminanza e' diversa da quella del nero. 3. CIO' CHE SCORRE, TAGLIA. Un contenitore con `overflow` su carta non scorre: nasconde. E lo nasconde in silenzio, che e' la parte grave — sul foglio non resta nessun segno che mancasse qualcosa. Una tabella da dieci colonne perdeva le ultime tre. Il foglio precedente scriveva due esadecimali a mano, fuori dal sistema dei token, per la sparkline di una tessera. Qui non ce n'e' nessuno: la stampa usa token come tutto il resto, e lo verifica un test. Il selettore era a specificita' (0,2,0) per vincere sui blocchi del tema scuro. Il tema scuro non esiste piu', quindi `:root` torna nudo. */ @media print { :root { /* Il fondo pagina diventa carta. E' l'UNICA cosa che cambia fra i neutri: la scala e' gia' fatta per la carta, perche' ogni suo gradino e' risolto su una soglia WCAG — --n-500 sta a 4,51:1, --n-800 a 13,08:1 — e appiattire tutto al nero toglierebbe la gerarchia invece di salvarla. Si alza solo il filo divisorio: --n-200 e' 1,45:1, che a schermo e' giusto e su carta sparisce sotto il retino di una laser. --n-300 porta 2,11:1, che e' il minimo perche' una riga di tabella si veda senza diventare una grata. */ --bg-page: var(--n-000); --n-200: #B1B3B0; /* = --n-300. Scritto per valore e non con var(): una custom property non puo' riferirsi a se stessa, e `--n-200: var(--n-300)` qui dentro sarebbe un ciclo. E' l'UNICO esadecimale di questo foglio, e il test che vieta i colori fuori da tokens.css lo nomina come eccezione. */ /* LA SCALA DELLE CATEGORIE DIVENTA UNA SCALA DI GRIGI, presa dai neutri che esistono gia': una stampante laser traduce il colore in luminanza, e tradotti cosi' i sei gradini del verde collassano in quattro grigi vicini — --g-200 e' un grigio al 74 %, --g-100 all'83 %, --g-050 al 94 %, cioe' quasi carta bianca. Sostituire la scala a monte, qui, invece di riscrivere sei regole di `fill`, e' il motivo per cui questo foglio non contiene nessun colore proprio. */ --cat-1: var(--n-000); --cat-2: var(--n-200); --cat-3: var(--n-400); --cat-4: var(--n-600); --cat-5: var(--n-800); --cat-6: var(--n-900); /* Il velo verde sotto una linea non esiste su carta: a 1,06:1 e' bianco. Diventa il grigio piu' quieto che si vede. */ --g-050: var(--n-100); /* Nessuna ombra su carta: diventerebbe una banda grigia. */ --shadow-pop: none; } /* OGNI AREA STAMPA IL PROPRIO CONTORNO, sempre. Su carta i sei gradini non si separano piu' da soli — vedi la scala qui sopra — quindi il confine e' l'unica cosa che li distingue, e l'etichetta di valore (che il disegno mette, non questo foglio) e' l'unica cosa che li nomina. Il contorno e' --n-900 e non --g-400: su carta un contorno verde al 3:1 diventa un grigio medio, e un confine che si confonde col riempimento del gradino accanto non e' un confine. */ .c-chart__bar, .c-chart__line, .c-chart__threshold, .c-chart__point, .c-stack__svg rect { stroke: var(--n-900); } .c-chart__point { fill: var(--n-900); stroke: var(--n-000); } /* LA PARENTESI CONTABILE. Il segno meno resta — e' il portatore primario — ma su carta guadagna la parentesi, che non dipende dal colore e che un ragioniere legge senza pensarci. Il contenuto lo mette l'helper; qui c'e' solo la dichiarazione che su carta i due segni convivono. */ .c-num--balance.is-negative::before, .c-num--out::before { content: "("; } .c-num--balance.is-negative::after, .c-num--out::after { content: ")"; } /* I CONTROLLI NON SI STAMPANO. Un bottone su carta e' un rettangolo che promette qualcosa e non fa niente, e occupa lo spazio di una riga di dati. */ .l-app__side, .l-topbar, .l-footer, .c-skiplink, .c-search, .c-iconbtn, .c-btn, .c-btnrow, .c-pagination, .c-tabs, .c-toolbar, .c-yearpick, .c-filters, .c-flash, .c-chips, .l-pagehead__actions, .c-table__actions, .u-no-print { display: none !important; } /* «Stampato il …» esiste SOLO su carta: e' informazione del foglio, non della pagina. A schermo e' nascosto da base.css. */ .l-pagehead__printed { display: block; font-size: 10pt; } .l-app, .l-app.is-collapsed { display: block; } .l-content, .l-content.is-wide { max-width: none; padding: 0; } /* CIO' CHE SCORRE, TAGLIA: il porto della tabella diventa visibile e la tabella esce fin dove arriva il foglio. L'altezza massima sparisce, e con essa l'appiccicamento: su carta non c'e' niente che si muova. `.c-changelist` sta in questo elenco perche' e' il terzo contenitore che scorre, ed e' arrivato dopo: senza, il registro attivita' si stampava con i campi tagliati e NIENTE lo diceva — una riga che a schermo si scorre, su carta semplicemente non c'e'. Misurato: 1 «Righe saltate» invece di 4. */ .c-table-port, .c-chart__plot, .c-changelist { max-height: none; overflow: visible; border-radius: 0; } .c-table thead th, .c-table tfoot td, .c-table tfoot th, .c-table--wide tbody td:first-child, .c-table--wide tbody th:first-child { position: static; } /* LA TABELLA EQUIVALENTE DI UN GRAFICO SI STAMPA, anche a
chiuso. Su carta un disegno di aree e' un retino di grigi, e i numeri esatti stanno solo in quella tabella: lasciarla chiusa significa stampare un grafico senza i suoi dati. Servono DUE dichiarazioni, e la seconda e' quella che non si vede arrivare. `display: block !important` sul corpo apre il contenuto come si e' sempre fatto; ma i motori moderni non nascondono piu' il corpo di un
chiuso col `display` — lo nascondono con `content-visibility: hidden` sullo pseudo-elemento `::details-content`, che una regola sul figlio non raggiunge. Con la sola prima riga il corpo resta invisibile, e resta invisibile IN SILENZIO: la regola vecchia non e' diventata sbagliata, e' diventata insufficiente. Un test lega le due dichiarazioni, perche' chi ne scrive una deve scrivere l'altra. */ .c-chart__data > summary { display: none; } .c-chart__data > *:not(summary) { display: block !important; } .c-chart__data::details-content { content-visibility: visible; } /* Una tabella non si spezza a meta' riga, e l'intestazione si ripete su ogni foglio: senza, dalla seconda pagina una colonna di numeri non ha nome. */ .c-table { page-break-inside: auto; font-size: 9pt; } .c-table thead { display: table-header-group; } .c-table tfoot { display: table-footer-group; } .c-table tr { page-break-inside: avoid; } .c-table th, .c-table td { padding: 2pt 4pt; } /* Una scheda non si spezza fra due fogli se puo' evitarlo, e il suo titolo non resta orfano in fondo a una pagina. */ .c-card, .c-tile, .c-callout, .c-totals, .c-chart, .c-candidate { page-break-inside: avoid; box-shadow: none; } .c-card__title, .l-section__head { page-break-after: avoid; } /* --fs-small resta 13px e non scende: 10px su carta non si legge. */ body { font-size: 11pt; background: var(--n-000); } a { color: var(--n-900); text-decoration: none; } /* L'indirizzo di un link non si stampa accanto al testo: in un documento di quaranta righe di tabella raddoppierebbe la lunghezza di ogni riga. I link di questa app sono tutti interni, quindi l'indirizzo non aiuterebbe nessuno. */ @page { margin: 14mm; } }