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?

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. — David Thomas, Apr 02 '15 at 15:37
Take a look at [this codepen](http://codepen.io/FWeinb/pen/djuIx) or [Lettering.js](https://github.com/davatron5000/Lettering.js) to control kerning of individual characters. — quw, Apr 02 '15 at 15:56
Thanks @quantumwannabe - both look good, you should put those as answers... — jcuenod, Apr 02 '15 at 16:15

score 3 · Answer 1 · answered Apr 02 '15 at 15:55

3

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/

answered Apr 02 '15 at 15:55

Jez

2,384
1
17
31

that's pretty clever! however, you'd need to add in those spaces yourself, or have something that automates that. – ferr Apr 02 '15 at 15:56
@ferr 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. – Jez Apr 02 '15 at 15:57
If it's all static or he's fine with getting spaces in somehow, then it should work for him. – ferr Apr 02 '15 at 16:09
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. – jcuenod Apr 02 '15 at 16:12

ferr · Answer 2 · 2015-04-02T15:54:34.513

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>

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. — Max, Apr 02 '15 at 15:30
ah I see, so "00" and "00 00". I'll add some tips to my post. thanks — ferr, Apr 02 '15 at 15:31
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 ;) — jcuenod, Apr 02 '15 at 16:14
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. — ferr, Apr 02 '15 at 16:18

CSS Kerning for Large Numbers

2 Answers2

Linked

Related