A meter reading table showing previous, current and consumption

Why this block is harder than it looks

The reader's whole reason for looking at this table is to check one subtraction, so anything that makes the subtraction harder to follow is a design failure. That means the three numbers have to be in the same column alignment, adjacent, and in the order the arithmetic runs. There is also an estimation problem specific to this block: a reading can be actual or estimated, and the difference matters enough that it has to be visible on the row rather than explained in a footnote nobody reads. And meters roll over, so a current reading lower than the previous one is legitimate and must not look like an error.

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.

• Put previous, current and consumption in adjacent columns in that order, all right-aligned to the same grid, so the subtraction reads left to right without the eye moving vertically.
• Mark an estimated reading on the row with a letter in its own narrow column, and explain the letter once directly under the table rather than in the page footer.
• Handle rollover explicitly: where the current reading is lower, print the consumption as computed and add a marker, rather than printing a negative number.
• Show the reading dates, because consumption over 28 days and over 95 days are different things and the reader is entitled to know which.
• Give each meter its own labelled block if there is more than one, and keep the block together, so a meter's readings and its charge cannot be separated.
• Use the same decimal precision as the meter itself. Rounding a reading to fewer digits than the dial shows makes the figure impossible to check against the meter.

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.

<table class="meters">
  <thead>
    <tr>
      <th>Meter</th><th>From</th><th>To</th>
      <th class="n">Previous</th><th class="n">Current</th>
      <th class="e"></th><th class="n">Used</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4471-A</td><td>01 Jan</td><td>31 Mar</td>
      <td class="n">18,204</td><td class="n">19,118</td>
      <td class="e">E</td><td class="n">914</td>
    </tr>
  </tbody>
</table>
<p class="key">E: estimated reading. All others are actual.</p>

<style>
  .meters { width: 100%; border-collapse: collapse; font-size: 9pt; table-layout: fixed; }
  .meters th, .meters td { padding: 3pt 4pt; }
  .meters .n {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .meters .e { width: 5%; text-align: center; font-size: 8pt; color: #666; }
  .meters tbody tr { break-inside: avoid; }
  .key { margin-top: 4pt; font-size: 8pt; color: #555; }
</style>

What breaks when it is built the obvious way

Explaining the estimation marker in the page footer with the registration details. It is the one thing on the row a customer will query, and putting it eighty millimetres away from the row makes the query certain rather than avoiding it.

How to prove it survived pagination

Render a meter that rolled over, a meter with an estimated reading, and a meter with a five-digit and a six-digit reading in the same table. Check the subtraction on each row by eye, in the order the columns run. If you have to look up and down rather than across, the columns are in the wrong order.

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 statement of account 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.