CSS Kerning for Large Numbers

半城伤御伤魂 提交于 2019-12-01 16:09:28

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/

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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!