CSS Kerning for Large Numbers

Question

I realise that in the states large numbers are formatted with a , between thousands so you would write $1,000,000.00. In South Africa a , is non-standard and could be used as a decimal point instead of the ..

We would write $1000000.00 which is horrible to read. The typical solution is to use a bit of whitespace: $1 000 000.00.

The problem with that solution is that it still looks terrible.

If I assume values are currency formatted in a particular DOM element (i.e. the numbers are suffixed with .00 even if it's double zero), the ideal solution would be to use CSS to somehow manipulate the kerning of every nth-last-letter. I have a strong preference not to use javascript but maybe that's not possible...

Is something like this possible? What's the best solution?

Answer 1

I would think that using ordinary spaces and then reducing their width with CSS would do the trick.

e.g.

.currency {
    word-spacing: -2px
}

See https://jsfiddle.net/5f9c4cdu/

Answer 2

I don't think this is possible- to manipulate the kerning of a font through css. Your best bet is to find a font with an ideal kerning built in and use that.

However, since you need variable kerning, I'd have to recommend using JS. It would be a simple script.

html:

<div class='currency comma-delimited'>1,000,000.00</div>

jQuery code:

var input = $('.currency.comma-delimited').text();
while(input.indexOf(',') != -1) {
    //replace each comma with a space
    input = input.replace(',',' ');
}
$('.currency.comma-delimited').text(input);

The following CSS-based solution is ridiculous and you shouldn't use it:

html:

<div class='currency'>
1<span class='space-delimited'></span>000</span class='space-delimited'></span>000.00
</div>

css:

.currency .space-delimited:after {
    content:' ';
    display:inline-block;
    height:1em;
    width:0.5em; /* control the size of the space, essentially the kerning */
}

Being realistic, you could combine the JS solution with this CSS solution to inject the .space-delimited span in place of the comma, thus giving you dynamic placement of the span and control of the kerning through the .space-delimited css.

Please view the snippet for a combined example.

var input = $('.currency.comma-delimited').text();

while (input.indexOf(',') !== -1) {
  input = input.replace(',', '<span class="space-delimited"></span>');
}

$('.currency.comma-delimited').html(input);

.currency .space-delimited:after {
  content: ' ';
  display: inline-block;
  height: 1em;
  width: 0.2em; /* this is your kerning variable! */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='currency comma-delimited'>
  1,000,000.00
</div>