Adjustments in Spacing for Text with Significant Digits

Question

Adjustments in Spacing for Text with Significant Digits

It has come to my attention that in the United States, large numbers are often formatted with a comma between thousands, like so: $1,000,000.00. Here in South Africa, using a comma as a thousands separator is not standard practice, as it is more commonly used as a decimal point in place of the period.

Therefore, we tend to write large numbers without the comma, which can make them difficult to read, such as: $1000000.00. A common workaround is to insert spaces for better readability, like this: $1 000 000.00.

However, even with the added spaces, the formatting can still appear unattractive.

I have been pondering a solution that involves using CSS to adjust the spacing between characters in certain elements where currency values are displayed, even if they end in .00. I would prefer to avoid using JavaScript if possible, but I am starting to wonder if that may be necessary...

Is it feasible to manipulate character spacing in this way with CSS? What would be the most effective solution to improve the appearance of large numbers on a webpage?

css number-formatting kerning letter-spacing

Answer 1

Answer №1

One way to accomplish this is by using regular spaces and then adjusting their width using CSS.

For example:

.dollar {
    word-spacing: -3px;
}

Check out https://jsfiddle.net/2e3xuhq5/ for a live example.

Answer 2

One way to accomplish this is by using regular spaces and then adjusting their width using CSS.

For example:

.dollar {
    word-spacing: -3px;
}

Check out https://jsfiddle.net/2e3xuhq5/ for a live example.

Answer 3

Answer №2

It seems unlikely that you can adjust the kerning of a font using CSS. Your best option would be to choose a font that already has the kerning you desire.

For dynamic kerning, you may need to consider using JavaScript. A simple script can achieve this.

Here is an example:

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

JavaScript 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);

Using CSS for kerning is not recommended, but here is an example anyway:

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; /* adjust the size for kerning */
}

For a more practical approach, you could combine the JavaScript solution with the CSS solution to dynamically adjust kerning through the .space-delimited class.

Check out the combined example in the snippet below.

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; /* adjust the kerning here */
}

<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>

Answer 4

It seems unlikely that you can adjust the kerning of a font using CSS. Your best option would be to choose a font that already has the kerning you desire.

For dynamic kerning, you may need to consider using JavaScript. A simple script can achieve this.

Here is an example:

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

JavaScript 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);

Using CSS for kerning is not recommended, but here is an example anyway:

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; /* adjust the size for kerning */
}

For a more practical approach, you could combine the JavaScript solution with the CSS solution to dynamically adjust kerning through the .space-delimited class.

Check out the combined example in the snippet below.

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; /* adjust the kerning here */
}

<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>

Adjustments in Spacing for Text with Significant Digits

Answer №1

Answer №2

Similar questions

Remove checked rows in a table with a single click

Looking to modify the CSS of an element during a drop event using interact.js?

Tips for avoiding deleting content within a span element when using contenteditable

What steps should I take to achieve this specific style for my WordPress website post?

React snap scrolling feature is not working as intended

The switch switches on yet another switch

Exploring ways to maximize the width of responsive images on a webpage

The HTML grid is causing an irritating excess space on the right side of my website

Tips for achieving a precise amount of boxes in each row

Hide HTML div on click

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Is it possible to create an animation with CSS3 transitions?

Creating CSS-in-JS Components in React JS without External Stylesheet interference

Struggling to integrate the navigation bar with Wordpress platform

The close button is not functioning properly

What is the CSS technique to make text wrap around an image, similar to the layout seen in certain newspapers?

Exploring Techniques for Streamlining HTML/CSS Editing in Browser

What are some creative ways to design drop-down menus within an email?

Create a new div element in your HTML structure that is not currently defined in your Sass/CSS

Rearrange information when the textarea is adjusted in size