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

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

14 голосов
/ 13 января 2012

Мне было интересно, есть ли способ автоматически управлять осиротевшими словами в файле 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?

Ответы [ 5 ]

26 голосов
/ 13 января 2012

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

Существуют плагины, которые делают это, например jqWidnot или этот фрагмент jquery .

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

3 голосов
/ 03 апреля 2015

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

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

<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

РЕДАКТИРОВАТЬ: 19.12.2015 - Поскольку это не поддерживается в Outlook, я добавляю неразрывный пробел &nbsp;между двумя последними словами в предложении.Это меньше кода, и поддерживается везде.

РЕДАКТИРОВАТЬ: 20/20/2018 - я обнаружил, что приложение Outlook (iOS и Android) не поддерживает объект &nbsp;, поэтому я имелобъединить оба решения: например: 

<td>
    I don't <span style="white-space:nowrap;">want&nbsp;orphaned&nbsp;words.</span>
</td>
2 голосов
/ 13 января 2012

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

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

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

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

1 голос
/ 13 января 2012

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

  1. Предложение всегда заканчиваетсяточка.
  2. Вы всегда хотите заменить пробел перед последним словом на

Предполагая, что у вас есть этот html (стиль которого разрывается прямо перед словом "конец" в моем браузере...monkey с шириной, если необходимо): 

<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), за которым следует точка.Он создает обратную ссылку на непустое пространство, которое можно использовать в тексте замены.

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

0 голосов
/ 18 декабря 2017

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