Глава 8.17. Перенос строк и слов

Перенос строки

Это в первую очередь вопрос семантики тегов, но раз речь идёт о вёрстке текста, стоит поговорить про перенос строк. Иногда можно увидеть материалы, в которых переносы строк размечены тегом <br>, это категорически неправильно. У этого тега нет функции семантического переноса (о чём прямо сказано в спецификации), его задача — визуально отделить строки единого содержимого, как, например, в случае со строками в стихе или адресом. Этот тег вообще не следует использовать отдельно. И для увеличения отступов — тоже.

<!-- Тут всё нормально, это единый текст, в нём есть переносы строк --><p>Какой чудесный день, <br>какой чудесный пень, <br>какой чудесный я...</p> <!-- Два переноса — потому что красиво, когда после абзаца есть отступ. Но тут нужно было закрыть параграф и начать новый, потому что это новая мысль. --><p>...Смотри, какой прекрасный день! Птички поют, весна. Пошли гулять в парк?<br><br>И вот мы идём, гуляем, и птички поют...</p> <!-- Это разные мысли, у них разные задачи. Переносить их так — не по спецификации --><p>Написать нам письмо <br> Адрес: наб. р. Карповки,...</p>

Это хороший пример переносов тегом <br>

<blockquote> <p>Владей собой среди толпы смятенной,<br> Тебя клянущей за смятенье всех,<br> Верь сам в себя наперекор вселенной,<br> И маловерным отпусти их грех;</p> <cite>Редьярд Киплинг</cite></blockquote>

Это неправильный пример. Он напрашивается, но так переносить некорректно

<form action="#" method="POST"> <label for="name">Имя</label><br> <input type="text" id="name" placeholder="Неопознанный енот"><br> <label for="tel">Номер телефона</label><br> <input type="tel" id="tel" placeholder="[phone]"><br> <label for="email">E-mail</label><br> <input type="email" id="email" placeholder="[e-mail]"><br> <input type="submit" value="Отправить форму"></form>

Перенос слов

Как правильно организовать перенос длинных слов? Обычно в новости это не делается никак: в самой новости строка переносится по словам, предусмотреть все возможные разрешения экрана и виды страницы невозможно, проще не заниматься переносом. А вот если у вас есть узкая колонка, этот вопрос встаёт ребром.

Очень рекомендуется на пробу в элементы вставлять тексты «любого размера», то есть большие по объёму (в разы больше, чем предполагается на первый взгляд). Это позволит оценить последствия переполнений, вид фона, общую типографику.

Не рекомендуем разрешать перенос слов в ситуации переполнения текстом: нанесёт непоправимый вред смыслу.

Решение о переносе слов в ситуации большого объёма текста (новость, пост, статья…) стоит принимать, исходя из того, выравнивается текст по ширине или нет. Если выравнивается — стоит включить перенос слов, иначе пробелы между словами могут увеличиваться до некомфортного для чтения размера. Но обычно читать текст без выравнивания приятнее и удобнее, и в ситуации «рваного» правого края перенос слов не нужен.

Для узких колонок, где некоторые слова наверняка не поместятся, было бы идеально использовать CSS-свойство hyphens. Со значением auto оно использует браузерный словарь переносов и не калечит слова. Но работает свойство, если посмотреть, только в Firefox (смотрите в CanIUse; если что-то не работает в Google Chrome — считайте, бесполезно).

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

Вёрстка элемента

<p> На всех сайтах одно и то же: новости про карантин. Про то, как пережить изоляцию, как не потерять в деньгах, как не располнеть без спортзала...</p><p class="second"> Наш девиз — человеконенавистничество.</p><p> Хорошо, если вас перевели на удалёнку. Там тихо, спокойно, холодильник и неизбежно появляется немного свободного времени — хотя бы пару часов в день, сэкономленные на дороге до офиса. Их можно потратить с пользой — например, научиться создавать простые веб-странички или научиться программировать. Это хорошая основа для новой профессии, особенно если вы давно поняли, что вам надоело работать по универской специальности много лет подряд и каждый день делать одно и то же.</p><p> А могли и просто уволить, и ничего бы им за это не было.</p>.second { float: right; width: 150px; margin-left: 20px; margin-bottom: 20px; hyphens: auto; }

Тег <wbr> несовершенен: он переносит слово в выбранном вами месте, но дефис (показатель переноса) не проставляет.

Тег <wbr> перенёс слово где нужно, но в русском языке принято ставить дефис при переносе

<p class="second"> Наш девиз — человеконена<wbr>вистничество.</p>

Свойство word-break можно применить хоть ко всему сайту, но оно не учитывает грамматику, так что слова будут переноситься ровно в том месте, где слово упёрлось в границу контейнера.

Применили word-break: break-all ко всему тексту.

Здесь показана работа свойства word-break: break-all; в отношении всего текста

article { word-break: break-all;}

Существуют и другие свойства: overflow-wrap: break-word переносит части слова, только если они не помещаются в контейнер. То есть в примере про человеконенавистничество слово начнётся с новой строки, а потом уже то, что вообще в строку не поместилось, перенесётся ещё раз. К сожалению, перенесётся без дефиса и учёта грамматики.

Остаётся специальный символ-мнемоника ­&shy;: он проставляет дефис, но годится этот символ только для единичных случаев, ведь его нужно проставлять вручную.

К сожалению, раз в CSS нет универсального инструмента, то и выяснить заранее, где нужно подставить «костыль» (не самое корректное, но работающее решение) — почти невозможно. Мы предпочитаем ограничивать количество мест, где перенос вообще нужен, например, в боковых врезках.

Наш вывод: нужно либо использовать уже существующий типограф либо писать свой инструмент, который в словах длиннее, например, пятнадцати символов, будет проставлять грамматически правильные &shy;. Ещё можно вспоминать правила переносов (вот статья на Грамоте), сверяться с сайтами, которые уже сделали это для вас (по запросу «словарь переносов слов» выпадает довольно много словарей).

Если вы делаете переносы вручную — постарайтесь не переносить по две буквы, лучше членить слово, учитывая семантику.

<!-- Не обязательно делать это так. Но так — можно, достаточно грамотно и не слишком мелко «нарезано» --> <!-- *Одиннадцатиклассница получила неудовлетворительно и отправилась на водогрязеторфопарафинолечение от стресса.* --> <p>Один&shy;надцати&shy;класс&shy;ница получила неудов&shy;ле&shy;тво&shy;ри&shy;тельно и отпра&shy;вилась на водо&shy;грязе&shy;торфо&shy;парафино&shy;лечение от стресса.</p>

Замечание про рыб

В таких ситуациях почти всегда встаёт вопрос проверки. Как тестировать тот или иной элемент, объект сайта? Текст из макета обычно невелик и вряд ли это настоящий контент будущего сайта.

Для того, чтобы понять, как на самом деле будет выглядеть дизайн, нужны правдоподобные тексты: состоящие из слов разной длины, со знаками препинания. В такой ситуации зачастую пишется текст-плейсхолдер, и такие тексты называются «рыбами». Многие используют классический текст-рыбу «Lorem ipsum dolor sit amet, consectetur adipiscing elit,.», но он не подходит, когда сайт русскоязычный, потому что в русском языке по-другому работают правила типографики, другая пунктуация, кавычки, в конце концов, в русском языке больше средняя длина слов.

В «Ководстве» Артемия Лебедева довольно точно сказано про рыб и про то, что каждая студия принимает свои методы работы с ними.

Мы считаем, что по крайней мере в больших проектах было бы правильнее использовать какую-то одну рыбу, чтобы потом было просто найти все места, где она осталась после наполнения. Забытая на сайте после релиза рыба может испортить всё настроение, особенно если у вас есть привычка шутить в тестовых материалах.

 

Дополнительная теория~ 9 минут