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?

Dihydrostreptomycin

CSS has no capacity to target characters (except in the case of the ::first-letter pseudo-element), so to do this you'd need to use JavaScript to wrap the groups of numbers with an element and then use margin/padding to supply the spacing. – Beaudoin

Take a look at this codepen or Lettering.js to control kerning of individual characters. – Ilse

Thanks @quantumwannabe - both look good, you should put those as answers... – Dihydrostreptomycin

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/

Legrand

that's pretty clever! however, you'd need to add in those spaces yourself, or have something that automates that. – Vlada

@Vlada Nice of you to say so, thanks. I think the OP was saying that he could format the text with spaces or with commas, but I might be wrong. – Legrand

If it's all static or he's fine with getting spaces in somehow, then it should work for him. – Vlada

I think this is an awesome idea. I hadn't considered actually manipulating the size of the spaces. Obviously it's not the elegance of kerning the number but it's certainly a useful idea. – Dihydrostreptomycin

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>

Vlada

That won't work because he wants kerning to be different for the same character in different contexts. A new font will make no difference. – Premonish

ah I see, so "00" and "00 00". I'll add some tips to my post. thanks – Vlada

Wouldn't it make more sense to put spans around each thousand rather than having them arb around in the middle of text? I have rewarded the work you've put into the answer though ;) – Dihydrostreptomycin

The spans are replacing the comma and creating a space with width defined by css. If the span were around the thousands, it would still work, but the css would need to be set using :before instead of :after to define the space. – Vlada