CSS Kerning dla dużych liczb

Question

Zdaję sobie sprawę, że w stanach dużych liczb są formatowane z , między tysiącami, więc można napisać $1,000,000.00. W Republice Południowej Afryki , jest niestandardowy i może być użyty jako kropka dziesiętna zamiast ..

Napisalibyśmy $1000000.00, co jest okropne do przeczytania. Typowym rozwiązaniem jest użycie odrobiny białych znaków: $1 000 000.00.

Problem z tym rozwiązaniem polega na tym, że nadal wygląda okropnie.

Jeśli przyjmuję, że wartości są sformatowane w walucie w danym elemencie DOM (tzn. Liczby mają sufiks .00, nawet jeśli jest to podwójne zero), idealnym rozwiązaniem byłoby użycie CSS do manipulowania kerningem każdej n-tej ostatniej wartości. list. Mam silną preferencję, aby nie używać javascript, ale może to nie jest możliwe ...

Czy coś takiego jest możliwe? Jakie jest najlepsze rozwiązanie?

Answer 1

Nie sądzę, że to jest możliwe- manipulować kerning czcionki przez css. Najlepiej jest znaleźć czcionkę z wbudowanym idealnym kerningiem i używać jej.

Jednak, ponieważ potrzebujesz zmiennej kerningu, musiałbym polecić używanie JS. Byłby to prosty skrypt.

html:

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

jQuery Kod:

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

Poniżej rozwiązanie CSS oparte jest śmieszne i nie należy go używać:

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 */ 
} 

realistą, można połączyć rozwiązanie JS z tego rozwiązania CSS wstrzyknąć rozpiętość .space rozdzielany zamiast przecinka, co daje dynamikę umieszczenie rozpiętości i kontroli kerningu przez. css.

Proszę wyświetlić fragment kodu dla połączonego przykładu.

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>

Answer 2

Myślę, że przy użyciu zwykłych spacji, a następnie zmniejszenie ich szerokości z CSS by rade.

np.

.currency { 
    word-spacing: -2px 
} 

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