Fixing numbers alignment with CSS

While working on a demo for the Action and DataModel components from @studiometa/ui involving an <input type="date"> element, I stumbled upon a small issue I often encounter when working with numbers: small layout shifts when the number changes.

The issue

In the example below, adding or removing a day from the date will slightly change the width of the <input type="date"> element.

If you do not see the small layout shifts in the demo above, the following video might be more explicit:

This issue can also be seen when displaying a list of numbers, where the line endings are not aligned, even though they contain the same number of characters.

The solution

The solution is a feature of the OpenType format called tnum (wiki), which enables tabular figures. This means that all numbers will have the same width, preventing any misalignment or small layout shifts.

This can be enabled with Tailwind CSS by using the tabular-nums class:

-  <div class="flex gap-10 justify-center">
+  <div class="flex gap-10 justify-center tabular-nums">

Or directly in CSS by using the font-variant-numeric property:

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

Adding the tabular-nums class to both our demos fixes them: numbers are aligned, and changing them does not trigger a layout shift.

Our columns of number are nicely aligned:

The <input type="date"> element will not have its width changed when its value is updated:

Links

To go further, make sure to visit the following links:

• Documentation on OpenType font features
• Documentation for the font-variant-numeric property
• Documentation for the tabular-nums class of Tailwind CSS

And to learn more on the components used for the date demo:

• Documentation for the Action component
• Documentation for the DataBind family of components