CODEWITHSUNDEEP
cssprintingpage-break
Chris Cudmore
Chris Cudmore

Reputation: 30151

CSS and Printing : Keep block of text together

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.

Upvotes: 32

Views: 36020

Answers (4)

Nate Barr
Nate Barr

Reputation: 4660

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

question {
    display: inline-table;
}

Upvotes: 1

Sampson
Sampson

Reputation: 268344

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

Upvotes: 22

tahdhaze09
tahdhaze09

Reputation: 2213

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.

Upvotes: 1

Parrots
Parrots

Reputation: 26882

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

Upvotes: 44

Related Questions