HTML layouts for print

Participants in economics experiments get paid in real money following the experiment. There is usually limited time to pay everyone, get all participants to accurately fill in receipts and sign them while preserving their privacy. Therefore, generating receipts electronically and printing them with as much of the information as possible already filled in has considerable advantages.

One way to generate printable receipts is to use some sort of PDF template to fill in and create a PDF file based on the earnings from the experiment. I really do not like this option. It requires a lot of code duplication, dealing with fine(!) details of PDF etc. Recently, I wondered if I could use just use HTML and custom printing CSS stylesheet to achieve this. Happily, the answer turned out to be a resounding yes (at least if the experiment monitor is using a recent version of the commonly available browsers). This made it possible to generate a single HTML page containing the payment information which displayed nicely on the screen and, when printed, gave three nicely formatted receipts per page when printed obviating the need to waste CPU cycles on generating PDFs and making hard choices about whether to cache them etc.

Here is how I did it. First, I figured out the logical structure of a receipt which I decided was represented by the following template (I am using HTML::Template):

<div class="receipt">
<div class="title">Receipt</div>

<div>
<span class="label">Participant ID:</span>
<span class="pid"><TMPL_VAR PARTICIPANT_ID></span><br>
<span class="label">Name:</span>
<span class="payee"><TMPL_VAR FIRST_NAME>
<TMPL_VAR LAST_NAME></span>
<span class="label">Date:</span>
<span class="date">&nbsp;</span>
</div>

<div>
<p>I received
<span class="amount"><TMPL_VAR PAYMENT></span>
for participation in a decision&ndash;making experiment.</p>
</div>

<div>
<span class="label">Signature:</span>
<span class="signature">&nbsp;</span>
<span class="label">Phone:</span>
<span class="phone">&nbsp;</span>
</div>

</div>

The print stylesheet hid some elements on the page and included the following:

@page { margin:0.5in 0.5in 0.5in 0.5in; }

.receipt {
    margin:0 auto 1in auto;
    font-family:"Courier New",monospace;
    border:solid #000;
    padding:0 0.25in;
    width:5.5in;
    height:2.5in;
    page-break-inside:avoid;
    page-break-before:auto;
    page-break-after:auto;
}
.receipt div, .receipt p, .receipt span {
    page-break-before:avoid;
    page-break-after:avoid;
}

.receipt div {
    margin:0;
    margin-bottom:0.1in;
    padding:0;
}

.receipt span {
    display:inline-block;
    line-height:2;
}

.receipt p, .receipt span {
    margin:0; padding:0;
}

.title {
    font-family:Arial,sans-serif;
    font-size:133.1%;
    font-weight:bold;
    width:100%;
}

.label {
    font-weight:bold;
    text-decoration:underline;
}

.date, .payee, .phone, .signature {
    border-bottom:solid thin #444;
}

.payee, .signature { width:2in; }

.phone, .date  { width:1.25in; }

.amount, .payer {
    font-style:italic;
    text-decoration:underline;
}

Which gave me three of the following beautiful receipts on each U.S. letter size page (I am assuming this would work for A4 size as well):

HTML layouts for print

A. Sinan Unur

March 3, 2010