Расстановка переносов в тексте

Оцените материал
(0 голосов)

Проблема

Дизайнеры просто обожают выравнивание текста по ширине. Взглянув на шикарно оформленный журнал или книгу, вы увидите, что этот прием используется повсеместно. Однако в Сети выравнивание по ширине встречается гораздо реже, особенно в работах опытных дизайнеров. Почему же так происходит, учитывая, что  text-align: justify; присутствует в нашем арсенале со времен CSS 1?
Причина станет очевидной, если вы присмотритесь к «коридорам» на рисунке. Они создают увеличенные межсловные интервалы, призванные выровнять текст слева и справа. Это не только ужасно выглядит, но и ухудшает читабельность. В печатном дизайне выравнивание по ширине всегда сочетается с расстановкой переносов. Поскольку слова при этом разбиваются на слоги, дополнительных пробелов почти не требуется, и текст в результатевыглядит намного естественнее. До недавнего времени включить переносы на веб-странице было настолько сложно, что решение оказывалось хуже самой проблемы. Типичный сценарий предполагал использование кода на стороне сервера, код JavaScript, интерактивные генераторы, а также руки разработчика и безграничное терпение, чтобы расставить мягкие переносы ( ­ ), подсказывая браузеру, в каком месте каждое слово может быть разорвано. Обычно такие трудозатраты себя не оправдывали, и дизайнеры прибегали к другому способу выравнивания текста.

расстановка переносов в тексте css

 

 

Решение

В CSS Text Level 3 появилось новое свойство: hyphens . Оно способно принимать три значения:  none , manual и  auto . Первоначальное значение равно  manual, и оно соответствует существующему в настоящее время поведению: слова всегда можно разбить на слоги вручную, используя мягкие переносы. Очевидно, что  hyphens: none; отключает такое поведение, но поистине волшебных результатов позволяет достигать вот эта очень простая строка CSS-кода: hyphens: auto; Это все, что нам нужно. Результат вы видите на рисунке.

Разумеется, чтобы это работало, необходимо объявить язык посредством HTML-атрибута  lang , но хороший разработчик должен делать это в любом случае, независимо от переносов. Если вам требуется более высокая степень контроля над расстановкой переносов (например, в коротком вступительном тексте), вы все так же можете помочь браузеру, добавив несколько мягких переносов ( ­ ). Свойство  hyphens отдает им приоритет и только после этого начинает работать, выясняя, где еще возможно разбить слова на слоги.


КАК РАБОТАЕТ ОБТЕКАНИЕ ТЕКСТОМ

Как это часто бывает в компьютерных науках, обтекание текстом кажется чем-то простым и прямолинейным, но в действительности это не так. Существует множество алгоритмов, выполняющих данную функцию, среди которых самые популярные - жадный алгоритм (greedy algorithm) и алгоритм Кнут -Пласса (Knuth-Plass algorithm). Жадный алгоритм работает, анализируя одну строку текста за раз и заполняя ее как можно большим количеством слов (или слогов, если используется расстановка переносов). Переход на следующую строку выполняется, когда алгоритм встречает первое слово/слог, которое не умещается в текущую строку. Алгоритм Кнута — Пласса, названный в честь разработавших его инженеров, намного изощреннее. Он рассматривает весь текст целиком и выдает намного более приятные с эстетической точки зрения результаты, хотя обработка текста, конечно же, занимает куда больше времени. В большинстве текстовых редакторов используется алгоритм Кнута-Пласса. Однако в браузерах в настоящее время по причинам, связанным с про изводительностью, реализован жадный алгоритм, поэтому результаты выравнивания текста по ширине не слишком хороши.

Резервное решение для расстановки переносов средствами CSS выглядит довольно изящно. Если свойство  hyphens не поддерживается, то вы получаете выровненный по ширине текст, который выглядит как на рисунке выше. Конечно, его не так приятно читать, и выглядит он неэстетично, но все же такой вариант допустим.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/hyphenation

КОНТРОЛЬ НАД РАССТАНОВКОЙ ПЕРЕНОСОВ
Если вы вышли из дизайнерской среды, возможно, вас коробит такой подход к расстановке переносов, когда их можно только включить или выключить, но нельзя контролировать, как именно слова будут разделены на слоги. Тогда вас порадует новость, что в будущем у нас появятся намного более точные средства управления расстановкой переносов - несколько связанных с этим свойств уже запланированы для CSS Text Level 4 в частности:
•  hyphenate-limit-lines
•  hyphenate-limit-chars
•  hyphenate-limit-zone
•  hyphenate-limit-last
•  hyphenate-character

Десерт на сегодня – видео с подборкой разных интересных моментов - безумных прыжков, трюков, паркура и много чего другого . Смотрите сами:

Прочитано 266 раз
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+