ब्राउज़र के फ़ॉन्ट में प्रत्येक वर्ण के लिए रिक्स्ड पिक्सेल चौड़ाई डेटा

Question

मेरे पास एक टेबल कॉलम है जिसे एक निश्चित चौड़ाई तक सीमित करने की आवश्यकता है - 100 पिक्सल कहें। कभी-कभी उस कॉलम में टेक्स्ट इस से बड़ा होता है और इसमें कोई रिक्त स्थान नहीं होता है। उदाहरण के लिए:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy 

मैं पाठ सर्वर साइड की चौड़ाई की गणना और पात्रों की सही संख्या के बाद एक अंडाकार जोड़ना चाहते हैं। समस्या यह है कि मेरे पास पाठ के प्रस्तुत आकार के बारे में डेटा नहीं है।

उदाहरण के लिए, ब्राउज़र को फ़ायरफ़ॉक्स 3 मानते हुए और फ़ॉन्ट 12px एरियल था। अक्षर "ए" की चौड़ाई, अक्षर "बी" की चौड़ाई, आदि क्या होगी?

क्या आपके पास प्रत्येक वर्ण की पिक्सेल चौड़ाई दिखाने वाला डेटा है? या इसे उत्पन्न करने के लिए एक कार्यक्रम?

मुझे लगता है कि एक चालाक एक बार जावास्क्रिप्ट स्क्रिप्ट चाल कर सकती है। लेकिन अगर मैं किसी और ने पहले ही ऐसा किया है तो मैं पहिया को दोबारा खोजना नहीं चाहता हूं। मैं निश्चित रूप से इस समस्या के खिलाफ आने वाला पहला व्यक्ति नहीं हूं।

Answer 1

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

निश्चित चौड़ाई का उपयोग करना आम तौर पर एक बुरा विचार है।

Answer 2

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

ऐसा करें:

table-layout: fixed; 

कि यकीन है कि तालिका आकार आपके द्वारा निर्दिष्ट की तुलना में बड़ा नहीं है बनाती हूँ।

Answer 3

ओवरफ्लो के बारे में कैसे: स्क्रॉल करें?

Answer 4

सर्वर पक्ष पर यह अनिवार्य रूप से असंभव है। अलग-अलग फोंट स्थापित करने वाले लोगों की समस्या के अलावा, आपके पास कर्नाई भी है (पत्र "एफ" इसके आगे क्या है इसके आधार पर एक अलग मात्रा में स्थान लेगा) और फ़ॉन्ट प्रतिपादन विकल्प (क्लीयरटाइप चालू है? "बड़े फ़ॉन्ट्स "?)।

Answer 5

आप टेक्स्ट को अदृश्य अवधि में डाल सकते हैं और उस चौड़ाई को पढ़ सकते हैं, लेकिन मूल रूप से ऐसा लगता है कि कोई आपकी साइट को तोड़ने की कोशिश कर रहा है, और इसलिए मैं निश्चित दसवें से अधिक शब्दों के साथ पोस्ट पर प्रतिबंध लगाने की सिफारिश करता हूं, उदाहरण के लिए 30 वर्ण (! लिंक अब होने के लिए अनुमति देता है -) रिक्तियों के बिना

- लेकिन सरल दृष्टिकोण टेबल सेल के अंदर एक ब्लॉक तत्व डाल करने के लिए है:

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td> 

यह प्रभावी रूप से टेबल अव्यवस्था बंद हो जाएगा! ओ]

Answer 6

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

Answer 7

Ext JS सिर्फ इतना है कि

TextMetrics प्रदान करता है पाठ के ब्लॉक के लिए सटीक पिक्सेल माप ताकि आप वास्तव में कैसे उच्च और व्यापक, पिक्सेल में , एक पाठ के दिए गए ब्लॉक निर्धारित कर सकते हैं करने के लिए एक मॉड्यूल है होगा।

मुझे यकीन है कि वहां अन्य पुस्तकालय भी उपलब्ध हैं जो इसे भी करते हैं।

Answer 8

यहां मेरे क्लाइंट-साइड समाधान है जो मैं आया था। यह मेरे आवेदन के लिए बहुत विशिष्ट है, लेकिन अगर कोई अन्य समस्या एक ही समस्या में आता है तो मैं इसे यहां साझा कर रहा हूं।

यह अपेक्षा की तुलना में थोड़ा अधिक तेज़ी से काम करता है। और यह मानता है कि कोशिकाओं की सामग्री केवल पाठ है - किसी भी HTML स्वरूपण को छोटा करने की प्रक्रिया में मिटा दिया जाएगा।

इसे jQuery की आवश्यकता है।

function fixFatColumns() { 
    $('table#MyTable td').each(function() { 
    var defined_width = $(this).attr('width'); 
    if (defined_width) { 
     var actual_width = $(this).width(); 
     var contents = $(this).html(); 
     if (contents.length) { 
     var working_div = $('#ATempDiv'); 
     if (working_div.is('*')) { 
      working_div.html(contents); 
     } else { 
      $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>'); 
      working_div = $('#ATempDiv'); 
     } 

     if (working_div.width() > defined_width) { 
      contents = working_div.text(); 
      working_div.text(contents); 
      while (working_div.width() + 8 > defined_width) { 
      // shorten the contents of the columns 
      var working_text = working_div.text(); 
      if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1); 
      working_div.text(working_text); 
      } 
      $(this).html(working_text+'...') 
     } 

     working_div.empty(); 
     } 

    } 
    }); 

} 

Answer 9

यदि आप फ़ायरफ़ॉक्स के लिए काम नहीं कर रहे हैं, तो बस सीएसएस का उपयोग क्यों न करें? तालिका-लेआउट के साथ तालिका रखें: निश्चित, प्रश्न में कॉलम ओवरफ़्लो है: छुपा; टेक्स्ट-ओवरफ़्लो: इलिप्सिस; white-space: nowrap।

Answer 10

http://www.css3.info/preview/text-overflow/ 

यह सीएसएस 3 का एक नया कार्य है।

Answer 11

कुछ उपयोगकर्ताओं के पास बड़ी या छोटी डिफ़ॉल्ट फ़ॉन्ट सेटिंग्स हैं। आप सर्वर पर ऐसा नहीं कर सकते हैं। ब्राउजर ने पृष्ठ प्रस्तुत करने के बाद ही इसे माप सकते हैं।

Answer 12

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

एक त्वरित ग्राहक के पक्ष ठीक एक अतिप्रवाह विशेषता के साथ अपने कोशिकाओं शैली होगा:

td 
{ 
    overflow: scroll; /* or overflow: hidden; etc. */ 
} 

एक बेहतर विकल्प अपने तार सर्वर साइड काटना और एक साधारण जावास्क्रिप्ट टूलटिप कि लंबे समय तक संस्करण प्रदर्शित कर सकते हैं प्रदान करना है। एक "विस्तार" बटन भी मदद कर सकता है जो परिणाम को ओवरले div में प्रदर्शित कर सकता है।

Answer 13

आप क्या चाहते हैं <wbr> टैग। यह एक विशेष HTML टैग है जो ब्राउज़र को बताता है कि यदि एक रैप आवश्यक है तो यहां एक शब्द तोड़ना स्वीकार्य है। मैं निरंतर भंडारण के लिए पाठ में इंजेक्ट नहीं करता क्योंकि तब आप अपना डेटा जोड़ रहे हैं कि आप उस डेटा को कहां/कैसे प्रदर्शित करेंगे। हालांकि, टैग सर्वर सर्वर को उस कोड में इंजेक्ट करने के लिए पूरी तरह से स्वीकार्य है जो व्यू-केंद्रित है (जैसे जेएसपी टैग या संभवतः नियंत्रक में)। इस तरह मैं इसे करूँगा। एक्स अक्षरों से अधिक शब्द खोजने के लिए बस कुछ नियमित अभिव्यक्ति का उपयोग करें और इस टैग को प्रत्येक एक्स अक्षरों को ऐसे शब्दों में इंजेक्ट करें।

अद्यतन: मैं कुछ देख रहा था और ऐसा लगता है कि सभी ब्राउज़रों पर wbr समर्थित नहीं है। सबसे विशेष रूप से, आईई 8। हालांकि मैंने खुद का परीक्षण नहीं किया है। शायद आप ओवरफ्लो का उपयोग कर सकते हैं: बैकअप के रूप में छिपा हुआ या ऐसा कुछ।