Formatage des nombres (décimales, séparateurs de milliers, etc.) avec CSS

Est-il possible de formater des nombres avec CSS? C'est-à-dire: décimales, séparateur décimal, séparateur de milliers, etc.

Vous pouvez utiliser Number.prototype.toLocaleString(). Il peut également formater d'autres formats de nombres, par exemple latin, arabe, etc.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Le groupe de travail CSS a publié un brouillon sur la mise en forme du contenu en 2008. Mais rien de nouveau pour le moment.

Eh bien, pour tous les nombres en Javascript, j'utilise le suivant:

var a = "1222333444555666777888999";
a = a.replace(new RegExp("^(\\d{" + (a.length%3?a.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();

et si vous devez utiliser un autre séparateur comme virgule, par exemple:

var sep = ",";
a = a.replace(/\s/g, sep);

ou en fonction:

function numberFormat(_number, _sep) {
    _number = typeof _number != "undefined" && _number > 0 ? _number : "";
    _number = _number.replace(new RegExp("^(\\d{" + (_number.length%3? _number.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();
    if(typeof _sep != "undefined" && _sep != " ") {
        _number = _number.replace(/\s/g, _sep);
    }
    return _number;
}

La meilleure façon de le faire est probablement de définir une étendue avec une classe indiquant votre mise en forme, puis d'utiliser Jquery .each pour faire la mise en forme sur les étendues lorsque le DOM est chargé ...

Non, vous devez utiliser javascript une fois qu'il est dans le DOM ou le formater via votre langage côté serveur (PHP / ruby ​​/ python etc.)

Pas une réponse, mais peut-être intéressant. J'ai envoyé une proposition au CSS WG il y a quelques années. Cependant, rien ne s'est passé. Si en effet ils (et les fournisseurs de navigateurs) voyaient cela comme une véritable préoccupation des développeurs, peut-être que la balle pourrait commencer à tourner?

Si ça aide ...

J'utilise la fonction PHP number_format()et le Narrow No-break Space (  ). Il est souvent utilisé comme séparateur de milliers sans ambiguïté.

echo number_format(200000, 0, "", " ");

Parce que IE8 a quelques problèmes pour rendre l'espace sans coupure étroit, je l'ai changé pour un SPAN

echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";

.number SPAN{
    padding: 0 1px; 
}

Vous ne pouvez pas utiliser CSS à cette fin. Je recommande d'utiliser JavaScript si cela est applicable. Jetez un œil à ceci pour plus d'informations: JavaScript équivalent à printf / string.format

De plus, comme Petr l'a mentionné, vous pouvez le gérer côté serveur, mais cela dépend totalement de votre scénario.

Je ne pense pas que vous puissiez. Vous pouvez utiliser number_format () si vous codez en PHP. Et d'autres langages de programmation ont également une fonction de formatage des nombres.

Vous pouvez utiliser la bibliothèque de balises Jstl pour le formatage des pages JSP

JSP Page
//import the jstl lib
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>

<c:set var="balance" value="120000.2309" />
<p>Formatted Number (1): <fmt:formatNumber value="${balance}" 
        type="currency"/></p>
<p>Formatted Number (2): <fmt:formatNumber type="number" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (3): <fmt:formatNumber type="number" 
        maxFractionDigits="3" value="${balance}" /></p>
<p>Formatted Number (4): <fmt:formatNumber type="number" 
        groupingUsed="false" value="${balance}" /></p>
<p>Formatted Number (5): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (6): <fmt:formatNumber type="percent" 
        minFractionDigits="10" value="${balance}" /></p>
<p>Formatted Number (7): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (8): <fmt:formatNumber type="number" 
        pattern="###.###E0" value="${balance}" /></p>

Résultat

Numéro formaté (1): 120 000,23 £

Numéro formaté (2): 000.231

Numéro formaté (3): 120,000.231

Numéro formaté (4): 120000.231

Numéro formaté (5): 023%

Numéro formaté (6): 12,000,023.0900000000%

Numéro formaté (7): 023%

Numéro formaté (8): 120E3