Ответ 1
TL; DR
Это обычная и желательная функция, которая неоднократно обсуждалась в истории CSS, и в разработке есть спецификация, позволяющая сделать это возможным. К сожалению, реализации мало и далеко друг от друга, и некоторые разработчики неохотно работают над этим. Выполнение этого с помощью JavaScript - сложная проблема для любого нетривиального макета; такое решение вряд ли будет достаточно быстрым для ваших целей, и вы быстро подходите к разметке, которую вы ожидаете от конвертера PDF-to-HTML.
Фон
Здесь есть два вопроса: нерегулярный поток текста и исключение текста и других встроенных элементов из произвольной области страницы.
Это не первый раз, когда обсуждалась одна из функций для CSS. В частности, поток текста вокруг нерегулярных плавающих фигур был упомянутый в рабочей статье CSS 1-го уровня еще в 1996 году, а Eric Meyer оборванная демо-версия float датируется по крайней мере с 2002 года. Это долгосрочная функция!
В июне 2007 года Джеймс Элмор предложил добавить значения position к свойству float, позволяя элементам произвольно размещаться на странице, исключая при этом другие элементы.
В SVG 1.2 изначально была указана модель для областей с текущим текстом и подробно рассматривается, как это будет реализовано. К сожалению, последняя версия спецификации (которая все еще находится в разработке) удаляет это из воды, отмечая, что предыдущая работа будет заменена на "надмножество SVG 1.2 Tiny textArea".
Текущее состояние (пересмотрено в августе 2012 г.)
Совсем недавно у нас есть спецификация CSS Exclusions, предложение от Adobe и то, что вы видите в этом видео. По состоянию на август 2012 года они были реализованы в RTM в IE 10 и медленно выходят в WebKit, но разработчики, работающие с другими поставщиками, выразили смешанные чувства о предложении. *
- Trident (IE):, реализованный в предварительном просмотре платформы IE10 и доступный в RTM. (Называется как "позиционированные поплавки" в IE Test Drive, аналогично предложению Джеймса Элмора.)
- WebKit (Chrome, Safari): частично реализована с постепенным утверждением патчей для посадки в багажнике WebKit, то есть мы должны начать видеть это в ближайшее время. (Ошибка 57311 - CSSRegions: добавление поддержки исключений в WebKit.)
- Gecko (Firefox): вряд ли скоро будет реализован; ошибка в настоящее время разрешена как WONTFIX. (Ошибка 672053 - Добавить поддержку CSS3 позиционированных поплавков - отметьте возражения Дэвида Барона относительно совместимости.)
- Престо (Opera): еще не реализовано. (Отслеживание ошибок является частным, я пробовал спрашивать когда-нибудь общительного Брюса Лоусона, была ли открытая ошибка, но ему не хватает комментариев по их дорожной карте.)
Adobe поддерживает удобную матрицу поддержки для удобства.
Hackcough "Polyfilling"?
Было бы трудно добиться аналогичного эффекта с помощью JavaScript, и еще труднее сделать это эффективно. Я могу представить два очень наивных подхода, чтобы создать место для абсолютно позиционированного элемента в регионе:
- "блокировать" пространство для элемента, используя стратегически вставленный встроенный
spans; или - окружает каждое слово с помощью элемента
spanи стильно каждое слово индивидуально, чтобы освободить место для исключенного элемента с помощью прокладки.
Я взломал очень сломанную демонстрацию о том, как может работать второй подход. Это ужасно, багги и легко сломается. Я действительно провел несколько недель после ответа на этот вопрос, работая над polyfill для спецификации Exclusions, но отказался, потому что было слишком много ошибок и проблем с производительностью.
У вас будет множество проблем с любым из них: столбцы, выравнивание текста, ошибочные дочерние элементы (особенно плавающие или позиционированные элементы!), различные граничные условия, ужасные вещи, если вы меняете HTML, перенос миров, небеса, я не даже хотят думать о переносе - и, конечно же, потенциально великолепные проблемы с производительностью после учета этих вещей.
Проблемы с производительностью могут несколько улучшиться; например, я использовал elementFromPoint, чтобы попытаться получить span, содержащий первое перекрывающееся слово, и некоторые браузеры даже поддерживают caretPositionFromPoint, что также может помочь. Я думаю, что с большой работой вы можете сделать что-то, что очень хорошо работает для статического контента; но сделать его достаточно быстрым, чтобы вы могли перетащить его с помощью мыши? Моя демонстрационная страница имеет очень мало контента и не затрагивает ни одну из сложнейших проблем, с которыми вам придется столкнуться, чтобы сделать эту работу на реальных веб-страницах. Даже если вы можете обойти все эти проблемы, сделать его достаточно быстрым, чтобы плавно перемещаться, было бы очень сложно.
* Я очень надеюсь, что поставщики будут реализовывать исключения CSS. Люди просят эти функции с самых ранних дней CSS, и это общая и законная цель визуального дизайна как на экране, так и в печати.