Как найти, где браузер разбивает абзац текста - PullRequest
5 голосов
/ 15 января 2009

Мне нужно добавить разрывы строк в тех позициях, в которых браузер естественным образом добавляет новую строку в абзац текста.

Например:

Это очень длинный текст \ n , который занимает несколько строк в абзаце.

Это абзац, который браузер решил разбить в позиции \ n

Мне нужно найти эту позицию и вставить

Кто-нибудь знает о каких-либо библиотеках или функциях JS, способных сделать это?

Единственное решение, которое я нашел до сих пор, - это удалить токены из абзаца и наблюдать свойство clientHeight, чтобы обнаружить изменение высоты элемента. У меня нет времени, чтобы закончить это, и я хотел бы найти что-то, что уже проверено.

Edit: Мне нужно сделать это потому, что мне нужно точно конвертировать HTML в PDF. Acrobat отображает текст уже, чем браузер. Это приводит к тексту, который разбивается на разные позиции. Мне нужен идентичный рваный край и такое же количество строк в преобразованном PDF.

Edit:

@ dtsazza: Спасибо за продуманный ответ. Не исключено создание редактора макетов, который почти точно соответствует HTML, который я написал на 99%;)

Приложение, над которым я работаю, позволяет пользователю создавать каталог продуктов, перетаскивая «плитки». Плитки имеют фиксированную ширину, абсолютно расположенные элементы div, содержащие изображения и текст. Все элементы стилизованы, поэтому размер шрифта фиксирован. Мое решение по поиску \ n в абзаце приемлемо в 80% случаев, и когда он работает с заданным параграфом, полученный PDF настолько близок к экранной версии, что различия не имеют значения. Абзацы имеют одинаковую высоту (с точностью до пикселя), изображения заменяются версиями с высоким разрешением, а все растровые изображения заменяются на стороне сервера, созданной SVG.

Единственная небольшая разница между моим HTML и PDF заключается в том, что Acrobat отображает текст немного более узко, что приводит к тому, что длина строки немного короче.

Решение Диодея о добавлении диапазонов и нахождении их координат является очень хорошим и должно дать мне местоположение БР. Пожалуйста, помните, что пользователь никогда не увидит HTML-код со вставленными BR - они добавляются так, что преобразование PDF создает абзац точно такого же размера.

Многие люди считают, что это невозможно. У меня уже есть работающее приложение, которое создало чрезвычайно точное преобразование наших документов в HTML-> PDF - мне просто нужно лучшее решение для добавления BR, потому что мое решение иногда пропускает BR. Кстати, когда это работает, мои абзацы имеют ту же высоту, что и HTML-эквиваленты, что является результатом, к которому мы стремимся.

Если кто-то интересуется типом документа, который я конвертирую, вы можете проверить этот скриншот:

http://www.localsa.com.au/brochure/brochure.html

Редактировать: Большое спасибо Диодеусу - ваше предложение было точно.

Решение: для моей ситуации было больше смысла заключать слова в промежутки вместо пробелов.

var text = chapterElement.innerHTML.replace (/ / g, ' ');

text = "" + text + ""; // завернуть первое и последнее слова.

Это оборачивает каждое слово в промежутке. Теперь я могу запросить документ, чтобы получить все слова, перебрать и сравнить y позицию. Когда у вас есть изменения, добавьте br.

Это работает безупречно и дает мне нужные мне результаты - Спасибо!

Ответы [ 5 ]

3 голосов
/ 15 января 2009

Я не думаю, что будет очень чистое решение для этого, если оно вообще есть. Браузер будет передавать абзац в соответствии с доступным пространством, разрывая строки там, где это необходимо. Учтите, что если пользователь изменит размер окна браузера, все абзацы будут перерисованы и почти наверняка изменят свои позиции разрыва. Если пользователь изменяет размер текста на странице, абзацы будут перерисованы с разными точками разрыва строки. Если вы (или какой-либо сценарий на вашей странице) измените размер другого элемента на странице, это изменит объем пространства, доступного для плавающего абзаца, и снова - для других точек разрыва строки.

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

Редактировать : ОК, так что вы хотите визуализировать в PDF так же, как «экранная версия». У вас есть конкретная конкретная версия экрана - с точки зрения размеров окна браузера, пользовательских таблиц стилей, предпочтений шрифта и настроенного размера шрифта? Критическим моментом в HTML является то, что он намеренно не указывает конкретный макет . Он просто описывает, что на странице, что они есть и где они находятся по отношению друг к другу.

Я видел несколько ошибочных попыток, прежде чем создать какой-либо HTML, который будет точно копировать печатное объявление, разработанное в чем-то вроде приложения DTP, в котором определенно необходим абсолютный макет. Эти усилия были обречены на провал из-за природы HTML, и сделать это наоборот (как вы пытаетесь) будет даже хуже , потому что у вас даже нет определенной отправной точки для работа от.

Если предположить, что это все в ваших руках, и вам все равно придется это сделать 1018 *, я бы предложил отказаться от идеи искажения HTML-кода. Посмотрите на программное обеспечение для преобразования PDF - если оно хорошо, оно должно дать вам несколько вариантов кернинга шрифтов и аналогичные настройки. Играя с деталями здесь, вы получите что-то, что приближает рендеринг шрифта в браузере и таким образом разбивает строки в тех же местах.

В противном случае, все, что я могу предложить, это сделать скриншоты браузера и проанализировать их с помощью OCR, чтобы определить, где строки прерываются (для этого не требуется очень точное OCR, поскольку вы все равно знаете, что такое необработанный текст, это, по сути, просто надо посчитать пробелы). Или, может быть, просто вставьте снимок экрана в PDF, если текстовый поиск / выделение не имеет большого значения.

Наконец, выполнение этого вручную, вероятно, единственный способ сделать эту работу окончательно и надежно.

Но на самом деле, это все равно просто неправильно , и любые попытки пересмотреть требования будут лучше. Продолжайте подниматься на один шаг в цепочке - , почему должен иметь PDF такой же рваный край, как и произвольный рендеринг в браузере? Можете ли вы достичь этой цели другим (лучшим) способом?

3 голосов
/ 15 января 2009

Я бы предложил заключить все пробелы в тег span и найти координаты каждого тега. Когда значение Y изменяется, вы находитесь на новой строке.

0 голосов
/ 15 января 2009

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

0 голосов
/ 15 января 2009

Не думаю, что вы сможете сделать это с какой-либо точностью, не встраивая Gecko / WebKit / Trident и не создавая их заново.

0 голосов
/ 15 января 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...