Quando si stampa da Firefox (su qualsiasi sistema operativo, credo), il browser divide le immagini e talvolta anche le righe di testo tra le interruzioni di pagina: la parte superiore di un'immagine viene visualizzata nella parte inferiore della pagina n e il resto appare in alto della pagina n + 1.
Esiste un modo per far sì che Firefox mantenga le immagini su singole pagine durante la stampa?
Risposte:
TLDR: le interruzioni di pagina sono scarsamente supportate dai browser (probabilmente con una buona ragione), quindi spetta principalmente al progettista di pagine occuparsene. Per il resto c'è poco da fare, tranne forse per incollarlo su un documento. E C-Net è d'accordo.
Interruzioni di pagina
Dato che i "margini di stampa" non sono sotto il tuo controllo come autore Web, non puoi garantire la quantità di un documento Web che verrà stampata su ogni pagina e quindi dove saranno le interruzioni di pagina. Varia in base al browser dell'utente, alle impostazioni del browser e alla stampante. E anche la dimensione del carattere di base dell'utente e la dimensione della cancelleria sono al di fuori del tuo controllo. Ti consigliamo di utilizzare i CSS per influenzare (non controllare) la posizione delle interruzioni di pagina. CSS2.1 Capitolo 13 I supporti cercapersone sono letture essenziali. Si noti che, in questo capitolo, CSS2.1 rilascia alcune funzionalità in CSS2 che i browser non hanno mai implementato.
Il supporto per le proprietà di interruzione di pagina (come l'interruzione di pagina) è scadente, anche negli ultimi browser, la principale eccezione è Opera (Opera 5 in poi) il cui supporto è molto buono:
Peggio ancora, i browser rischiano di spezzare le pagine in luoghi chiaramente inaccettabili (vedere anche il prossimo paragrafo). Ad esempio, ho trovato casi in cui i browser interrompono un'immagine attraverso le pagine. I test sui miei vari siti suggeriscono che la gestione delle interruzioni di pagina di Opera, sebbene non perfetta, è nettamente più robusta di quella di Firefox o IE.
L'articolo di Eric (vedi sotto) menziona un bug nei browser basati su Gecko (Mozilla) per quanto riguarda la stampa di elementi fluttuanti. Apparentemente, questo errore non è stato ancora risolto [a luglio 2009] e gli elementi fluttuanti vengono tagliati alla fine della pagina stampata e talvolta in una sola pagina di un documento stampato [Nota 2]. Ho riscontrato un simile problema di riduzione del float con le versioni precedenti di Opera (ad esempio O7.21). È stato segnalato un diverso bug in IE in cui, se la parte superiore di un elemento fluttuato coincide con un'interruzione di pagina, l'elemento fluttuato non viene stampato affatto [riconoscimento: Rennan Rieke].
Strategia suggerita per le interruzioni di pagina
La migliore politica (sicuramente, fino a quando i browser non miglioreranno) è quella di concedere loro una pausa (ah!) Consentendo loro più discrezione possibile nella scelta dei punti di interruzione. Hanno particolari problemi con gli elementi affiancati, come posizionati <div>s; galleggianti; e tabelle con due o più colonne. Strategie adeguate quindi includono rendere <div>statico posizionato ; galleggianti non galleggianti; e suddividere le tabelle utilizzate per il layout in una serie di tabelle più brevi [Nota 1]. Anche se le proprietà di interruzione di pagina sono scarsamente supportate, non vincolare eccessivamente i browser: utilizzare il valore "evitare" con un tocco il più leggero possibile.
Ai browser non piacciono i float quando si tratta di stampare (vedere la sezione precedente). La soluzione alternativa consiste nello sbloccare elementi fluttuanti (float: none e forse width: auto pure). Se si rischia di avere un elemento fluttuante durante la stampa, è possibile che venga stampato su un'interruzione di pagina (la parte superiore di un elemento fluttuante è ancorata alla riga corrente). A seconda della natura del materiale flottante, questo può essere un comportamento accettabile. In caso contrario, solo Opera ti consentirà di eliminare tale divisione.
Se devi stampare dei contenuti su una sola pagina, ad esempio un modulo, la tua migliore possibilità è di renderlo significativamente inferiore a una pagina, in modo da avere un buon margine di errore. Per quanto riguarda le dimensioni della cancelleria, potresti scegliere di assumere la dimensione internazionale (ISO) standard A4 (per un pubblico internazionale) o la dimensione della lettera USA (per un pubblico esclusivamente statunitense), sebbene non vi siano garanzie sulle dimensioni utilizzate dagli utenti. Ma chiediti come risponderesti se avessi prodotto un modulo di una pagina usando un elaboratore di testi e un utente con problemi di vista ha chiesto una versione di grandi dimensioni. Come sempre con Web design e CSS, la vita sarà molto più semplice se non provi a combattere con l'utente insistendo sulla perfezione dei pixel o sulle interruzioni di pagina garantite. Il design fluido si applica sia sulla carta che sullo schermo.
Questo problema mi ha infastidito per molto tempo. Ho scoperto che se fai clic con il pulsante destro del mouse sulla pagina, vai a "Ispeziona elemento" e quindi vai a "Editor di stile" nella finestra di ispezione, puoi aggiungere:
p {
page-break-inside: avoid;
}
Questo di solito lo farà. Ho visto alcune persone suggerire di inserire questo stile all'interno del tag 'img', ma non ha funzionato per me in nessuna delle pagine in cui ho provato ad usarlo.
Questo tag è utile anche se vuoi separare gli elementi principali di una pagina. Ad esempio, quando stampo materiale su EBSCOhost, inserendo quello stile nel tag "body" inserirò la citazione su una pagina, il testo sulle proprie pagine e le immagini sulle proprie pagine. È uno stile davvero utile.
imgtag in a pe questo funzionerà comunque.