T.script T.script - 1 year ago 47
CSS Question

Keeping the Space Between Characters Constant Javascript

Hi i'm new to this site and javascript in general so stay with me.

what i'm wanting to do is keep my numbers in my timer still.

ATM some of the characters are slightly bigger than others so when my timer counts rapidly they move rapidly making it hard to read.

I've found a example of what i want my characters to do
https://www.csgocrash.com/play/1

As you can see the timer stays still and the numbers increment without pushing the other characters.

I'm writing a similar website but using a canvas to encase the timer, ive tried using spacing but that doesn't work. I'm writing in Javascript which links to the HTML Page. Any information would be appreciated.

And sorry for my lack of jargon, (still learning)

EXAMPLE.

a "0" might be 5px wide

a "." might be 1px wide

a "7" might be 6px wide

therefore "0.7" would be 12px wide

But if a "6" is 5px wide

that would mean "0.6" is 11px wide

And this is what i believe is causing the movement when the timer increases rapidly.

PLEASE ASK FOR ANY INFORMATION NEEDED, AS I REALLY DON'T KNOW WHAT TO INCLUDE (newby)

Answer Source

If you really need to use a specific font with varying width letters, you could write something which evenly spaces the characters. However, the much simpler way is to use a monospaced font, such as Courier.

proportional vs monospaced

A CSS rule which does what you need might look something like this:

.timer
{
    font-family: "Courier New", Courier, monospace;
}

This would tell the browser to use Courier New if there is an exact match for it on the user's computer. If they don't, it would use any other Courier font they have. Failing that, it would use any monospace font they do have.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download