Ruled lines sized for handwriting on a printed form

Why this block is harder than it looks

Ruled lines are drawn at the spacing of the document's type, which is about half what handwriting needs, so a person writing on the form either writes between every other line or writes small and illegibly. The second problem is that the number of lines is a guess about how much somebody will write, and too few is worse than too many: a person who runs out of lines writes up the margin, and that text is lost when the form is scanned. And a ruled area built from repeated elements in the flow will break across a page in the middle of the block.

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.

• Space the rules at 8mm minimum, and 9 or 10mm where the form will be completed in the field or by people wearing gloves.
• Draw them with a repeating background rather than as individual elements, so the count is a height rather than a list and the block cannot break between rules.
• Extend the rules to the full width of the writing area, not to the width of the label above them.
• Provide more lines than you expect to be used, and end the block with a visible boundary so it is clear where the space stops.
• Set them light grey rather than black. A dark rule competes with the handwriting on top of it and makes a scanned form harder to read.
• Keep the block together with break-inside: avoid where it is short enough, and where it is not, ensure it breaks between rules rather than through one.

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="write-area">
  <span class="label">Observations</span>
  <div class="lines"></div>
</div>

<style>
  .write-area { break-inside: avoid; margin: 8pt 0; }
  .write-area .label {
    display: block;
    margin-bottom: 3mm;
    font-size: 7.5pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
  }
  .write-area .lines {
    height: 48mm;                       /* six lines at 8mm */
    border-bottom: 0.5pt solid #999;    /* a visible end to the space */
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 7.6mm,
      #ccc 7.6mm,
      #ccc 7.7mm                        /* one hairline every 8mm */
    );
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
</style>

What breaks when it is built the obvious way

Spacing the rules at the document's line height. Four millimetre ruling is unwritable for most adults, so the form comes back with writing across every second line and half the space wasted, or with writing that cannot be read.

How to prove it survived pagination

Print it and write three lines of normal handwriting on it. If your writing touches the rules above and below, the spacing is too tight. Then check the rules actually printed: a background gradient is exactly the kind of thing a print pipeline drops.

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 inspection checklist 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.