* वर्णों में चौड़ाई निर्दिष्ट करें *

108

एक निश्चित चौड़ाई के फ़ॉन्ट का उपयोग करते समय , मैं वर्णों में HTML तत्व की चौड़ाई निर्दिष्ट करना चाहूंगा ।

"एम" इकाई को एम चरित्र की चौड़ाई माना जाता है, इसलिए मुझे इसका उपयोग चौड़ाई निर्दिष्ट करने में सक्षम होना चाहिए। यह एक उदाहरण है:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

परिणाम वह नहीं है जो मैं चाहता था क्योंकि कॉलम 15 के बाद ब्राउज़र लाइन टूटती है, 10 नहीं:

1 3 5 7 9 1 3 5
7 9 1

(Ubuntu में दोनों फ़ायरफ़ॉक्स और क्रोमियम में परिणाम।)

विकिपीडिया के लेख में कहा गया है कि एक "em" हमेशा M की चौड़ाई नहीं होती है, इसलिए यह निश्चित रूप से ऐसा लगता है कि "em" इकाई को इस पर भरोसा नहीं किया जा सकता है।

css font-size

— मार्टिन विलकंस
स्रोत

मेरा मानना है कि "एन" एक कानूनी चौड़ाई भी है; यह टाइपोग्राफी में एक अंक की चौड़ाई है। वह आपके लिए बेहतर काम कर सकता है ।

— पेटे विल्सन

'एम' संपत्ति फ़ॉन्ट के आकार, या ऊंचाई , अक्षरों की चौड़ाई का उपयोग करती है। @ टिप्पणी: यह नहीं है, सीएसएस मूल्यों और इकाइयों मॉड्यूल स्तर 3 देखें ।

— animuson

जब तक आप एक निश्चित-चौड़ाई वाले फ़ॉन्ट का उपयोग नहीं कर रहे हैं, तब तक विभिन्न वर्णों की अलग-अलग चौड़ाई होती है। इसलिए दिखाए गए पात्रों की संख्या के संदर्भ में चौड़ाई निर्धारित करना कार्यात्मक रूप से असंभव है।

— एमिली

मोनोपेस फॉन्ट में अक्षरों की निरंतर संख्या को फिट करने के लिए <div> की चौड़ाई सेट करने के लिए

— मार्टिन विलकंस

"इस सवाल को अभी भी अन्य उपयोगकर्ताओं से 4 वोट (ओं) को बंद करने की आवश्यकता है" - अरे, यह मेरा सवाल है! मुझे इसे बंद करने दो!

— मार्टिन विलकंस

जवाबों:

1em चौड़ाई की बजाय M की ऊँचाई है। वही पूर्व के लिए धारण करता है, जो एक एक्स की ऊंचाई है। अधिक आम तौर पर बोलना, ये अपरकेस और लोअरकेस अक्षरों की ऊंचाइयां हैं।

चौड़ाई एक बिल्कुल अलग मुद्दा है ...।

ऊपर अपना उदाहरण बदलें

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

और आप देखेंगे कि अवधि की चौड़ाई और ऊंचाई अलग-अलग हैं। क्रोम पर 20px के फ़ॉन्ट-आकार के लिए, अवधि 12x22 px है, जहां 20px फ़ॉन्ट की ऊंचाई है, और 2px लाइन की ऊँचाई के लिए हैं।

अब चूंकि em और ex का कोई उपयोग नहीं है, इसलिए CSS-only समाधान के लिए एक संभावित रणनीति होगी

एक तत्व बनाएं जिसमें सिर्फ एक & nbsp;
इसे अपने आप में निरूपित करें
अपने div को रखें और
इसे आसपास के तत्व के रूप में 10 गुना बड़ा करें।

हालाँकि मैंने इसे कोड करने का प्रबंधन नहीं किया था। मुझे यह भी संदेह है कि यह वास्तव में संभव है।

हालांकि जावास्क्रिप्ट में एक ही तर्क लागू किया जा सकता है। मैं यहाँ सर्वव्यापी jQuery का उपयोग कर रहा हूँ:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

गोलाई की समस्याओं को संभालने के लिए +1 इन (w * 10 + 1) है।

— गर्ड रिसेलमैन
स्रोत

मैं एक शुद्ध सीएसएस समाधान की उम्मीद कर रहा था, जो केवल तभी संभव है जब आप किसी चरित्र की ऊंचाई और चौड़ाई के बीच का अनुपात जानते हैं (देखें stackoverflow.com/questions/1255281/… )। मैं इसे उत्तर के रूप में स्वीकार कर रहा हूं क्योंकि यह एक मजबूत समाधान है।

— मार्टिन विलकंस

1em यहाँ उत्तर के अनुसार M की ऊँचाई नहीं है, जैसा कि Graphicdesign.stackexchange.com/questions/4035/… "द" | चरित्र 1em के करीब होना चाहिए।

— सोगार्टार

Sogartar, स्पष्टीकरण के लिए: टाइपोग्राफी में उचित 1 em वास्तव में एक निश्चित-चौड़ाई वाले चरित्र की चौड़ाई (साथ ही साथ ऊँचाई) है। हालाँकि, यह "टाइपोग्राफी उचित" है और हमारे पास कई फ्लाई-बाय-नाइट लोग हैं, जो फॉन्ट फाइलें बनाते हैं जो टाइपोग्राफिक नियमों का पालन नहीं करते हैं - विशेष रूप से वेब फोंट के मामले में। यहाँ मेरी टिप्पणी का मुद्दा (केवल) घुमक्कड़ भव्यता नहीं है। मेरी बात है: परीक्षण, परीक्षण, परीक्षण (और फिर कुछ और परीक्षण करें।)

— 21

217

`ch` इकाई

जिस इकाई के लिए आप देख रहे हैं वह है ch। MDN डॉक्स के अनुसार :

ch: तत्व में ग्लिफ़ "0" (शून्य, यूनिकोड वर्ण U + 0030) की चौड़ाई, या अधिक सटीक रूप से अग्रिम माप का प्रतिनिधित्व करता है font।

यह प्रमुख ब्राउज़रों के वर्तमान संस्करणों ( कैनीयूज़ ) में समर्थित है ।

उदाहरण

pre {
    width: 80ch; /* classic terminal width for code sections */
}

— transistor09
स्रोत

विकिपीडिया के स्थान (विराम चिह्न) लेख में बताए अनुसार आंकड़ा स्थान भी है , जो "एक अंक की चौड़ाई के बराबर" ठीक है । यह यूनिकोड मान U + 2007 है और इसे HTML का उपयोग करके या में दर्ज किया जा सकता है । यह कार्यात्मक रूप से CSS की इकाई के बराबर है , लेकिन जब इसका व्यापक रूप से समर्थन नहीं किया जाता है, तो इसे HTML में वर्कअराउंड के रूप में इस्तेमाल किया जा सकता है (बदसूरत हैक, लेकिन काम करना चाहिए)।   ch

— वॉलीड्रिल

दरअसल, क्रोमियम के इस मुद्दे के अनुसार , क्रोम v27 के बाद से इसका समर्थन करता है, इसलिए अभी सभी प्रमुख ब्राउज़रों के नवीनतम संस्करण (IE, क्रोम और फ़ायरफ़ॉक्स) ch यूनिट का समर्थन करते हैं :)

— waldyrious

ध्यान रखना चाहिए कि तत्व का आकार तत्व के फ़ॉन्ट में ग्लिफ़ '0' का आकार है। यदि आप 'm' या 'w' जैसे बड़े वर्णों की अपेक्षा करते हैं, तो आप आवश्यकतानुसार विस्तार करने पर विचार कर सकते हैं या आवश्यकतानुसार विस्तार कर सकते हैं (जैसे stackoverflow.com/questions/7168727/… )

— user420667

हां, मोनोस्पेस वाले फोंट के साथ कोई समस्या नहीं है।

— विलेग

IE11 इसका गलत समर्थन करता है। stackoverflow.com/questions/17825638/…

— aleha

* वर्णों में चौड़ाई निर्दिष्ट करें *

ch इकाई

उदाहरण

`ch` इकाई