CSS and Printing : Keep block of text together

27
votes

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.

4
cssprintingpage-break
Possible duplicate of CSS Printing: Avoiding cut-in-half DIVs between pages? – Michael Freidgeim

4 Answers

40
votes

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;
}
19
votes

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

1
votes

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.

1
votes

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

question {
    display: inline-table;
}