Patterns of implementing blinking colon in time presentation that does not 'shake' the time box

[Sasha.S]

I am implementing a digital clock face with a blinking colon which is supposed to blink once a second.

Something like this:

if (this.seconds % 2) {
    return `${hours}:${mins}`;
} else {
    return `${hours} ${mins}`;
}

Problem: Because monospace fonts are not supported, space and colon have different size which makes a number box shake when it changes from, say, '9:30' to '9 30'.

I am sure I am not the first one having this issue, but I have not found an easy way to solve it. Are there any patterns of solving this issue? Or how do you generally handle blinking colon?

[Gondwana]

You could make hours and minutes to be separate elements.

Or, more radically and perhaps more efficiently, make the time (with a space) one element, and the colon a separate element. Then, just blink the colon (for which you could use .style.display).

[Sasha.S]

Ok, that's what I was thinking about - it is complex. How do you calculate where to put colon? Not only colon and space are of different size, numbers are also different. And even if I use monospace numbers I would have to place colon in a different place for cases when time consists of 3 numbers (9:00) and cases when it is 4 numbers (10:00)...

Do you by chance have an example where it is correctly handled?

[Gondwana]

I don't think a general solution is easy (although you can determine the size of elements using getBBox).

I'd have a guess, grab a screenshot, look at it in an image editor, and measure the number of pixels I need to adjust it by.

Low-tech but reliable.

Just make sure you're happy with the font face and size first!

[morningReign]

Hello @Sasha.S ,

I think you are looking for a 'figure space' It has the same width as a numeric digit. Normal spaces are smaller.

(HTML  ). Its character entity reference is   (Wikipedia)

Regards,

Reign