Как определить символ мягкого переноса слова?

Question

[Gilf]

Имеется блок текста, в котором с помощью &shy организован перенос слов. Таким образом расстановка дефисов переноса происходит автоматически. В этом же блоке требуется реализовать правую "висячую пунктуацию". Как получить символ дефиса c помощью JS, автоматически поставленного браузером, чтобы его обработать?

Comments

[Alexander Lashchevsky]

C помощью чего?

[Gilf]

@Evansive regexp его не находит.

[Gilf]

@Evansive & shy, прошу прощения, не заметил автозамены

Answer 1

[Евгений Петров]

codepen.io/cleric/pen/xsdfv
Обычный поиск с помощью RegExp результат не даст — будут найдены все слова.

Для получения результата применяем цикл с exec, найденный текст превращаем в объект Range, у которого можно найти все области с помощью getClientRects. Дальше просто — если количество областей 2 и больше, мы нашли перенесённое слово.

Первоначальная реализация была доработана при активном содействии @iiil, за что всяческие ему благодарности:)

Comments

[Евгений Петров]

@iiil @Gilf
Задача оказалась с подводными камнями:) Значитца теперь с текстовкой всё работает как нужно. Проверьте, если не трудно, на своих текстах.

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

Почему так нужно? Потому что Range для элемента работает так — или мы выделяем весть, или ничего. Только с текстом нам позволено выделять отдельный набор идущих подряд символов.

[Евгений Петров]

@iiil @Gilf
А ещё оказалось, что webkit захватывает в clientRects предыдущую строку, если первым символом в Range оказывается символ после ­...

[Евгений Петров]

@iiil @Gilf
Последние подводные камни устранены. Все элементы перебираются, происходит полное копирование.

Как обычно, свинью подложил webkit (его работа часто неприятно поражает) — на этот раз в работе с текстовыми нодами.

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

Так вот, мне удобней всего было в цикле создавать текстовые ноды. Так вот для webkit 3 текстовых ноды: текст-перенос-текст вовсе не эквивалентно одной текстовой ноде с аналогичным содержанием.

Мучения закончены:) Специально внутри функции всё написал на чистом JS. Она принимает исходный блок и цель. Если цели нет — заменяет блок полностью. Так что если вдруг были динамически навешены обработчики — селяви:)

[Евгений Петров]

@iiil @Gilf да, структура внутри любая — жирные, наклонные, в полосочку — неважно. Всё равно всё копируется.

[Юрий Лобанов]

@Petroveg это реально круто.

Answer 2

[Юрий Лобанов]

@Petroveg а как собственно будет организована висячая пунктуация? В твоем примере мы найдем все слова, которые были перенесены. В этих словах мы можем заменить символ переноса, примерно так:
codepen.io/iiil/pen/pAmtc
Но при таком способе виден пробел в конце строки.

Comments

[Евгений Петров]

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

Кстати, что значит «мы можем найти символ переноса»? Я именно по символам мягкого переноса и ищу с самого начала.

[Юрий Лобанов]

@Petroveg я подправил ответ — это что касается «найти» :)
Но вопрос все равно стоит. Как вообще организуется висячая пунктуация? Нужно символ переноса обернуть в span и подвинуть, нет? Или всю строку и сделать ее ширину больше, чем ширина контейнера на ширину знака переноса. Вопрос ведь именно в том, как найти это тире, чтобы можно было его обработать.

[Евгений Петров]

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

[Юрий Лобанов]

@Petroveg то есть ты спрашиваешь меня, как выглядит висячая пунктуация? ) Да, примерно так я себе это и представляю ) Меня почему вопрос этот и заинтересовал сильно, потому что висячая пунктуация мне нравится, но с типографикой в вебе я как-то не привык запариваться.

[Евгений Петров]

Обнови — неужели вот так нужно?)))

[Юрий Лобанов]

@Petroveg ага, только вот так (отбивка по ширине и дефис, а не длинное тире) :)
codepen.io/iiil/pen/mpjLn
Ну я знал, что ты свой пример добьешь ) Плохо только одно, что ты все же меняешь мягкий перенос на жесткий дефис. С точки зрения типографики ты его испортил :)
«Имеется блок текста, в кото-ром»
Я в моем примере его не заменяю, но там есть другая проблема, о которой я говорил.

[Евгений Петров]

Юра, не меняю — обнови. Там пустота, чтобы в копипасту не попала.

[Юрий Лобанов]

@Petroveg ты только учти, что я не вопрос задавал, а то подумаешь, что я твоим ответом не доволен ) Но в этом случае вот эта проблема: codepen.io/iiil/pen/wqGkj

[Евгений Петров]

@iiil всё, теперь полностью сохраняю исходный текст — символы мягкого переноса на месте, а настроить свой перенос можно как угодно.

[Евгений Петров]

@iiil по просьбам полуночников поставил в пример жустифи.

[Евгений Петров]

@iiil и, кстати, очень хорошо, что ты посмотрел. Вдвоём довели до ума. Но мне просто идея понравилась — совместить три вещи в одном:)

[Юрий Лобанов]

@Petroveg вот теперь все ок :)

[Юрий Лобанов]

@Petroveg ты тока еще длинное тире исправь на дефис https://ru.wikipedia.org/wiki/%D0%9F%D0%B5%D1%80%D...

[Евгений Петров]

@iiil так это и не тире вовсе — так, псевдобласть... Ща ширину-то ей подрежем, сволочуге такой, дабы не позорила меня по части типографики.

[Юрий Лобанов]

@Petroveg и толщину )

[Евгений Петров]

@iiil ну вроде бы всё. Хотя с шириной... Ну не хочется мне коротышку выносить:)

[Юрий Лобанов]

@Petroveg а почему? Ведь висячая пунктуация для чего делается? Для того, чтобы справа при отбивке по ширине не было визуальных пробелов, из-за того, что знаки пунктуации имеют меньший визуальный вес. А так ты получается переборщил, такой знак пунктуации сам по себе весит как обычный знак, его можно и не выносить :) Кстати, не подумай, что придираюсь, но почему не сделать так: codepen.io/iiil/pen/hFdeo :)
При таком случае знак также не попадает в буфер при копировании, а вот использование некоей закрашенной области вместо знака типографы вряд ли одобрят, примут со скрипом :) И вот там небольшой получается пробел

, видимо из-за спанов.

[Евгений Петров]

@iiil
1. При копировании у меня ничего не изменяется — как был текст, так он и остался.
2. Типограф едва ли заметит разницу между моей областью и дефисом.
Вверху мой, внизу родной.

[Юрий Лобанов]

@Petroveg то, что визуально они не отличаются — никто не спорит. Дело только в принципе. А также, к примеру, способы сглаживания или тот же color не будут работать для области.

[Евгений Петров]

@iiil всё-всё. Победил ты меня, богатырь питерский. Поставил я дефис святой в псевдообласть на самое высокое место. Чтоб любоваться и не налюбоваться сиим чудом расчудесным... А за сломанные рёбра не переживай.

Да, Юр, так лучше — я сужу по улучшению и с точки зрения лажовых правил типа высоты в дробных em.

[Юрий Лобанов]

@Petroveg вообще, хороший вопрос, интересный. Таких не много.

[Евгений Петров]

@iiil аха, нетривиальная. Чтоб регуляркой находить позиции, по которым строить Range, у которого искать clientRects, а потом перестраивать... Скажем так — для решения мне пришлось нормально подумать. не 5 минут, и даже не полчаса.

Кстати, более-менее интересные на codepen складирую. А барахло кидаю на jsfiddle.

[Gilf]

Да, решение найдено! Спасибо, мужики :)

[Евгений Петров]

@Gilf ну так и пометьте и эту дискуссию как ответ:) Без неё решение было бы неполным.

[Gilf]

Только происходит смещение, видимо, из-за потери переносов строк:

[Евгений Петров]

@Gilf в каком браузере? Я смотрю codepen.io/cleric/pen/xsdfv и не вижу смещения.

[Gilf]

@Petroveg Chrome v 36.0.1985.143. Если заменить текст на более объемный, в том же codepen, с множеством абзацев - мы получим смещение, при этом абзацы пропадут.

[Gilf]

К примеру: codepen.io/anon/pen/qKIoG

[Евгений Петров]

@Gilf да, проблемы есть. Нужно потом подумать. Но вы-то думайте тоже — вся основа у вас уже есть.