javascriptcssfixed-width

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

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.

Solution

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

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

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