11-01-2019 01:43
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

11-01-2019 01:43
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?

11-01-2019 01:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


11-01-2019 01:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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).
Gondwana Software

11-01-2019 01:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

11-01-2019 01:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?

11-01-2019 02:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


11-01-2019 02:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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!
Gondwana Software

11-01-2019 06:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

11-01-2019 06:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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

