Отрисовать текст блоком, учитывая отступы

[wertymne2]

Добрый день всем! У меня сложилась интереснейшая задача, над которой я сейчас бьюсь. На входе есть textarea с определенной позицией (absolute), на фоне которой находится изображение (все это на js в клиентской части). Мне нужно отрисовать картинку, которая будет содержать точно такой же текст с точно такими же переносами (как перенеслись строки по ширине textarea) на фоне точно такой же картинки. Как отрисовать текст я знаю, но никак не могу придумать, как словить эти переносы, когда это не \n.

Ранее, пробовал создать div c точно такими же стилями и циклом отнимать по символу текста, чтобы следить за тем, изменилась ли высота. Вроде оно, но не оно, так как потеряв один символ, текст может вместиться на строке. Мне же нужно строго отловить появившиеся переносы, чтобы на выходе там везде были \n, ну и передать на сервер.
Еще ранее пытался обойти это на серверной части, но не нашел метода в библиотеке gd, которая бы рисовала текст, перенося его по контейнеру, разве что нашел метод, рассчитывающий ширину (imagettfbbox), но там выходит подобный цикл первого варианта, но нагрузка переносится на сервер, в чем смысла не вижу.

Как-то так.. Помогите, кто может

 

[fixxxer]

Шрифты рендерятся по-разному в разных ОС, так что плюс-минус один символ у тебя будет даже в той самой textarea на windows/os x/linux.

 

[MiksIr]

Ладно бы ОС, в разных браузерах уже могут быть различия.

 

[wertymne2]

Мне хотя-бы максимально близко. Как это можно посчитать конкретно для той ОС, в которой мы запускаем браузер. Или на серверной стороне..

 

[флоппик]

Я бы сделал скрытый дубликат текстарии со скопированными размерами, и использовал бы https://developer.mozilla.org/en-US/docs/Web/API/Range.getBoundingClientRect

 

[wertymne2]

Да размеры и позицию я могу посчитать. Но что помимо этого может дать этот метод?

 

[флоппик]

wertymne2, можно почитать описание к нему. Он возвращает линейные размеры выделения. Если высота выделения больше высоты одной строки, очевидно что текст имеет перенос. Передвигая выделение, можно определить, где именно.

 

[wertymne2]

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

 

[fixxxer]

Не должно такого быть, может, ты пару пикселей где-то теряешь на margin/padding/border. Попробуй то же самое вручную в developer-консоли, увидишь наверняка.

Если итоговая задача - рендеринг на сервере - в любом случае надо заложить несколько пикселей запаса.

 

[флоппик]

wertymne2, выделение не вызывает пересчет text-flow, в отличие от перестройки самого текста, и ты про выделение ничего не писал.

 

[MiksIr]

Не должно такого быть, может, ты пару пикселей где-то теряешь на margin/padding/border.

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

 

[wertymne2]

wertymne2, выделение не вызывает пересчет text-flow, в отличие от перестройки самого текста, и ты про выделение ничего не писал.

Я ошибся. То есть, мне нужно выделить текст программно и измерить этим методом? А есть ли более кроссбраузерные варианты, чем этот метод?

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

Мне не принципиальны пару пикселей - главное, чтобы в целом переносы были там, где нужно - пиксели можно прибавить

 

[MiksIr]

Речь о том, что даже один пиксель может дать (и дает) разные переносы.

 

[wertymne2]

Главное, чтобы на сервере было то же самое, что увидел пользователь

 

[AnrDaemon]

Не будет. Не надо хотеть неправильного.

 

[wertymne2]

А почему не будет? Ведь клиент пользователя сам даст то, что он видит серверу
Или у Вас есть более интересный вариант?

 

[AnrDaemon]

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

P.S.
Огласите конечную цель подобного экзерсиса, вообще… Может, есть куда более простые средства достижения нужной вам цели.

 

[wertymne2]

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

 

[hell0w0rd]

В чем проблема сделать свою textarea, раз уже такая задача?

 

[fixxxer]

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

Внезапно flash. Сервер тогда не нужен вообще.