TL; DR
Это общая и желательная функция, которая неоднократно обсуждалась в истории CSS, и в настоящее время разрабатывается спецификация, позволяющая сделать это возможным. К сожалению, реализации мало, и далеко друг от друга, и некоторые разработчики не хотят работать над этим. Делать это с помощью JavaScript - сложная проблема для любого нетривиального макета; такое решение вряд ли будет достаточно быстрым для ваших целей, и вы быстро приблизитесь к разметке, которую вы ожидаете от конвертера PDF в HTML.
Фон
Здесь есть два вопроса: нерегулярный поток текста и исключение текста и других встроенных элементов из произвольной области страницы.
Это не первый случай, когда эта функция обсуждалась для CSS. В частности, текучий текст вокруг нерегулярных плавающих фигур был упомянут в рабочем проекте CSS уровня 1 еще в 1996 году, а демо Эрик Майер рваный плавающий датируется как минимум 2002 годом. просроченная функция!
В июне 2007 года Джеймс Элмор предложил добавить значения position к свойству float, позволяя произвольно размещать элементы на странице, исключая при этом движение других элементов под ним.
SVG 1.2 первоначально определил модель для областей потокового текста и подробно расскажет, как это будет реализовано. К сожалению, последняя версия спецификации (которая все еще находится в разработке) делает это из воды, отметив, что предыдущая работа будет заменена на «расширенный набор возможностей SVG 1.2 Tiny textArea».
Текущий статус (пересмотрен в августе 2012 г.)
В последнее время у нас есть спецификация CSS Exclusion , предложение от Adobe и то, что вы видите в этом видео. По состоянию на август 2012 года они были реализованы в IE 10 RTM и постепенно внедряются в WebKit, но разработчики, работающие на других поставщиков, выразили смешанные чувства по поводу предложения. *
Adobe поддерживает удобную матрицу поддержки для удобства.
Взломать Кашель"Полифиллинг"?
Было бы трудно добиться подобного эффекта с помощью JavaScript, и еще сложнее сделать это эффективно. Я могу вспомнить два очень наивных подхода, чтобы освободить место для абсолютно позиционированного элемента в регионе:
- «блокировать» пространство для элемента, используя стратегически вставленные строки
span s; или
- окружите каждое слово элементом
span и стилизуйте каждое слово индивидуально, чтобы освободить место для исключенного элемента с помощью отступов.
Я взломал очень сломанную демонстрацию того, как может работать второй подход. Это ужасно, глючит и легко ломается. Я действительно потратил несколько недель после ответа на этот вопрос, работая над полифилом для спецификации Исключения, но сдался, потому что было слишком много ошибок и проблем с производительностью.
У вас будут многочисленные проблемы с любым подходом: столбцы, выравнивание текста, ошибочные дочерние элементы (особенно плавающие или позиционированные элементы!), Различные граничные условия, ужасные вещи, если вы измените HTML, переносы - милосердные небеса, я даже не знаю хотите подумать о переносе слов и, конечно, потенциально великолепных проблемах производительности после учета этих вещей.
Проблемы производительности могут быть несколько улучшены; например, я использовал elementFromPoint, чтобы попытаться получить span, содержащий непосредственно первое перекрывающееся слово, а некоторые браузеры даже поддерживают caretPositionFromPoint, что также может помочь. Я думаю, что, проделав большую работу, вы могли бы сделать что-то, что довольно хорошо работает для статического контента; но сделать это достаточно быстро, чтобы вы могли перетащить его с помощью мыши? Моя демонстрационная страница содержит очень мало полезного контента и не решает ни одной из сложнейших проблем, с которыми вам придется столкнуться, чтобы сделать эту работу на реальных веб-страницах. Даже если вы сможете обойти все эти проблемы, сделать его достаточно быстрым, чтобы плавно перемещаться, было бы очень сложно.
* Я очень надеюсь, что поставщики будут внедрять исключения CSS. Люди просят об этих функциях с самых ранних дней CSS, и это общая и законная цель визуального дизайна как на экране, так и в печати.