विधवाओं से बचने के लिए जावास्क्रिप्ट

Question

एचटीएमएल/सीएसएस में टाइपोग्राफी के साथ काम करते समय एक आम समस्या है जिसे हम स्वीडिश में "horunge" कहते हैं (अंग्रेजी में widow ")।

यह क्या है:

मान लीजिए कि आप 200px की चौड़ाई के साथ और पाठ के साथ "मैं typograpy प्यार बहुत ज्यादा" एक बॉक्स करते हैं। अब पाठ टूट जाता है और हो जाता है:

मैं टाइपोग्राफी बहुत
ज्यादा

एक डिजाइनर मैं एक शब्द भी कमीने (एक शब्द/पंक्ति) नहीं करना चाहती के रूप में प्यार करता हूँ। इस एक दस्तावेज/पीडीएफ आदि था, तो मैं बहुत पहले शब्द तोड़ने के लिए और इस तरह दिखेगा:

मैं टाइपोग्राफी
बहुत

प्यार जो ज्यादा बेहतर लग रहा है।

क्या मैं इसे एक सीएसएस नियम या जावास्क्रिप्ट के साथ हल कर सकता हूं? नियम किसी पंक्ति पर एक शब्द को खाली नहीं होने देना चाहिए।

मैं जानता हूँ कि यह एक <br /> जोड़कर हल किया जा सकता, लेकिन यह एक समाधान है कि गतिशील चौड़ाई, फ़ीड सामग्री, अलग अनुवाद, ब्राउज़र फ़ॉन्ट प्रतिपादन मुद्दों आदि

अद्यतन (समाधान) मैं हल के साथ काम करता है इस jquery प्लगइन के साथ मेरी समस्या: http://matthewlein.com/widowfix/

Answer 1

सीएसएस विधवाएं और अनाथ गुण भी हैं: about.com article देखें।

नहीं

ब्राउज़र समर्थन के बारे में निश्चित ...

संपादित करें: https://bugs.webkit.org/buglist.cgi?quicksearch=orphans: वेबकिट कार्यान्वयन के बारे में अधिक जानकारी।

Answer 2

मैंने लाइन ऊंचाई खोजने के लिए this function की सहायता से थोड़ा script here बनाया है।

यह सिर्फ एक दृष्टिकोण है, यह काम कर सकता है या नहीं भी हो सकता है, उसके पास परीक्षण करने का समय नहीं था।

अभी तक, text_element एक jQuery ऑब्जेक्ट होना चाहिए।

function avoidBastardWord(text_element) 
{ 
    var string = text_element.text(); 
    var parent = text_element.parent(); 
    var parent_width = parent.width(); 
    var parent_height = parent.height(); 

    // determine how many lines the text is split into 
    var lines = parent_height/getLineHeight(text_element.parent()[0]); 

    // if the text element width is less than the parent width, 
    // there may be a widow 
    if (text_element.width() < parent_width) 
    { 
     // find the last word of the entire text 
     var last_word = text_element.text().split(' ').pop(); 

     // remove it from our text, creating a temporary string 
     var temp_string = string.substring(0, string.length - last_word.length - 1); 

     // set the new one-word-less text string into our element 
     text_element.text(temp_string); 

     // check lines again with this new text with one word less 
     var new_lines = parent.height()/getLineHeight(text_element.parent()[0]); 

     // if now there are less lines, it means that word was a widow 
     if (new_lines != lines) 
     { 
      // separate each word 
      temp_string = string.split(' '); 

      // put a space before the second word from the last 
      // (the one before the widow word) 
      temp_string[ temp_string.length - 2 ] = '<br>' + temp_string[ temp_string.length - 2 ] ; 

      // recreate the string again 
      temp_string = temp_string.join(' '); 

      // our element html becomes the string 
      text_element.html(temp_string); 
     } 
     else 
     { 
      // put back the original text into the element 
      text_element.text(string); 
     } 

    } 

} 

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

मैं कुछ प्रतिक्रिया सुनना और सुधार करना चाहता हूं क्योंकि मुझे लगता है कि यह किसी भी तरह से काम में आ सकता है।

बस इसके साथ खेलें! :)

Answer 3

मैन्युअल, आप  

साथ के बीच रिक्त स्थानों की जगह सकता है मैं गतिशील में इसे जोड़ने के लिए तरीकों की तलाश कर रहे थे।मैंने कुछ पाया, लेकिन यह खुद को काम करने में सक्षम नहीं है।

Answer 4

एक साधारण jQuery/regrex समाधान निम्न जैसा दिख सकता है, यदि आप किसी भी तत्व के टैग में "नोविड्व" श्रेणी जोड़ते हैं जिसमें टेक्स्ट है जिसके बारे में आप चिंतित हैं।

जैसे:

<p class="noWidows">This is a very important body of text.</p> 

और फिर इस स्क्रिप्ट का उपयोग:

$('.noWidows').each(function(i,d){ 
    $(d).html($(d).text().replace(/\s(?=[^\s]*$)/g, " ")) 
}); 

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

Answer 5

बस इस पृष्ठ में जोड़ना चाहता था क्योंकि इससे मुझे बहुत मदद मिली।

यदि आपके पास (विधवाएं) वास्तव में अनाथ होनी चाहिए क्योंकि विधवाएं एक ही शब्द हैं जो अगले पृष्ठ पर उतरती हैं और एक नई पंक्ति पर एकल शब्द नहीं होती हैं।

"एन 12 5 जीजी" जैसे पोस्टकोड के साथ काम करने के परिणामस्वरूप पूर्ण पोस्टकोड एक नई लाइन पर हो रहा है लेकिन अभी भी एक अनाथ के रूप में वर्गीकृत किया गया है, इसलिए यह एक काम है। (कक्षा बदल "noWidow2" तो तुम दोनों संस्करणों का उपयोग कर सकते है।

123 Some_road, Some_town, N12 5GG

$('.noWidows2').each(function(i,d){ 
    var value=" " 
    $(d).html($(d).text().replace(/\s(?=[^\s]*$)/g, value).replace(/\s(?=[^\s]*$)/g, value)); 
}); 

यह परिणाम होगा एक नई लाइन एक साथ बनाने के लिए किया जा रहा है पिछले 3 सफेद रिक्त स्थान है पोस्टकोड मुद्दा काम करते हैं।

अंत परिणाम

123 Some_road, 
Some_town, N12 5GG 

Answer 6

$('span').each(function() { 
 
    var w = this.textContent.split(" "); 
 
    if (w.length > 1) { 
 
    w[w.length - 2] += " " + w[w.length - 1]; 
 
    w.pop(); 
 
    this.innerHTML = (w.join(" ")); 
 
    } 
 
});

#foo { 
 
    width: 124px; 
 
    border: 1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo"> 
 
    <span class="orphan">hello there I am a string really really long, I wonder how many lines I have</span> 
 
</div>