CSS के साथ स्वरूपण संख्या (दशमलव स्थान, हजारों विभाजक, आदि)

121

क्या सीएसएस के साथ संख्याओं को प्रारूपित करना संभव है? वह है: दशमलव स्थान, दशमलव विभाजक, हजारों विभाजक, आदि।

css number-formatting

— डॉन
स्रोत

61

आप नहीं कर सकते, लेकिन आपको वास्तव में सक्षम होना चाहिए। सब के बाद, 50,000 या 50000 या 50,000.00 सभी एक ही 'डेटा' हैं वे बस अलग तरीके से प्रस्तुत किए जाते हैं जो कि सीएसएस के लिए है।

— punkrockbuddyholly

4

@MrMisterMan: कुछ विचारों को इधर-उधर फेंक दिया जा रहा है: wiki.csswg.org/ideas/content-formatting#numbers मैं शायद परेशान हो रहा हूं और "विनिर्देशों" का हवाला देते हुए आरोप लगा रहा हूं और सभी की आशाओं पर पानी फेर रहा है। और मेरे लिए, मुझे यह जानने की उत्सुकता है कि गैर-संख्यात्मक पाठ यहाँ कैसे संभाला जाएगा।

— BoltClock

3

जबकि मैं मानता हूं कि यह होना अच्छा होगा, संख्या एक अन्यथा स्थानीयकृत पृष्ठ के अंदर एम्बेड की गई है। यानी, शेष पृष्ठ अंग्रेजी, चीनी या अन्य भाषा है, और संख्याओं को IMO को उस स्थानीयकरण के अनुरूप होना चाहिए। उन्हें शेष पृष्ठ से अलग क्यों किया जाना चाहिए ...?

— deceze

@ डिसेज़: आप सही हैं।

— डॉन

1

Intl.NumberFormat mdn-ref

— जोशुआ बाबू

12

आप उपयोग कर सकते हैं Number.prototype.toLocaleString()। यह अन्य संख्या प्रारूपों, जैसे लैटिन, अरबी, आदि के लिए भी प्रारूपित कर सकता है।

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

— CascadiaJS
स्रोत

2

सबसे आधुनिक और सुरुचिपूर्ण दृष्टिकोण, और चूंकि अभी भी सीएसएस के साथ प्राप्त करना अभी भी असंभव है, इसलिए नंबर 1 का उत्तर होना चाहिए!

— FMA

26

CSS वर्किंग ग्रुप ने 2008 में सामग्री प्रारूपण पर एक ड्राफ्ट प्रकाशित किया है। लेकिन अभी कुछ भी नया नहीं है।

— योआन
स्रोत

23

जावास्क्रिप्ट में किसी भी संख्या के लिए, मैं अगले एक का उपयोग करता हूं:

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

और यदि आपको उदाहरण के लिए कॉमा के रूप में किसी अन्य विभाजक का उपयोग करने की आवश्यकता है:

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

या एक समारोह के रूप में:

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

— एंटोन वाई। रेउचेंको
स्रोत

1

धन्यवाद। शुद्ध सीएसएस समाधान नहीं है, लेकिन कार्य करता है!

— डॉन

मुझें यह पसंद है। लेकिन मुझे प्रतिस्थापित करने से पहले संख्या को एक स्ट्रिंग में बदलने की भी आवश्यकता थी। आप एक नंबर पर एक रिप्लेसमेंट नहीं कर सकते।

— मर्दोक

कॉल करने से पहले _number.replaceहमें यह सुनिश्चित करना होगा कि यह इस तरह से एक तार है _number = typeof _number != "undefined" && _number > 0 ? String(_number) : "";या फिर आपको एक त्रुटि मिल जाएगी _number.replaceपरिभाषित नहीं है या एक फ़ंक्शन नहीं है

— शाल्कम

3

क्यों नहीं बस का उपयोग करें: (123456789) .toLocaleString ('एन-जीबी') या पसंद है?

— जोहान्स २२'१

16

संभवतः ऐसा करने का सबसे अच्छा तरीका है कि आपके फॉर्मेट को दर्शाते हुए एक वर्ग के साथ एक स्पैन सेट करने का कॉम्बो है, फिर डोम को लोड होने पर स्पैन पर फ़ॉर्मेटिंग करने के लिए Jquery .each का उपयोग करें। ...

— रॉस
स्रोत

9

नहीं, आपको डोमेन में एक बार जावास्क्रिप्ट का उपयोग करना होगा या इसे अपने भाषा सर्वर-साइड (PHP / ruby / python आदि) के माध्यम से प्रारूपित करना होगा।

— mreq
स्रोत

5

संख्याओं का प्रारूप एक सामग्री मामला है, जैसे सामग्री का पाठ या अन्य उल्लेखनीय मुद्दे (जैसे, तिथि संकेतन, जो भाषा-निर्भर हैं)। इसलिए प्रारूपण संख्या स्थानीयकरण है और सामग्री उत्पन्न होने पर इसे संभाला जाना चाहिए। जावास्क्रिप्ट में ऐसा करने से सामग्री का हिस्सा जावास्क्रिप्ट-जेनरेट होता है।

— जुक्का के। कोर्पेला

मैं इससे पूरी तरह सहमत हूं। इसलिए मैंने इसे अपने उत्तर में लिखा। शायद इस पर और अधिक तनाव डाला जाना चाहिए।

— mreq

यह सामग्री या प्रस्तुति हो सकती है। CSS लें rtl, जो एक ही सामग्री को अलग तरीके से दिखाता है: क्या इसे सर्वर-साइड भी माना जाना चाहिए?

— डॉन

6

कोई जवाब नहीं, लेकिन ब्याज के perhpas। मैंने कुछ साल पहले CSS WG को एक प्रस्ताव भेजा था। हालाँकि, ऐसा कुछ नहीं हुआ। यदि वास्तव में वे (और ब्राउज़र विक्रेता) इसे एक वास्तविक डेवलपर की चिंता के रूप में देखेंगे, तो शायद गेंद लुढ़कना शुरू हो सकती है?

— itpastorn
स्रोत

2

योगदान के लिए धन्यवाद। मुझे उम्मीद है कि एक दिन यह पकड़ लेगा।

— ADJenks

4

यदि यह मदद करता है ...

मैं PHP फंक्शन number_format()और नैरो-ब्रेक स्पेस (  ) का उपयोग करता हूं । यह अक्सर एक अस्पष्ट हजारों विभाजक के रूप में उपयोग किया जाता है।

echo number_format(200000, 0, "", "&#8239;");

क्योंकि IE8 में नैरो-ब्रेक स्पेस को रेंडर करने के लिए कुछ समस्याएं हैं, इसलिए मैंने इसे एक स्पैन के लिए बदल दिया

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

.number SPAN{
    padding: 0 1px; 
}

— DanielBlazquez
स्रोत

दुर्भाग्य से यह सर्वर साइड है, एक मामूली सीपीयू हिट है, हमें एक html / css एडिट मास्क की क्षमता चाहिए। ड्रेसिंग और रेंडरिंग क्लाइंट साइड होनी चाहिए जब तक कि हम एक पीडीएफ की सेवा नहीं कर रहे हैं?

— mckenzm

2

आप इस उद्देश्य के लिए CSS का उपयोग नहीं कर सकते। यदि यह लागू है तो मैं जावास्क्रिप्ट का उपयोग करने की सलाह देता हूं। अधिक जानकारी के लिए इसे देखें: प्रिंटफ / स्ट्रिंग.फॉर्मैट के बराबर जावास्क्रिप्ट

इसके अलावा जैसा कि पेट्र ने उल्लेख किया है कि आप इसे सर्वर-साइड पर संभाल सकते हैं लेकिन यह पूरी तरह से आपके परिदृश्य पर निर्भर करता है।

— Qorbani
स्रोत

2

मुझे नहीं लगता कि आप कर सकते हैं। यदि आप PHP में कोडिंग कर रहे हैं तो आप number_format () का उपयोग कर सकते हैं । और अन्य प्रोग्रामिंग भाषाओं में संख्याओं को प्रारूपित करने के लिए एक फ़ंक्शन होता है।

— फ्लोरिन फ्रेटिका
स्रोत

"बैकएंड" में प्रदर्शन उद्देश्यों के लिए डेटा को बदलने के लिए बीएडी अभ्यास।

— भैंस

1

आप JSP पेज के लिए प्रारूपण के लिए Jstl टैग लाइब्रेरी का उपयोग कर सकते हैं

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>

परिणाम

प्रारूपित संख्या (1): £ 120,000.23

प्रारूपित संख्या (2): 000.231

प्रारूपित संख्या (3): 120,000.231

प्रारूपित संख्या (4): 120000.231

स्वरूपित संख्या (5): 023%

प्रारूपित संख्या (6): 12,000,023.0900000000%

प्रारूपित संख्या (7): 023%

प्रारूपित संख्या (8): 120E3

— मोहम्मद जावेद
स्रोत