2012-01-13 20 views
13

मैं सोच रहा था कि का कोई तरीका है या नहीं, तो HTML फ़ाइल में स्वचालित रूप से सीएसएस और/या जावास्क्रिप्ट (या किसी और के साथ, यदि कोई वैकल्पिक सुझाव है) का उपयोग करके अनाथ शब्दों को नियंत्रित करता है।क्या HTML दस्तावेज़ में अनाथ शब्दों को स्वचालित रूप से नियंत्रित करने का कोई तरीका है?

'अनाथ शब्दों' से, मेरा मतलब एकवचन शब्द है जो अनुच्छेद के अंत में एक नई पंक्ति पर दिखाई देता है। उदाहरण के लिए:

"This paragraph ends with an undesirable orphaned 
word."

इसके बजाय, यह पैराग्राफ विच्छेद राशि के लिए बेहतर होगा इस प्रकार है:

"This paragraph no longer ends with an undesirable 
orphaned word."

मुझे पता है कि मैं मैन्युअल रूप से एक HTML नॉन-ब्रेकिंग स्पेस रखकर इसे सही सकता है ( ) अंतिम दो शब्दों के बीच, मैं सोच रहा हूं कि प्रक्रिया को स्वचालित करने का कोई तरीका है, क्योंकि इस तरह के मैन्युअल समायोजन कई फ़ाइलों में टेक्स्ट के बड़े ब्लॉक के लिए जल्दी से थकाऊ हो सकते हैं।

संयोग से, CSS2.1 गुण orphans (और widows) केवल केवल HTML पृष्ठों की (नहीं मुद्रण के लिए पाठ के पूरे लाइनों के लिए लागू होते हैं, और फिर भी तथ्य यह है कि इन गुणों सबसे प्रमुख ब्राउज़रों द्वारा बड़े पैमाने पर असमर्थित हैं उल्लेख करने के लिए)।

एडोब इनडिज़ीन जैसे कई पेशेवर पेज लेआउट एप्लिकेशन, automate the removal of orphans स्वचालित रूप से गैर-ब्रेकिंग रिक्त स्थान जोड़कर अनाथ हो सकते हैं; क्या एचटीएमएल के लिए समकक्ष समाधान है?

+0

नहीं, इसे नियंत्रित करने के लिए कोई स्वचालित तरीका नहीं है। – Pointy

+2

... jQuery प्लगइन को छोड़कर @ShawnChin का उल्लेख है :-) – Pointy

+0

[जावास्क्रिप्ट के साथ विधवा/अनाथ नियंत्रण] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/4742418/widow-orphan-control-with- जावास्क्रिप्ट) – davidcondrey

उत्तर

2

संक्षेप में, नहीं। यह ऐसा कुछ है जिसने प्रिंट डिजाइनरों को वर्षों से पागल कर दिया है, लेकिन एचटीएमएल इस स्तर का नियंत्रण प्रदान नहीं करता है।

आप पूरी तरह सकारात्मक इस चाहते हैं, और गति निहितार्थ समझते हैं, तो आप सुझाव यहां की कोशिश कर सकते हैं:

detecting line-breaks with jQuery?

सबसे अच्छा समाधान मैं कल्पना कर सकते हैं कि है, लेकिन है कि यह एक अच्छा नहीं है उपाय।

26

आप एक गैर-ब्रेकिंग स्पेस ( ) के साथ वाक्य में पिछले दो शब्दों के बीच की जगह को स्थानांतरित करके अनाथाश्रित शब्दों से बच सकते हैं।

वहां प्लगइन हैं जो ऐसा करते हैं, उदाहरण के लिए jqWidon't या this jquery snippet

लोकप्रिय ढांचे के लिए प्लगइन भी हैं (जैसे typogrify django और widon't for wordpress) जो अनिवार्य रूप से वही काम करता है।

1

आप इसे अपने आप को संभाल करने के लिए, jQuery के बिना चाहते हैं, आप, पाठ बदलने के लिए एक जावास्क्रिप्ट टुकड़ा लिख ​​सकते हैं अगर आप एक जोड़ी मान्यताओं करने को तैयार हैं:

  1. एक वाक्य हमेशा एक अवधि के साथ समाप्त होता ।
  2. आप हमेशा & nbsp; के साथ अंतिम शब्द से पहले व्हाइटस्पेस को प्रतिस्थापित करना चाहते हैं;

मान लें कि आपके पास यह HTML है (जो मेरे ब्राउज़र में "अंत" से पहले तोड़ने के लिए स्टाइल है ...की जरूरत है जहां चौड़ाई के साथ बंदर):

<div id="articleText" style="width:360px;color:black; background-color:Yellow;"> 
    This is some text with one word on its own line at the end. 
    <p /> 
    This is some text with one word on its own line at the end. 
</div> 

आप इस जावास्क्रिप्ट बनाएं और उसे अपने पृष्ठ के अंत में रख सकते हैं: (g ध्वज का उपयोग कर) की

<script type="text/javascript"> 
    reformatArticleText(); 
    function reformatArticleText() 
    { 
     var div = document.getElementById("articleText"); 
     div.innerHTML = div.innerHTML.replace(/\S(\s*)\./g, "&nbsp;$1."); 
    } 
</script> 

regex बस सभी उदाहरणों पाता है एक व्हाइटस्पेस कैरेक्टर (\S) किसी भी अवधि के बाद गैर-व्हाइटस्पेस वर्णों (\s) के बाद। यह गैर-सफेद-स्थान का बैक-रेफरेंस बनाता है जिसे आप प्रतिस्थापित टेक्स्ट में उपयोग कर सकते हैं।

आप अन्य अंत विराम चिह्नों को शामिल करने के लिए एक समान रेगेक्स का उपयोग कर सकते हैं।

+0

सुझाव के लिए धन्यवाद! मुझे जावास्क्रिप्ट का सरल लालित्य पसंद है; हालांकि, मुझे आपके कोड का परीक्षण करते समय वांछित परिणाम नहीं मिल रहे हैं। मैंने निम्नलिखित लिंक पर अपना परीक्षण अपलोड किया: [http://littleblackkitten.com/orphan-test.html] ब्राउज़र अंतिम ** अक्षर ** को गैर-ब्रेकिंग स्पेस के साथ बदल रहा है, और अंतिम ** अंतरिक्ष **। क्या मुझसे कुछ गलत हो रही है? कोड का परीक्षण करते समय आपको सफल परिणाम मिलते हैं? आपकी मदद के लिए फिर से धन्यवाद! –

+1

वह रेगेक्स वास्तव में कुछ चीजों को तोड़ देगा जो एक HTML तत्व के साथ समाप्त होते हैं (उदाहरण के लिए, यदि आपके लेख के अंत में एक छवि टैग है)। आंतरिक HTML को गड़बड़ करने से रोकने के लिए इसे रेगेक्स के साथ बदलें: http://justinhileman.info/article/a-jquery-widont-snippet/ – bobthecow

+0

देखें कि जब आप इस पृष्ठ पर कंसोल में इसे चलाते हैं तो क्या होता है। 'document.body.innerHTML = document.body.innerHTML.replace (/ \ S (\ s *) \ ./ g,"   $ 1। ");' –

3

मुझे पता है कि आप जावास्क्रिप्ट समाधान चाहते थे, लेकिन अगर किसी को यह पृष्ठ एक समाधान मिला लेकिन ईमेल के लिए (जहां जावास्क्रिप्ट एक विकल्प नहीं है), तो मैंने अपना समाधान पोस्ट करने का फैसला किया।

सीएसएस white-space: nowrap का उपयोग करें। तो मैं जो करता हूं वह पिछले दो या तीन शब्दों (या जहां भी मैं "ब्रेक" होना चाहता हूं) में एक इनलाइन सीएसएस जोड़ें (याद रखें, मैं ईमेल से निपटता हूं, आवश्यकतानुसार कक्षा बना देता हूं):

<td> 
    I don't <span style="white-space: nowrap;">want orphaned words.</span> 
</td> 

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

इस लिंक पर white-space संपत्ति के बारे में के बारे में और अधिक पढ़ें: http://www.w3schools.com/cssref/pr_text_white-space.asp

संपादित करें: 2015/12/19 - चूंकि यह Outlook में समर्थित नहीं है, मैं जो नॉन-ब्रेकिंग स्पेस &nbsp; जोड़ने किया गया है एक वाक्य में पिछले दो शब्द। यह कम कोड है, और हर जगह समर्थित है।

संपादित करें: 2018/02/20 - मुझे पता चला है कि Outlook एप्लिकेशन (iOS और Android) &nbsp; इकाई का समर्थन नहीं करता, इसलिए मैं दोनों समाधान गठबंधन करने के लिए मिला है: उदाहरण के लिए:

<td> 
    I don't <span style="white-space:nowrap;">want&nbsp;orphaned&nbsp;words.</span> 
</td> 
0

यदि तृतीय-पक्ष जावास्क्रिप्ट एक विकल्प है, तो कोई एक जावास्क्रिप्ट "टाइपोग्राफी" कार्यान्वयन typogr.js का उपयोग कर सकता है। यह विशेष फ़िल्टर बुलाया जाता है, असुरक्षित रूप से, Widont।

<script src="https://cdnjs.cloudflare.com/ajax/libs/typogr/0.6.7/typogr.min.js"></script> 
<script> 
document.body.innerHTML = typogr.widont(document.body.innerHTML); 
</script> 
</body> 
संबंधित मुद्दे

 संबंधित मुद्दे