How to make numbers have the same width?

[bernhard]

I'm using a server control panel that shows the current live time:

Recently I discovered that this line breaks to two lines on some very specific screen widths:

The reason is that numbers "1" and "7" are slightly narrower than all the other numbers and while the seconds increase the content on the screen jumps around:

After some feedback it looks like the problem only occurs on Mac where this style is used:

body, button, input, optgroup, select, textarea {
    font-family: BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
}

The developer of the panel confirmed the problem but my proposed solution does not work for him either (https://stackoverflow.com/questions/10149330/force-non-monospace-font-into-fixed-width-using-css):

With the font used on my system (the "Ubuntu" font is used here) it does not wobble either, so I tried other fonts until I found one (Helvetica) where it is 1 px smaller than normal at a certain time (10:30:11).

I tried "font-variant-numeric: tabular-nums;" but the problem persisted. Hmm

As this could be a problem for every website I'm asking if anyone of you guys knows a good solution for this very specific problem? Thx in advance!

[psy]

Untried, but have you experimented with font-size: clamp(min, optimum, max) and wrap: no-wrap in the CSS?

[flydev]

Worth a ping @Claus he might have an idea on this subject.

 

[dragan]

Try white-space: nowrap;

Or if it's a table: table-layout: fixed;

[ErikMH]

Have you tried using the tabular-nums attribute of the font-variant-numeric CSS property? That’s how I’d approach this.

[bernhard]

29 minutes ago, dragan said:

white-space: nowrap;

Thx, but that's not solving the problem. It's just preventing the line break, but then you'll break the responsiveness and you'll not see the time on mobile screens as it will not fit on the screen. Or it will create a horizontal scrollbar.

3 hours ago, psy said:

have you experimented with font-size: clamp(min, optimum, max)

No, I don't think that the font-size is the issue. The issue is that different numbers are of different width. A solution would be to use a monospace font for the time, but that looks ugly.

That's why I suggested tabular-nums as solution but as I said he tried that and the problem still persists:

3 hours ago, bernhard said:

I tried "font-variant-numeric: tabular-nums;" but the problem persisted. Hmm

 

[dragan]

Well, you can change the CSS for small screens of course.

Have you thought about choosing another time format, i.e. omit the timezone? Can't you output the timezone in a separate row?

The only other idea I would try is to insert spans and only wrap numbers in a css class that has tabular-nums

[ErikMH]

Sorry for suggesting something you’d already tried, @bernhard — I’d skimmed over some of the details of your post (pre-coffee!).

Not all fonts have tabular numeric forms, of course. Actually, a quick look through my 361 installed typefaces shows that only about half of my installed fonts support tabular numbers — YMMV, of course. This, on a MacBook Pro running macOS 13.4.1 (the current “Ventura” release).

So, it’s possible that tabular-nums is working just fine — only not with any of the fonts that have been called for.

[bernhard]

1 minute ago, ErikMH said:

Not all fonts have tabular numeric forms, of course. Actually, a quick look through my 361 installed typefaces shows that only about half of my installed fonts support tabular numbers — YMMV, of course. This, on a MacBook Pro running macOS 13.4.1 (the current “Ventura” release).

So, it’s possible that tabular-nums is working just fine — only not with any of the fonts that have been called for.

Thx! So a solution could be to use a font that supports that and use the css setting to use it? How do I know if a font supports tabular-nums or not?

Can that be different on mac/win? I don't know a lot about fonts so please keep it basic 😄 

[wbmnfktr]

2 hours ago, bernhard said:

How do I know if a font supports tabular-nums or not?

Grab one of your used font files (woff, woff2) and upload it to:

https://wakamaifondue.com/

It will check for all kinds of features and details. Look for the tnum feature.

[ErikMH]

I don’t know @wbmnfktr’s source, but it sure sounds like that’ll do the trick nicely! My suggestion otherwise, honestly, if you don’t have a lot of digital typography knowledge or relevant tools, would simply be to experiment with the CSS: specify only one font at a time and include font-variant-numeric: tabular-nums, remembering (of course) to dump (or not use) your browser cache with each new page load.

I believe all the various Arial varieties support it, as do the Avenirs. So do (at least) the macOS Helveticas. DIsappointingly, the current macOS system font (variations on “SF” and “San Francisco”) appear not to support it, other than the mono-spaced SF Mono variant.

It probably goes without saying, but you’ve asked for “basic,” so: all monospaced fonts will do exactly what you want, even without the font-variant-numeric: tabular-nums. Even if you don’t want to use a monospaced font in general, you might consider using it just for the date/time stamp. My favorite is Michael Everson’s shareware (€25) Everson Mono, which has beautiful glyphs for (I believe) every non-Han Unicode codepoint. Everson writes:

Quote

I have found it quite legible at sizes as small as 4 points. It is lighter and a bit looser than Courier.... Its clean, simple design makes Everson Mono an excellent default “fallback” font when no other, more “typographical” fonts are available for a specific script or Unicode character.

I met Michael (nice guy!) a few years ago in the U.K., but otherwise I have no connection or vested interest — other than Everson Mono being my favorite monospaced font for the past 35 years....

[bernhard]

Thank you all for your input and help. Really a great forum with many helpful people around 🙂 

Unfortunately the developers of the panel do not seem to be interested in fixing that behaviour. They even moved the topic from the "issues" forum to the "feature requests" board.

Not sure what they have against the wording "issue/bug" for that time based content shifts, and also I'm really confused where they see a "feature request" in that report, but that's another story 😄  At least I learned something new about fonts and I got reminded that it's not self-evident to have a place like the pw forum 🙂 

[ErikMH]

That’s a shame, @bernhard — not the way I like my app developers to behave. 😞

But I’ve learned so much for your own helpful comments and answers and modules that it would never occur to me to withhold a helpful hand when there’s something I know a little bit about. I’ve been privileged to belong to several forums with very high signal-to-noise ratios, but this one is truly la crème de la crème.

Tschüß, und Viel Glück!