An address block with no blank lines where a field was empty

Why this block is harder than it looks

An address is a list of optional lines pretending to be a fixed shape. Almost every address block is built by joining fields with line breaks, and almost every one of them eventually prints a blank line, because one record had no second street line or no region. On screen that reads as spacing. On paper, in a block of five short lines, a hole in the middle reads as a data error, and on a document that will be posted it reads as an address that might not deliver. The other half of the problem is that the correct order of the lines is not the same in every country, and a system that prints one order for everything is wrong somewhere.

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.

• Filter the empty values out before rendering, not in CSS. A line that does not exist cannot leave a gap, and :empty selectors do not catch a line containing a single space.
• Emit one element per line and let the block flow, rather than one string with line breaks in it. That way an empty line is an element you can simply not emit.
• Do not set a fixed height on the block. A four-line address in a five-line box is padded at the bottom, which is fine, and a six-line address in a five-line box is clipped, which is not.
• Order the lines by the destination country's convention where you know it, and keep a per-country order table rather than special-casing in the template.
• Print the country in the language of the sending country, in capitals, on its own last line, and omit it entirely for domestic post.
• Set the block with a comfortable line height and no justification. Justified text in a four-word line produces word spaces you could park in.

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.

<!-- lines[] is built in code with the empty values already removed -->
<address class="addr">
  <span class="line name">Wynne and Hall Ltd</span>
  <span class="line">Unit 4, Callow Works</span>
  <span class="line">Bridge Street</span>
  <span class="line">Sheffield S3 8NP</span>
  <span class="line country">UNITED KINGDOM</span>
</address>

<style>
  .addr {
    font-style: normal;            /* address defaults to italic */
    line-height: 1.35;
    break-inside: avoid;
    text-align: left;              /* never justify an address */
  }
  .addr .line { display: block; }
  .addr .name { font-weight: 700; }
  .addr .country {
    margin-top: 2pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
</style>

What breaks when it is built the obvious way

Joining the fields with line breaks and hoping the empty ones collapse. They do not: two consecutive breaks produce a blank line, and the record that triggers it is never in the test data because test data is complete. Build the array, filter it, then render it.

How to prove it survived pagination

Render the block with a record missing its second street line, a record missing its region, and a record with a five-line address, all on the same page. Any vertical gap that is not at the bottom is a bug, and comparing three side by side finds it faster than looking at one.

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 business letter 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.