CSS e Stampa : Mantenere il blocco di testo

Questa è una tipica Scelta Multipla esame, Assumere una questione di formato:

<question qid='1'>
<stem>What is your name?</stem>
<choice value = 'a'>Arthur, King of the Britons</choice>
<choice value = 'b'>There are some who call me ... Tim!</choice>
<choice value = 'c'>He is brave Sir Robin, brave Sir Robin, who-- Shut up! Um, n-- n-- n-- nobody, really. I'm j-- j-- j-- ju-- just, um-- just passing through.</choice>
<choice value = 'd'>Sir Galahad... the Chaste.</choice>
<choice value = 'e'>Zoot... Just Zoot.</choice>
</question>

e ho ottenuto questo tracciato di appropriati stili di pulsanti per il web.

Ora, ho bisogno di fare una versione stampabile del test. Questo è in realtà più semplice, che non ho bisogno di includere le radio, a ‘___’ per un segno di spunta. Il problema principale è come mantenere la domanda di scissione oltre l’interruzione di pagina.

InformationsquelleAutor Chris Cudmore | 2010-01-12



4 Replies
  1. 31

    Non ho mai avuto fortuna con la coerente prevenire qualcosa di simile. Può essere un po ‘ sporca, ma se le domande sono di solito di sameish lunghezza si può forzare un’interruzione di pagina dopo ogni X domande?

    <style type="text/css">
    .pageBreak{
        page-break-before: always;
    }
    </style>
    
    <question>...</question><br class="pageBreak" />
    <question>...</question>

    (O applicare la classe alla domanda o quello che volete)

    Si può provare a utilizzare il page-break-inside proprietà, ma non ho visto essere coerenti browser il supporto è un casino proprio ora:

    question {
        page-break-inside:avoid;
    }
    • Sembra page-break-inside è supportato solo in Opera, il che rende praticamente inutile per il “Mondo Reale” ™ ho pensato l’altra opzione, ma i gambi variare da un rinforzo per interi paragrafi, in modo che non c’è coerenza delle dimensioni.
    • Opere in IE8, anche se attualmente il sito w3schools dice che IE non supporta. Credo che le versioni precedenti non. Firefox 3 versione che ho attualmente, non. Ho un simile requisito, tuttavia in un report che sarà stampato, ha deciso di provare ad andare la generazione di PDF modo, sperando che XSL-FO opere.
    • page-break-inside: avoid per me funziona in Chrome 22 (ancora niente in Firefox 15).
    • page-break-inside opere a partire da FF19+, in modo che tutti i principali browser hanno il supporto per ora.
    • Questo non ha funzionato per me, ma display:block mantenuto la mia.
    • Questo funziona alla grande con wkhtmltopdf grazie per una grande soluzione!!

  2. 1

    Utilizzare un foglio di stile per la stampa separata, e utilizzare il page-break-before e page-break-after selettori per il tuo iniziale e finale domande su ogni pagina.

    Se il quiz è statica, è in grado di tracciare le classi utilizzate e farlo funzionare senza nulla di più di CSS.

    • quiz è casuale, selezionato da una piscina. Quindi non c’è modo di sapere che cosa il primo e l’ultimo alle domande di una pagina sono.
    • Avrete bisogno di JS per analizzare attraverso e trovare una domanda finisce in relazione alle dimensioni desiderate la vostra “pagina” di essere.
  3. 1

    Utilizzare una tabella di layout. Ma per evitare di modificare la semantica, usare i CSS.

    question {
        display: inline-table;
    } 

Lascia un commento