टेक्स्ट की चौड़ाई कैसे मापी जाती है?

टेक्स्ट की चौड़ाई से तात्पर्य क्षैतिज पिक्सेल स्पेस से है जो किसी विशिष्ट फ़ॉन्ट, आकार और वजन के साथ प्रस्तुत किए गए वर्णों की एक स्ट्रिंग द्वारा कब्जा किया जाता है। वर्ण गणना के विपरीत, पिक्सेल चौड़ाई प्रत्येक ग्लिफ़ की आनुपातिक रिक्ति पर निर्भर करती है — अधिकांश फ़ॉन्ट में "W" अक्षर "i" से बहुत अधिक चौड़ा है। UI लेआउट, लेबल ट्रंकेशन, गतिशील कैनवास रेंडरिंग और स्ट्रिंग को निश्चित-चौड़ाई वाले कंटेनर में फिट करने के लिए टेक्स्ट की चौड़ाई को सटीक रूप से मापना महत्वपूर्ण है।

ब्राउज़र HTML5 Canvas API की measureText() विधि को उजागर करते हैं, जो स्क्रीन पर प्रदर्शित किए बिना प्रस्तुत टेक्स्ट की चौड़ाई की गणना करती है। एक ऑफ़स्क्रीन कैनवास संदर्भ में ड्राइंग करके, किसी भी फ़ॉन्ट परिवार, आकार और वजन के संयोजन के लिए एक सटीक सब-पिक्सेल माप प्राप्त किया जा सकता है।

टूल विवरण

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

विशेषताएं

  • सभी वेब-सुरक्षित सिस्टम फ़ॉन्ट और कस्टम अपलोड की गई फ़ॉन्ट फ़ाइलों (TTF, OTF, WOFF, WOFF2) का समर्थन करता है
  • अंतर और अनुपात आंकड़ों के साथ एक बार में दो स्ट्रिंग की तुलना करें
  • 1 से 256 px तक समायोज्य फ़ॉन्ट आकार और सभी नौ मानक फ़ॉन्ट वजन मान

यह कैसे काम करता है

चौड़ाई को ब्राउज़र की CanvasRenderingContext2D.measureText() API का उपयोग करके मापा जाता है। एक ऑफ़स्क्रीन <canvas> तत्व बनाया जाता है, इसके 2D संदर्भ फ़ॉन्ट प्रॉपर्टी को चयनित परिवार, आकार और वजन से मेल खाने के लिए सेट किया जाता है, और measureText() पिक्सेल में बाउंडिंग बॉक्स की चौड़ाई लौटाता है। कस्टम फ़ॉन्ट को माप से पहले ब्राउज़र की FontFace रजिस्ट्री में लोड किया जाता है ताकि परिणाम वास्तविक टाइपफेस को प्रतिबिंबित करें।