Stessa stampa CSS come schermata

Sembra che ci dovrebbe essere una soluzione facile a questo, ma finora non ho avuto successo nel trovarne uno.Stessa stampa CSS come schermata

Sto usando Zurb Foundation e fondamentalmente sto creando un modulo dal vivo che prende gli input da un modulo (sopra) e riempie un contenuto (sotto) usando angular.js. Gli utenti stamperanno la pagina in un PDF. Mi piacerebbe mantenere il layout che ho per il contenuto sottostante, e mi piacerebbe nascondere il modulo sopra quando si stampa. Zurb ha una bella regola css "hide-for-print" che sembra funzionare correttamente quando viene applicata al modulo sopra, ma quando si cambiano i fogli di stile di stampa, praticamente rimuove tutto il CSS e torna a brutto.

Suggerimenti?

fonte

2013-03-28 ecirish

Hai provato a utilizzare le query multimediali CSS per il supporto print?

.foo { 
    height:150px; 
    width:150px; 
    background-color:#F00 // see what I did there? 
} 

.bar { 
    height:10px; 
    width:50%; 
    border-radius:5px; 
    background-color:#000 
} 

.baz { 
    width:100px; 
    height:150px; 
    background-color:#FFF; 
} 

@media screen { 
    .baz { 
     display:block; 
    } 
} 

@media print { 
    .baz { 
     display:none; 
    } 
}

Ora, solo alcune delle proprietà .baz s' sono presi di mira dai media query. Puoi sentirti libero di inserire le proprietà di .baz all'interno o all'esterno delle query stesse. Allo stesso modo, puoi inserire di tutte le proprietà di di .baz nella query multimediale, ma ho capito che non è quello che stai cercando.

fonte

2013-03-28 05:35:00 Jules

Capisco le domande dei media, ma il punto è che sto cercando di avere gli stili _same_ per entrambi e semplicemente nascondere qualcosa quando stampato. Copiare tutti i miei CSS nella regola di stampa sembra complicato. – ecirish

Cosa ti ferma? Metti tutti gli stili oltre alla classe/id in questione al di fuori della query multimediale e fai in modo che la query multimediale si applichi a questa regola. Aggiornerò la mia risposta per illustrare meglio il mio punto. – Jules

idk sui fogli di stile di stampa del ZURB, e senza un esempio, è piuttosto difficile rispondere, ma è possibile utilizzare weasyprint, libreria open source per convertire html/css per pdf https://github.com/Kozea/WeasyPrint

fonte

2013-03-28 07:08:44 albert

Questo sembra interessante, ma dove questo sembra gestire l'impaginazione molto bene, sto cercando un semplice documento di una pagina. – ecirish

uomo mio male, ho completamente letto male. fai ciò che dice @phil. metti solo display: nessuno sul tuo modulo nel foglio di stile di stampa. – albert

Quello che ho fatto in questo tipo situazioni è utilizzare un file separato per il print.css.

<link rel="stylesheet" type="text/css" href="global.css" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Se il browser è la stampa, il file verrà caricato global.css prima e quella del file print.css sovrascriverà qualsiasi cosa aftewards.

Ricordare però che tutte le regole background: * verranno disattivate in tutti i browser per impostazione predefinita durante la stampa, quindi alcuni stili saranno compromessi a prescindere.

fonte

2013-03-28 16:21:43 Phil

risposta

Problemi correlati