31

This is a typical Multiple Choice exam, Assume a question format:

<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>

and I've got this all mapped to appropriate styles with radio buttons for the web.

Now, I need to make a printable version of the test. This is actually simpler, in that I don't need to include radios, just '___' for a check mark. The major issue is how to keep the question from splitting over the page break.

Charles
  • 50,943
  • 13
  • 104
  • 142
Chris Cudmore
  • 29,793
  • 12
  • 57
  • 94
  • 1
    Possible duplicate of [CSS Printing: Avoiding cut-in-half DIVs between pages?](http://stackoverflow.com/questions/907680/css-printing-avoiding-cut-in-half-divs-between-pages) – Michael Freidgeim Mar 21 '16 at 04:15

4 Answers4

43

I haven't ever had luck with consistently preventing something like that. It may be a bit dirty, but if the questions are usually of the sameish length can you force a page-break after every X questions?

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

<question>...</question><br class="pageBreak" />
<question>...</question>

(Or apply that class to the question or whatever you want)

You can try using the page-break-inside property, but I haven't seen it be consistent as browser support for it is a mess right now:

question {
    page-break-inside:avoid;
}
Parrots
  • 26,658
  • 14
  • 59
  • 78
  • 1
    Looks like page-break-inside is only supported in Opera, which makes it just about useless for "The Real World" (tm) I thought about the other option, but the stems vary from one liners to entire paragraphs, so there is no consistency to size. – Chris Cudmore Jan 12 '10 at 19:57
  • 1
    Works in IE8, even though currently the w3schools site says IE doesn't support. I guess older versions don't. Firefox 3 version I currently have, doesn't. I have a similar requirement, however on a report that will be printed, decided to try and go the PDF generation way, hoping that XSL-FO works. – jamiebarrow Jan 07 '11 at 10:07
  • 3
    `page-break-inside: avoid` works for me in Chrome 22 (still nothing in Firefox 15). – bdukes Oct 24 '12 at 03:08
  • 3
    `page-break-inside` works starting with [FF19+](https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside), so all major browsers have support for it now. – Sergiu Dumitriu Jul 14 '13 at 23:19
  • This did not work for me, but `display:block` kept mine together. – Heraldmonkey Jan 23 '14 at 10:19
  • This works great with wkhtmltopdf thanks for a great solution!! – Peter May 16 '14 at 13:35
  • The properties `page-break-*` has become `break-*` => [page_break_aliases](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#page_break_aliases) – Nemolovich Aug 19 '21 at 11:19
22

I'd suggest you look into page-break-after, page-break-inside and page-break-before rules in CSS.

Steve Blackwell
  • 5,904
  • 32
  • 49
Sampson
  • 265,109
  • 74
  • 539
  • 565
1

Use a table layout. But to avoid changing the semantics, use CSS.

question {
    display: inline-table;
}
Nate Barr
  • 4,640
  • 2
  • 25
  • 21
1

Use a separate print stylesheet, and use the page-break-before and page-break-after selectors for your leading and ending questions on each page.

If the quiz is static, you can plot the classes you use out and make it work without anything more than CSS.

tahdhaze09
  • 2,220
  • 1
  • 21
  • 36