Printing an amount in words on a receipt, cheque or contract

Why this block is harder than it looks

The layout difficulty is length. Four thousand one hundred and eighty euros and no cents is fifty characters, and a figure an order of magnitude larger is seventy. Set that on one line in a fixed box and it either overflows or has to shrink, and shrinking it defeats the purpose. Wrapping is fine, but it must not leave the currency word alone on a second line, and the line has to be filled to its end so nothing can be added by hand afterwards, which is the reason the convention exists at all.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Let it wrap to at most two lines and size the box for the longest amount the document can carry, not the sample one.
• Fill the remaining space to the end of the last line with a rule, so nothing can be appended in pen.
• Capitalise the first word only. Title case across a fifty-character string is markedly harder to read and buys nothing.
• Keep the digits alongside, never instead. The words are a check on the digits, and a check needs both sides.
• Set hyphens: none on the block. A hyphenated break in the middle of a number word invites a misreading.
• Generate the words from the same rounded figure the totals use, in the document's own language, or the words and the digits can disagree in the last unit.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<div class="in-words">
  <span class="label">Amount in words</span>
  <span class="words">Four thousand one hundred and eighty euros and no cents</span>
</div>

<style>
  .in-words {
    break-inside: avoid;
    margin-top: 10pt;
    padding-top: 5pt;
    border-top: 0.5pt solid #ccc;
    hyphens: none;                  /* never split a number word */
  }
  .in-words .label {
    display: block;
    font-size: 8pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
  }
  .in-words .words {
    display: block;
    font-size: 10.5pt;
    line-height: 1.5;
    /* the rule runs to the end of the box, so nothing can be written after */
    border-bottom: 0.5pt solid #999;
    padding-bottom: 2pt;
  }
</style>

What breaks when it is built the obvious way

Shrinking the type until the longest amount fits on one line. It looks tidy on the sample, and it means a large payment, which is exactly the case where the words matter most, is printed in the smallest type on the page.

How to prove it survived pagination

Render with the largest amount the document can carry and confirm it wraps to no more than two lines with the currency word not alone on the second. Then confirm the words and the digits describe the same number, which is worth checking because they are usually produced by different code.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The payment receipt template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.