Есть ли способ автоматически управлять потерянными словами в HTML-документе?

Мне было интересно, есть ли способ автоматически управлять потерянными словами в файле HTML, возможно, используя CSS и/или Javascript (или что-то еще, если у кого есть альтернативное предложение).

Под "сиротскими словами" подразумеваются слова, которые появляются на новой строке в конце абзаца. Например:

"This paragraph ends with an undesirable orphaned
word."

Вместо этого было бы предпочтительнее, чтобы абзац нарушался следующим образом:

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

В то время как я знаю, что я мог бы вручную исправить это, разместив неразрывное пространство HTML ( ) между последними двумя словами, мне интересно, есть ли способ автоматизировать этот процесс, поскольку такие ручные настройки, как это, могут быстро становятся утомительными для больших блоков текста в нескольких файлах.

Кстати, свойства CSS2.1 orphans (и widows) применяются только к целым строкам текста, и даже тогда только для печати HTML-страниц (не говоря уже о том, что эти свойства в значительной степени не поддерживаются большинство основных браузеров).

Многие профессиональные приложения для компоновки страниц, такие как Adobe InDesign, могут автоматизировать удаление сирот путем автоматического добавления неразрывных пространств, где происходят сироты; есть ли какое-то эквивалентное решение для HTML?

Заранее благодарю вас за помощь!

Ответы

Ответ 1

Вы можете избежать осиротевших слов, заменив пробел между двумя последними словами в предложении с неразрывным пространством ( ).

Там есть плагины, которые делают это, например jqWidon't или этот фрагмент jquery.

Существуют также плагины для популярных фреймворков (например, typogrify для django и widon't для wordpress), что по существу делает то же самое.

Ответ 2

Используйте CSS white-space: nowrap. Я имею дело с большим количеством html-писем, поэтому я не могу использовать Javascript. Итак, что я делаю, окружает последние два или три слова (или везде, где я хочу, чтобы "break" был) в промежутке, добавьте встроенный CSS (помните, я занимаюсь электронной почтой, создаю класс по мере необходимости):

<td>This is some text that is really long and <span style="white-space: nowrap;">I don't want orphaned</span></td>

В гибкой/отзывчивой компоновке, если вы сделаете это правильно, последние несколько слов будут разбиты на вторую строку, пока не будет места для того, чтобы эти слова появлялись на одной строке.

Подробнее о свойстве white-space по этой ссылке: http://www.w3schools.com/cssref/pr_text_white-space.asp

EDIT: 12/19/2015. Поскольку это не поддерживается в Outlook, я добавляю неразрывное пространство &nbsp; между двумя последними словами в предложении. Это меньше кода и поддерживается везде.

Ответ 3

Короче говоря, нет. Это то, что заставило дизайнеров печатать сумасшедшие годами, но HTML не обеспечивает этот уровень контроля.

Если вы абсолютно уверены в этом и понимаете последствия скорости, вы можете попробовать следующее предложение:

обнаружение разрывов строк с помощью jQuery?

Это лучшее решение, которое я могу себе представить, но это не делает его хорошим решением.

Ответ 4

Если вы хотите обработать его самостоятельно, без jQuery, вы можете написать фрагмент javascript для замены текста, если вы готовы сделать пару предположений:

  • Предложение всегда заканчивается на период.
  • Вы всегда хотите заменить пробелы перед последним словом с помощью & 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>

Вы можете создать этот javascript и поместить его в конец своей страницы:

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

Регулярное выражение просто находит все экземпляры (используя флаг g) пробельного символа (\S), за которым следует любое количество символов без пробелов (\S), за которым следует период. Он создает обратную ссылку на небелое пространство, которое вы можете использовать в тексте замены.

Вы можете использовать аналогичное регулярное выражение, чтобы включить другие концевые знаки препинания.

Ответ 5

Если сторонний JavaScript является опцией, можно использовать typogr.js, реализацию JavaScript "typogrify". Этот конкретный фильтр называется, неудивительно, 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>