Расстановка переносов на страницах сайта

В какой-то статье проскользывала мысль о расстановке переносов на страницах сайта.

Кто-нибудь пробовал? Или хотя бы знает, куда копать?

Конечно, динамически вычислять конец каждой строки и разбивать ее переносом - скорее всего утопия. А вот добавление "*" между слогами в каждом слове - наверное можно попробовать. Или нет?

0

Зачем разбивать строку, если можно родителю указать размеры и браузер сам ее будет переносить? Причем, с вариациями align. Или я не понял вопроса?

0

Имеется в виду перенос с разбиением слов. Чтобы при выравнивании justify не было дырок между словами.

Добавлено через 29 секунд
Слово пере-
носится на сле-
дующую стро-
ку

Добавлено через 10 секунд
Как-то так)

0

Александр216, Имеете ввиду переносы слов?

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

А стоит ли оно того? Разорванные слова сложнее читать.

0

Обычно оформление текста (в т.ч. и содержание) лежит на дизайнере, а не разработчике. Это задача составителя текста — избавиться от "коридоров". И программно такие задачи как правило не решают)
Плюс типографы часто рекомендуют в больших текстах использовать все же выравнивание по левому краю именно из-за этого

0

Сообщение от Vovan-VE А стоит ли оно того? Разорванные слова сложнее читать.

Ну, в книжной же печати это используется. И ничего, читатели справляются). Переносится не каждое слово, а только то, которое не помещается в конце строки.

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

Добавлено через 8 минут

Сообщение от philin Это задача составителя текста — избавиться от "коридоров".

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

Да и вообще, авторский текст - это авторский текст. Кромсать его ради того, чтобы красиво ложился на страницу - ИМХО маразм. (Имеется в виду текст статьи или книги, а не претексты новостей, рекламные и т.п. тексты, которые, конечно, должны учитывать формат сайта.

Сообщение от philin И программно такие задачи как правило не решают)

Именно программно. Чтобы можно было любой текст в админку зафигачить и быть уверенным, что он будет цивильно отображаться. Согласитесь, дизайнеру трудновато будет по восемь раз в день создавать макет для каждой новости. А программисту вручную его кодить.

Добавлено через 4 минуты
Собственно, мы ушли от темы. Давайте представим, что необходимость задачи уже обоснована.
Например, есть заказчик, который готов заплатить любые деньги, лишь бы его сайт был с переносами.
Как бы мы с вами решали эту задачу?

0

Книгопечатание - отдельная профессиональная деятельность. Там свои законы, свой софт и все равно процесс верстки контролируется человеком.
Когда разбирался в вопросах типографии, не раз натыкался на совет в статьях: относительно большой текст, выровненный по левому краю, читается лучше распределенного с разрывами и коридорами.
Идеальный вариант, конечно, книжный. Но такого сложно добиться автоматически.

Как вариант, могу предложить громоздкое JS-решение (несколько проще для моноширного шрифта)
Текст действительно размечаем по слогам. По слогу/слову добавляем к строчке в невидимый блок и смотрим на его ширину. Как только превысит допустимую, отменяем последний слог, вставляем строку с переносом в документ, очищаем невидимый блок. Выравнивание сохраняем распределенное. Лишний разрыв между словами уменьшится в среднем примерно от (средняя длина слова/среднее кол-во слов в строке) до (среднее кол-во букв в слоге/среднее кол-во слогов в строке)
Расчеты можно перенести на сторону сервера, но придется считать по размерам букв конкретного шрифта

1

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

Добавлено через 1 минуту
На стороне сервера это можно сделать только тогда, когда ширина текстового блока фиксирована.
Да и то сомневаюсь: точный размер букв, по-моему, тоже зависит от браузера.

0

Словари. Да, огромные. Или поискать сайты с открытым API.
Кстати, небольшое усовершенствование: добавлять по слову, пока не превысим лимит. И только тогда крайнее слово делить на слоги и подставлять. Причем, если без слова не хватает совсем немного (пикселей 20, скажем), тогда сразу обрезать строку.

На стороне сервера - тут даже больше проблем. Нужно получить точные размеры блока — скорее всего, уже после загрузки, AJAX-ом.

0

Очень громоздко(

0

Ничего лучше в голову не приходит. Ждем, когда в браузерах появится поддержка. Для английского языка подобное уже есть, где-то читал. На Хабре, чтоли...

0

Не исключаю Ваш вариант. Но пока мне кажется, что если узнать способ разбивки на слоги (получить из словаря), то проще в весь текст вставить мягкие переносы ­ которые будут использоваться при необходимости. Причем делать это один раз, на стадии добавления материала. Как считаете?

Минус - в том, что увеличится количество символов в тексте (хотя не думаю, что намного. Процентов на 20).

Плюсы - меньше операций при загрузке сайта у пользователя; минимальная нагрузка на сервер, т.к. скрипт запускается только один раз.

Трудность - в подключении словарей/сайтов, о которых Вы писали. Никогда не сталкивался с этим. Где можно про это почитать?

0

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

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

0

Есть готовый плагин hypen, который добавляет в уже готовый текст на стороне клиента, в браузере "возможные переносы" *- ­

Александр216, http://htmlbook.ru/blog/perenosy-slov

0

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

2. Сделать все автоматически в любом случае не получится. Почему? Да хотя бы взять языки, далеко не все браузеры из поддерживают в принципе и Ваш конкретный язык в частности или тем более если у Вас на странице несколько языков вперемешку.

3. Единственное кросс-браузерное решение, это использовать кросс-браузерные символы мягкого переноса. Это дает стабильные прогнозируемые переносы в нужных местах на всех устройствах.

4. Делается это путем вставления мнемокодов "*" в html текста в местах где вы считаете необходимым сделать разрыв, в случае необходимости. Если необходимости нет, то отображается слово целиком, в случае если есть возможность переноса, слово будет разбито и символ дефиса будет добавлен к части слова которое остается, другая часть будет перенесена.

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

6. Единственная проблема, которая, существовала раньше, это собственно ручное нахождение и собственно расстановка символов переноса. Например, вместо слова "собака" нужно набрать "со*ба*ка" и нигде не ошибиться.

7. Сейчас есть много сервисов, которые делают это это мгновенно, просто вставляете слово собака и копируете слово уже с мягкими переносами. Я рекомендую обратить внимание на этот сервис расстановки мягких переносов. Почему именно он:
- поддержка любых символов переноса
- можно указать минимальную длину слова которое необходимо разбивать
(например, разбивать только длинные слова, которые реально портят картину)
- можно указать язык (ru/en или смешанный) актуально для мультиязычных сайтов
- реверс инженеринг, т.е. после того как вы провернули эту операцию и через месяц решили изменить текст, Вам не нужно опять все набивать вручную просто вставляете текст с мягкими переносами откуда вы его взяли, и она отображает текст без переносов, изменяете его как Вам нужно и копируете уже с мягкими переносами.

Если не согласны с любым из доводов, пишите, давай те обсудим.

0