Qual è la larghezza sicura in pixel per stampare una pagina web?
La mia pagina include immagini di grandi dimensioni e voglio assicurarmi che non vengano tagliate quando stampate.
Conosco diversi margini del browser e formati carta US Letter / DIN A4. Quindi abbiamo ottenuto dimensioni standard in lettere e alcuni valori DPI predefiniti. Ma posso convertirli in valori di pixel da specificare nell'attributo dell'immagine width?
Risposte:
Per quanto riguarda una vera "risposta universale", non posso fornirne una. Posso, tuttavia, fornire una risposta semplice e definitiva per alcuni particolari ...
670 PIXEL
Almeno questa sembra essere una risposta sicura per i prodotti Microsoft. Ho letto molti suggerimenti, incluso 675, ma dopo averlo provato io stesso 670 è quello che ho pensato.
Tutti i DPI, i problemi di margine, le differenze hardware a parte, questa risposta si basa sul fatto che se uso l'anteprima di stampa in IE9 (con margini standard) - e IMPOSTARE LA DIMENSIONE DI STAMPA AL 100% piuttosto che l'impostazione predefinita di "riduci per adattarla" , tutto si adatta alla pagina senza essere tagliato a questa larghezza.
Se invio un'e-mail HTML a me stesso e la ricevo con Windows Live Mail 2011 (quello che è diventato Outlook Express) e stampo la pagina a 670 larghezza, di nuovo tutto si adatta. Ciò è vero se lo invio a una copia cartacea effettiva oa un file MS XPS (stampa virtuale).
Prima di sperimentare, stavo usando una larghezza arbitraria di 700. In tutti gli scenari sopra menzionati, parte della pagina veniva tagliata. Quando ho ridotto a 670, tutto si adattava perfettamente.
Per quanto riguarda il modo in cui ho impostato la larghezza, ho appena usato una tabella html "wrapper" primitiva e ho definito la sua larghezza in 670.
Se puoi dettare il software dell'utente finale, tali questioni possono essere dirette. Se non puoi (come di solito è il caso ovviamente) puoi testare particolari come quali browser stanno usando, ecc. E codificare le soluzioni per quelli importanti. Tra IE e FF, coprirai letteralmente circa il 90% degli utenti web. Inserisci un altro codice per "tutti gli altri" che generalmente sembra funzionare e chiamalo un giorno ...
Non è così semplice come sembra. Mi sono imbattuto in una domanda simile, ed ecco cosa ho ottenuto: in primo luogo, un piccolo background su wikipedia .
Successivamente, in CSS, per la carta, hanno pt, che è punto, o 1/72 di pollice. Quindi, se vuoi avere la stessa dimensione dell'immagine del monitor, prima devi conoscere il DPI / PPI del tuo monitor (di solito 96, come menzionato nell'articolo di wikipedia), quindi convertirlo in pollici, quindi convertirlo in punti (dividere per 72).
Ma poi di nuovo, i browser hanno tutti i tipi di problemi con il contenuto stampabile, ad esempio, se provi a utilizzare i tag CSS float, i browser basati su Gecko taglieranno le tue immagini a metà pagina, anche se usi l'interruzione di pagina: evita ; sulle tue immagini (vedi qui, nel sistema di tracciamento dei bug di Mozilla ).
C'è (molto) di più sulla stampa da un browser in questo articolo su A List Apart .
Inoltre, è necessario trattare la larghezza "Riduci per adattare" nell'anteprima di stampa, nonché i vari formati e orientamenti della carta.
Quindi o calcoli solo una buona dimensione dell'immagine in pollici, intendo punti, (7,1 "* 72 = 511,2 quindi width: 511pt;funzionerebbe per la carta in formato lettera) indipendentemente dalle dimensioni dei pixel, oppure scegli le larghezze percentuali della larghezza e basi le larghezze dell'immagine sul formato della carta.
In bocca al lupo...
Una soluzione al problema che ho riscontrato è stata impostare la larghezza in pollici. Finora ho testato / confermato solo che funziona in Chrome. Ha funzionato bene per quello per cui lo stavo usando (per stampare un foglio 8,5 x 11)
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print, puoi impostarli. Puoi impostare size: lettero size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
Per la stampa non imposto alcuna larghezza e rimuovo tutti gli ostacoli che impediscono al layout di stampa di avere una larghezza dinamica. Significa che se rendi la finestra del browser sempre più piccola, nessun contenuto viene tagliato / nascosto ma il documento si allunga. In questo modo, puoi essere certo che il resto sarà gestito dal creatore della stampante / pdf.
E gli elementi con una larghezza fissa come immagini o tabelle?
Opzioni a cui posso pensare:
http://www.intensivstation.ch/en/css/print/
o qualsiasi altro risultato di Google per combinazioni di: CSS, stampa, media, layout
Una soluzione per garantire che le immagini non vengano tagliate quando stampate in una pagina Web è avere la seguente regola CSS:
@media print {
img {
max-width:100% !important;
}
}
Una stampante non capisce i pixel, capisce i punti (pt in CSS). La soluzione migliore è scrivere un CSS aggiuntivo per la stampa, con tutte le sue misure in punti.
Quindi, nel codice HTML, nella sezione head, inserisci:
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
<img>tag un contorno <div>il div ottiene larghezza e altezza in pt e l'img ottienewidth:100%; height:100%;
Dubito che ce ne sia uno ... Dipende dal browser, dalla stampante (fisica max dpi) e dal suo driver, dal formato della carta come dici tu (e potrei voler stampare anche su carta B5 ...), dalle impostazioni ( orizzontale o verticale?), inoltre spesso puoi cambiare la scala (percentuale), ecc.
Lascia che gli utenti modifichino le loro impostazioni ...
width:autoche regolerà la larghezza del contenuto alla larghezza del foglio