Javascript (or css?): keep changing numbers from wiggling surrounding text

Question

I've implemented something like this:

http://jsfiddle.net/DKs49/

<p>Here are some numbers: <span id="1">123234</span>. Cool huh?<p>

Then change the number dynamically:

setInterval(function () {document.getElementById('1').innerHTML = Math.random();},100);

However, I am not using a fixed-width font (as jsfiddle does)

When digits are added, I need the surrounding text to move (like its doing...) however, on my site, when the number of digits are the same, the surrounding text still wiggles based on the digit width (since not using a fixed-width font, 1 is narrower than 2).

Anybody know how to fix this? (Or can recommend a cross-platform fixed-width font that doesn't look like a typewriter...)

---

EDIT: Per the comment by @guffa turns out many fonts have fixed width digits. Rather than hassle with this, simplest route = choose a better font.

Answer 1

If you're okay with a fixed-width <span>:

p span {
    display: inline-block;
    width: 150px;
    text-align: right;
}

http://jsfiddle.net/DKs49/4/

Answer 2

The text is not jumping around because of the digits having different width, it's jumping around because there are different numbers of digits.

If you for example get a random number like 0.7362924825642400 it will instead be displayed as 0.73629248256424, i.e. two digits shorter than the others. A number with a zero right after the decimal separator will be displayed using the same number of significant digits, so it will be longer than the others.

In most fonts the digits are still the same width, eventhough rest of the characters aren't. They are made that way so that the digits will line up when numbers are displayed in columns, without having to align every digit separately.

If you make the number of digits the same all the time, you will most likely see like me that the rest of the text is completely still: http://jsfiddle.net/Guffa/DKs49/8/

document.getElementById('1').innerHTML = String(Math.random()).substr(0,15);

Answer 3

As per the W3 specification:

'monospace' fixed-width fonts are

• Andale Mono
• Courier New
• Courier
• Lucidatypewriter
• Fixed
• monospace