Вдова / сиротский контроль с помощью JavaScript? - PullRequest
Новая
       12

Вдова / сиротский контроль с помощью JavaScript?

6 голосов
/ 20 января 2011

Может быть библиотечно-зависимым или -агностическим. Я просто хочу знать, существует ли сценарий, который будет анализировать страницу (или, возможно, определенные узлы, которые он дал) и ... "защищать" от вдов и сирот в тексте.

Что значит "защищать"? Я не знаю. Я подумывал посмотреть, смогу ли я придумать один сам, но отчасти проблема в том, что я даже не уверен, как мне поступить.

Уточнение : Это будет для экранной версии сайта, а не для печати. ​​

Ответы [ 7 ]

5 голосов
/ 27 октября 2015

Я недавно столкнулся с этой проблемой в своем угловом приложении и использовал регулярное выражение, которое я нашел в этом посте , чтобы добавить неразрывный пробел перед последним словом:

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

Но angular печатал неразрывный пробел в виде строки, поэтому я использовал Unicode, и он отлично работал:
String.replace(/\s([^\s<]+)\s*$/,'\u00A0$1');

4 голосов
/ 14 мая 2014

Adobe активизировалась и решила, что это серьезная проблема в Интернете.Они выдвинули предложение помочь исправить вдов / сирот и другие проблемы с типографикой, уравновешивающие текст.

Репозиторий для их плагина jQuery находится здесь: https://github.com/adobe-webplatform/balance-text

Предложение для w3c здесь: http://adobe -webplatform.github.io / balance-text / offer / index.html

4 голосов
/ 09 февраля 2011

Я полагаю, вы описываете типографских вдов в HTML-документе? Где, например, одиночное слово переносится на новую строку в заголовке?

Плагин jQuery Wid't просматривает ваш HTML-код и помещает неразрывный пробел между вторым и последним словами, чтобы по крайней мере два слова переносились на новую строку.

Надеюсь, это поможет, Карл

2 голосов
/ 28 февраля 2014

Существует плагин под названием widowfix , который немного более настраиваем, чем принятый ответ. 

$('h1').widowFix({
    letterLimit: 10,
    prevLimit: 5,
    linkFix: true 
});
0 голосов
/ 25 июня 2018

Вот решение JQuery, которое не форматирует весь HTML.Он использует только текстовые узлы (тип узла 3) из дерева узлов DOM.Это полезно, когда вы не хотите терять функциональность таких элементов, как HTTP-адреса или ссылки электронной почты (тип узла 1), которые могут быть в вашей копии.Приведенные выше решения форматируют текст таким образом, что они отбирают все из HTML, чтобы восстановить его заново. 

$(".no-widows").each(function () {
    const parent = $(this);
    const textNode = parent.contents().filter(function () {return this.nodeType === 3;}).last();
    const text = textNode.text().trim();
    const lastSpace = text.lastIndexOf(" ");
    const newText = text.substr(0, lastSpace) + "&nbsp;" + text.substr(lastSpace+1);
    textNode.replaceWith(newText);
  });
0 голосов
/ 14 марта 2016

Ванильное решение JavaScript, изначально опубликованное на CSS Tricks : 

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( ' ' );
}
0 голосов
/ 09 февраля 2015 

$('span').each(function() {
  var w = this.textContent.split(" ");
  if (w.length > 1) {
    w[w.length - 2] += "&nbsp;" + 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>
...