"बेस्ट फिट" फ़ॉन्ट आकार - मैं वाक्य चौड़ाई को कैसे मापूं?

Question

मैं अनुकूलित सामग्री प्रबंधन प्रणाली डिज़ाइन के साथ एक आम समस्या के खिलाफ आ रहा हूं।

मैं एक छोटी वेब डिज़ाइन कंपनी चलाता हूं और मुझे अक्सर ग्राहक के लिए संपादन योग्य वेबसाइट का एक निश्चित क्षेत्र बनाना होता है। उदाहरण के लिए, पृष्ठ के शीर्ष पर नवीनतम समाचार या सौदों का विज्ञापन करने वाला एक बार हो सकता है, जिसे ग्राहक स्वयं संपादित करने में सक्षम होना चाहता है।

मेरी समस्या यह है कि वे अक्सर बहुत अधिक लिखते हैं और टेक्स्ट ओवरफ्लो करते हैं। हो सकता है कि मैं थोड़ा बहुत रक्षात्मक हूं, लेकिन इन परिस्थितियों में मैं आम तौर पर ग्राहक को निजी रूप से दोष देता हूं - निश्चित रूप से वे पाठ को अद्यतन करने के बाद जांचते हैं, महसूस करते हैं कि यह फिट नहीं है, और इसे संशोधित करता है ताकि ऐसा हो?

वैसे भी, मुझे लगता है कि साइट को अच्छा दिखाना मेरी ज़िम्मेदारी है इसलिए मैं एक निश्चित आकार बॉक्स में टेक्स्ट फिट करने का एक तरीका ढूंढने का प्रयास कर रहा हूं। एक तरह से बॉक्स (आमतौर पर एक div) इस सीएसएस संपत्ति दे रहा है:

overflow: auto; 

लेकिन कभी कभी इस तरह के उदाहरण है, जहां बार में केवल एक ही लाइन अधिक है ऊपर वर्णित के रूप में उपयुक्त नहीं है,।

मेरा प्रश्न (हाँ मुझे अंत में मिल गया है) मैं फ़ॉन्ट परिवर्तन आकार को स्वचालित रूप से कैसे बना सकता हूं ताकि यह बॉक्स में फिट हो सके?

कुछ अनुप्रयोगों में (पावरपॉइंट एक उदाहरण है), आप फ़ॉन्ट आकार के लिए "सर्वश्रेष्ठ फिट" विकल्प चुन सकते हैं और एप्लिकेशन आकार चुनता है जो पाठ को ठीक से फिट करने की अनुमति देता है। मैं मूल रूप से या तो एक सीएसएस, जावास्क्रिप्ट या PHP संस्करण की तलाश में हूं।

अग्रिम धन्यवाद!

संपादित करें: यहाँ समाधान है - http://jsfiddle.net/Cnkfn/1/

Answer 1

मैं अपने दर्द महसूस! हमारे पास ऐसे ग्राहक भी हैं जो हमें सार तत्व देते हैं जो आवंटित क्षेत्र के लिए बहुत लंबे समय तक हैं; कुछ ग्राहकों के लिए, यह स्पष्ट रूप से अपने दिमाग को पार नहीं करता है कि उनका पाठ बहुत लंबा हो सकता है। :-)

मैं आपके मामले में क्या करूँगा कुछ ऐसा है जो स्टैक ओवरफ्लो करता है: इनपुट क्षेत्र के नीचे एक बॉक्स दिखाएं जो उनके टेक्स्ट को ऑनकीअप अपडेट करता है। एक निश्चित-ऊंचाई बॉक्स के साथ, यह उनके लिए तुरंत स्पष्ट होगा जब उनका टेक्स्ट बहुत लंबा होगा। कि के एवज में, आपको निम्न की तरह कुछ की कोशिश कर सकते:

<style> 
#outer { 
    width:100px; 
    height:40px; 
    overflow-x:hidden; 
    overflow-y:auto; /* To make it obvious the text is too long. */ 
    border:1px solid red; 
} 
#inner { 
    width:100px; 
} 
</style> 

<div id="outer"> 
    <div id="inner" style="font-size:16px"> 
    Lorem ipsum dolor sit amet, dui orci interdum sagittis, 
    proin metus dui, justo in suspendisse dolor. 
    </div> 
</div> 
<button onclick="checkFontSize()">Check font size</button> 

<script> 
function checkFontSize() { 
    var o = document.getElementById('outer'); 
    var i = document.getElementById('inner'); 
    var fs = parseInt(i.style.fontSize); 
    while(i.offsetHeight > o.offsetHeight) { 
    fs--; 
    i.style.fontSize = fs + 'px'; 
    } 
} 
</script> 

यह अगर भीतरी div की ऊंचाई बाहरी div के तुलना में अधिक है देखने के लिए जाँच करता है; यह धारणा पर काम करता है कि आंतरिक div में कोई पैडिंग नहीं है (आप आवश्यकतानुसार ट्विक कर सकते हैं)। यह आंतरिक div के फ़ॉन्ट आकार को 1px तक कम करता है जब तक कि आंतरिक div की ऊंचाई बाहरी div की तुलना में अधिक न हो।

आपके पास इस पृष्ठ पर ऐसा कोड हो सकता है जो क्लाइंट के टेक्स्ट को प्रदर्शित करता है, जिस स्थिति में आप इसे किसी अज्ञात फ़ंक्शन में लपेट सकते हैं जो ondomready निष्पादित करता है। मुझे भरोसा है कि आप इसे अपने कार्यान्वयन के अनुरूप संशोधित कर सकते हैं।

Answer 2

HTML में इस आज़माया नहीं है, लेकिन आप पाश हो सकता है और scrollHeight संपत्ति की जांच करें और देखें कि यह बड़ा आपकी अपेक्षा से है, और यदि ऐसा है तो फॉन्ट सेट एक छोटे बिंदु, और scrollHeight तक दोहराएं जो आप उम्मीद करते हैं।

https://developer.mozilla.org/en/DOM/element.scrollHeight

Answer 3

Public Function GetStringSize(ByVal Str As String, _ 
             ByVal FName As String, _ 
             ByVal FSize As Integer, _ 
             ByVal FStyle As System.Drawing.FontStyle) As System.Drawing.SizeF 

Using graphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(New System.Drawing.Bitmap(1, 1)) 
    Dim size As System.Drawing.SizeF = graphics.MeasureString(Str, New System.Drawing.Font(FName, FSize, FStyle, System.Drawing.GraphicsUnit.Pixel)) 
    Return size 
End Using 

End Function