Widow/Yetim Kontrolü JavaScript ile mi?

Question

Bu kütüphane bağımlı veya -agnostic olabilir. Ben sadece bir komut dosyası (o verilmiş ya da belki bazı düğümleri) sayfanızı analiz ... Metinde dul ve yetimlere karşı "koruma" anlamına varsa bilmek istiyorum.

Ne "korumak" ne anlama gelir? Bilmiyorum. Kendimle bir araya gelip gelemeyeceğimi düşünürdüm, ama sorunun bir parçası da bunu nasıl yapacağımı bilmiyorum.

Açıklama: Bu sitenin ekran sürümü için olurdu, baskı değil.

Answer 1

Ben bir HTML belgesindeki tipografik dul açıklayan inanıyorum? Örneğin, tek bir kelime bir başlıktaki yeni bir satıra sarılırsa, örneğin?

jQuery Widon't plugin bu seyir için HTML'nizdeki geçer ve en az iki kelime yeni satıra kaydırmak sağlamak için ikinci ve geçen kelimeler arasında olmayan boşluk koyar. biraz daha yapılandırılabilir kabul edilen yanıt daha widowfix denilen eklenti vardır bu yardımcı olur

Umut Karl

Answer 2

.

$('h1').widowFix({ 
    letterLimit: 10, 
    prevLimit: 5, 
    linkFix: true 
}); 

Answer 3

Adobe hızlandırdı ve bu web üzerinde ciddi bir konudur karar verdi. Dulların/yetimlerin ve diğer metin dengeleme tipografi konularının düzeltilmesine yardımcı olacak bir öneride bulundular.

onların jQuery eklentisi için depo buradadır: https://github.com/adobe-webplatform/balance-text

W3C önerisi buradadır: http://adobe-webplatform.github.io/balance-text/proposal/index.html

Answer 4

$('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>

Answer 5

Geçenlerde de bu sorunu koştu benim açısal uygulama ve las önce bir kırılma alanı eklemek için this post bulundu bazı regex kullanılır t kelime: aslen CSS Tricks adresinde yayınlanan olarak,
String.replace(/\s([^\s<]+)\s*$/,'\u00A0$1');

Answer 6

bir vanilya JavaScript çözümü:

String.replace(/\s([^\s<]+)\s*$/,\'&nbsp\;$1');

Ama açısal yüzden Unicode kullanılan ve harika çalıştı bir dize olarak sonu olmayan boşluk baskı oldu :

var headings = document.getElementsByTagName('h1'); 
for (var i=0; i<headings.length; i++) { 
    var h1s = headings[i].innerHTML.split(' '); 
    h1s[h1s.length-2] += "&nbsp;" + h1s[h1s.length-1]; 
    h1s.pop(); 
    headings[i].innerHTML = h1s.join(' '); 
}