2013-04-30 6 views
24

Sto creando un'applicazione Web che interagisce con i documenti per la stampa successiva. In alcuni punti è simile a Google Documenti. Sto pensando di usare cm/mm sul CSS delle mie pagine di documenti perché mi aiuterà nella generazione di documenti. Esempio:L'utilizzo di cm/mm nel CSS di un'applicazione Web che replica l'interazione con la carta è una buona pratica?

// A4 size 
.page { 
    width: 210mm; 
    height: 297mm; 
    margin: 2cm 5cm; 
} 
<div class="page"> 
    ... 
</div> 

Quali sono le principali questioni di seguendo questo approccio?

risposta

24

W3C ha un ottimo post sul tema CSS units. In particolare:

cm: Non consigliato per lo schermo/consigliata per la stampa

Le cosiddette unità assolute (cm, mm, in, pt e pc) significano la stessa nei CSS come altrove. Una lunghezza espressa in ognuna di queste apparirà esattamente come quella dimensione (entro la precisione dell'hardware e del software). Non sono consigliati per l'uso sullo schermo, perché le dimensioni dello schermo variano molto. Un grande schermo può essere 60 cm (24 pollici), un piccolo schermo portatile è forse solo 8 cm. E tu non li guardi dalla stessa distanza.

L'unico posto in cui è possibile utilizzare pt (o cm o in) per impostare le dimensioni del carattere è nei fogli di stile per la stampa, se è necessario assicurarsi che il font stampato abbia esattamente una certa dimensione. Ma anche lì usando la dimensione del carattere di default è solitamente meglio.

+7

Questo articolo è abbastanza buono e l'ho già letto. Ma il mio problema è che userò cm/mm non solo per la stampa (ad esempio @media print) ma per l'intera applicazione. Ma dal momento che voglio che lo schermo e la stampa siano identici al 100%, dubito che cm/mm non sia l'approccio migliore. –

+0

quindi cosa suggerisci per la larghezza e l'altezza dell'OP per una pagina? Sappiamo che una pagina dinA4 è alta "297 mm". Convertire questo in pixel perché "cm non è raccomandato" sembra molto strano. – Blauhirn

+0

@Blauhirn Forse qualcosa di relativo, come 'altezza: 100%; width: 100% 'e quindi un foglio di stile separato per la stampa. –

Problemi correlati