HTML/CSS: How to (Maybe) Prevent the Text of a Time Display from Jiggling Around, Part 2

In my previous blog post, I described how to deal with text output of time codes (e.g., hours:minutes:seconds) in Windows Presentation Foundation (WPF) when using a font where not all digits take up the same space.

This article is a short follow-up on how to solve this issue in HTML/CSS.

What to do in CSS

Here is the default behavior for the “Impact” typeface:

After setting font-variant-numeric: tabular-nums; in CSS, the result is

Why the “Maybe” in the title?

Not all fonts actually support the feature; for more information, see the WPF version of the article.


No Comments