2

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.
Alltheprettyhorses
  • 113
  • 1
  • 2
  • 9

3 Answers3

2

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

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

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

bfavaretto
  • 71,580
  • 16
  • 111
  • 150
  • Yeah - the problem is the number might add digits for 2,3,4,even 10 spaces making the fixed width span too small. Can one dynamically change a span width based on the number of digits? – Alltheprettyhorses Feb 18 '13 at 19:38
  • Well, the width is changed dynamically is what you have now; that (+ text alignment) is what causes the surrounding contents to wiggle. – bfavaretto Feb 18 '13 at 19:39
  • Right, but thinking: `span width = #of digits * pixels` where total span encompasses all digits at the max width -- say 55555 and if it shrinks to 11111 the span will still be the same. If I add another digit 666666 then the span increases to the maximum 6 digit width... – Alltheprettyhorses Feb 18 '13 at 19:44
  • Sort of... it works right on Jsfiddle cause it uses a fixed width font... on my site, digits are not fixed width... – Alltheprettyhorses Feb 18 '13 at 19:50
1

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);
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Or simply `Math.random().toFixed(15);` – bfavaretto Feb 18 '13 at 19:38
  • Right - I know its not clear from the example, but the issue is both the width of the digits change, AND the number of digits will as well. I don't want the wiggle in the first case, I do in the second. +1 for fonts with same size digits... maybe I need to find a new base font. (once I get +1 power ;) – Alltheprettyhorses Feb 18 '13 at 19:40
0

As per the W3 specification:

'monospace' fixed-width fonts are

  • Andale Mono
  • Courier New
  • Courier
  • Lucidatypewriter
  • Fixed
  • monospace
karancan
  • 2,152
  • 4
  • 23
  • 35