DEV Community

Cover image for Tiny CSS Detail Stopped Countdown Button from Shaking
Asmaa Almadhoun
Asmaa Almadhoun

Posted on

Tiny CSS Detail Stopped Countdown Button from Shaking

#css #frontend #ui

While working on a session countdown, I noticed a small but annoying UI issue: the button slightly changed its width every time the counter updated.

With a senior developer’s eye, even the smallest movement becomes noticeable.

Why Does It Happen?

In most fonts, digits do not have the same width. For example, 1 is usually narrower than 8.

When the countdown changes:

Yes 4:50
Yes 4:49
Yes 4:48
Enter fullscreen mode Exit fullscreen mode

the text width changes too. If the button does not have a fixed width, it grows and shrinks by a few pixels, creating a distracting shaking effect.

The Simple Fix: tabular-nums

The CSS property font-variant-numeric: tabular-nums gives every digit the same horizontal width.

With Tailwind CSS, we can enable it using one class:

<button className="tabular-nums">
  Yes {formattedTime}
</button>
Enter fullscreen mode Exit fullscreen mode

Now, 1, 4, 8, and every other digit occupy the same amount of space. The countdown can change without affecting the button’s width.

Why Not Use a Fixed Width?

A fixed width may hide the issue, but it is not always flexible. It can break when the text changes, the interface is translated, or a different font size is used.

tabular-nums solves the actual problem while keeping the component responsive.

Where Is It Useful?

Use tabular-nums for any frequently changing numeric value:

  • Countdown timers
  • Digital clocks
  • Prices and financial values
  • Dashboard statistics
  • Live scores
  • Data tables
  • Progress indicators

It is a small CSS detail, but it makes the interface feel more stable and polished.

Notice the details. Read more. Code smart.

Top comments (0)