Formatieren von Zahlen (Dezimalstellen, Tausendertrennzeichen usw.) mit CSS

121

Ist es möglich, Zahlen mit CSS zu formatieren? Das heißt: Dezimalstellen, Dezimaltrennzeichen, Tausendertrennzeichen usw.

Don
quelle
61
Sie können nicht, aber Sie sollten es wirklich können. Immerhin sind 50.000 oder 50000 oder 50.000,00 dieselben "Daten", sie werden nur unterschiedlich dargestellt, wofür CSS gedacht ist.
Punkrockbuddyholly
4
@MrMisterMan: Hier werden einige Ideen herumgeschleudert : wiki.csswg.org/ideas/content-formatting#numbers Ich werde wahrscheinlich belästigt und beschuldigt, "Spezifikationen" zu zitieren und alle Hoffnungen zu wecken . Und für mich bin ich gespannt, wie hier mit nicht numerischem Text umgegangen wird.
BoltClock
3
Ich stimme zwar zu, dass dies schön wäre, aber die Nummer ist in eine ansonsten lokalisierte Seite eingebettet. Das heißt, der Rest der Seite ist Englisch, Chinesisch oder eine andere Sprache, und die Zahlen sollten IMO dieser Lokalisierung entsprechen. Warum sollten sie getrennt vom Rest der Seite lokalisiert werden ...?
Täuschung
@deceze: Du hast recht. Es sollte möglich sein, "Lokalisierungs-CSS" zu haben
Don
1
Hinzufügen der JS-Option mit Intl.NumberFormat mdn-ref:
Joshua Baboo

Antworten:

23

Nun, für alle Zahlen in Javascript verwende ich die nächste:

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

und wenn Sie ein anderes Trennzeichen als Komma verwenden müssen, zum Beispiel:

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

oder als Funktion:

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;
}
Anton Y. Reuchenko
quelle
1
Vielen Dank. Keine reine CSS-Lösung, erledigt aber die Aufgabe!
Don
Ich mag das. Aber ich musste die Zahl vor dem Ersetzen auch in eine Zeichenfolge konvertieren. Sie können eine Nummer nicht ersetzen.
Mardok
Bevor _number.replacewir aufrufen, müssen wir sicherstellen, dass es sich um eine Zeichenfolge wie diese handelt. _number = typeof _number != "undefined" && _number > 0 ? String(_number) : "";_number.replace
Andernfalls
3
Warum nicht einfach verwenden: (123456789) .toLocaleString ('en-GB') oder ähnliches?
Joehannes
16

Der wahrscheinlich beste Weg, dies zu tun, besteht darin, einen Bereich mit einer Klasse festzulegen, die Ihre Formatierung angibt, und dann Jquery .each zu verwenden, um die Bereiche zu formatieren, wenn das DOM geladen wird ...

Ross
quelle
9

Nein, Sie müssen Javascript verwenden, sobald es sich im DOM befindet, oder es über die Seite Ihres Sprachservers formatieren (PHP / Ruby / Python usw.).

mreq
quelle
5
Das Format von Zahlen ist eine inhaltliche Angelegenheit, wie der Text des Inhalts oder andere Notationsprobleme (z. B. Datumsnotationen, die sprachabhängig sind). Das Formatieren von Zahlen ist also eine Lokalisierung und sollte beim Generieren von Inhalten behandelt werden. Dies in JavaScript zu tun, ist für den Teil des Inhalts sinnvoll, der von JavaScript generiert wird.
Jukka K. Korpela
Dem stimme ich voll und ganz zu. Deshalb habe ich es in meiner Antwort geschrieben. Hätte wahrscheinlich mehr Stress darauf legen sollen.
Mreq
Es kann entweder Inhalt oder Präsentation sein. Nehmen Sie CSS rtl, das denselben Inhalt auf unterschiedliche Weise anzeigt: Sollte er auch serverseitig behandelt werden?
Don
6

Keine Antwort, aber vielleicht von Interesse. Ich habe vor einigen Jahren einen Vorschlag an die CSS WG gesendet. Es ist jedoch nichts passiert. Wenn sie (und Browser-Anbieter) dies tatsächlich als echtes Entwicklerproblem ansehen würden, könnte der Ball vielleicht ins Rollen kommen?

itpastorn
quelle
2
Vielen Dank für Ihren Beitrag. Ich hoffe, eines Tages fängt es an.
ADJenks
4

Wenn es hilft ...

Ich benutze die PHP-Funktion number_format()und den Narrow No-Break Space (  ). Es wird oft als eindeutiger Tausendertrenner verwendet.

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

Da IE8 einige Probleme beim Rendern des Narrow No-Break Space hat, habe ich ihn für ein SPAN geändert

echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";
.number SPAN{
    padding: 0 1px; 
}
DanielBlazquez
quelle
Leider ist dies serverseitig, es gibt einen leichten CPU-Treffer, wir benötigen eine HTML / CSS-Bearbeitungsmaskenfunktion. Dressing und Rendering sollten clientseitig sein, es sei denn, wir liefern ein PDF?
McKenzm
2

Sie können CSS für diesen Zweck nicht verwenden. Ich empfehle die Verwendung von JavaScript, falls zutreffend. Weitere Informationen finden Sie hier: JavaScript entspricht printf / string.format

Wie Petr bereits erwähnt hat, können Sie es serverseitig handhaben, aber es hängt völlig von Ihrem Szenario ab.

Qorbani
quelle
2

Ich glaube nicht, dass du kannst. Sie können number_format () verwenden, wenn Sie in PHP codieren. Andere Programmiersprachen haben auch eine Funktion zum Formatieren von Zahlen.

Florin Frătică
quelle
BAD Praxis, Daten für Anzeigezwecke im "Backend" zu ändern.
Buffalo
1

Sie können die Jstl-Tag-Bibliothek zum Formatieren von JSP-Seiten verwenden

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>

Ergebnis

Formatierte Nummer (1): £ 120.000,23

Formatierte Nummer (2): 000.231

Formatierte Nummer (3): 120.000,231

Formatierte Nummer (4): 120000.231

Formatierte Zahl (5): 023%

Formatierte Nummer (6): 12.000.023,0900000000%

Formatierte Zahl (7): 023%

Formatierte Nummer (8): 120E3

Mohammad Javed
quelle