Right-align comparable numeric fields

In the table below, the various numerical fields are kind of hard to compare and easy misinterpret, because of the alignment of the values:

Table with left alignment

By right-aligning numerical fields, the values become easier to compare and less prone to misinterpretation, since the least significant digits are vertically aligned:

Java

  1. Table tblExpenses = new Table();
  2. tblExpenses.setContainerDataSource(expensesData);
  3. tblExpenses.setColumnAlignment("cost", Table.Align.RIGHT);
  4. tblExpenses.setColumnAlignment("vat", Table.Align.RIGHT);

Table with right alignment

This effect is of course ruined if the formats of these fields are different, such as different number of decimals. Make sure that you’re using the same format for fields that should be easy to compare.

Even though this example was of a table, the same principles also apply to input fields. Right-aligning a text field indicates to the user that a numerical value is expected, and makes multiple numerical fields in the same form easier to compare. To do this, you’ll need to set up a custom theme for your application (which you’ll probably end up doing at some point anyway), set a custom stylename to the field, such as “numerical” or “right-aligned”…​

Java

  1. TextField tfExpensesLodging = new TextField(“Lodging”);
  2. tfExpensesLodging.addStyleName(“numerical”);

…​and get your hands dirty with a bit of CSS:

CSS

  1. .v-textfield.numerical {
  2.   text-align: right;
  3. }

Note that right-aligning non-comparable numerical fields, such as product IDs or ISBNs is kind of pointless, and probably best to avoid.