Как я могу обернуть текст вокруг движущегося изображения?

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

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

Как я мог это сделать? Я просмотрел некоторые скрипты jquery, а также просмотрел возможности холста HTML5, но не смог найти решение.

Спасибо за ваше время.

EDIT: Это видео показывает эффект, который я хочу получить:

http://www.youtube.com/watch?v=mYnj4Mz9g9g

ОТВЕТЫ

Ответ 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, но разработчики, работающие с другими поставщиками, выразили смешанные чувства о предложении. *

Adobe поддерживает удобную матрицу поддержки для удобства.

Hackcough "Polyfilling"?

Было бы трудно добиться аналогичного эффекта с помощью JavaScript, и еще труднее сделать это эффективно. Я могу представить два очень наивных подхода, чтобы создать место для абсолютно позиционированного элемента в регионе:

  • "блокировать" пространство для элемента, используя стратегически вставленный встроенный span s; или
  • окружает каждое слово с помощью элемента span и стильно каждое слово индивидуально, чтобы освободить место для исключенного элемента с помощью прокладки.

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

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

Проблемы с производительностью могут несколько улучшиться; например, я использовал elementFromPoint, чтобы попытаться получить span, содержащий первое перекрывающееся слово, и некоторые браузеры даже поддерживают caretPositionFromPoint, что также может помочь. Я думаю, что с большой работой вы можете сделать что-то, что очень хорошо работает для статического контента; но сделать его достаточно быстрым, чтобы вы могли перетащить его с помощью мыши? Моя демонстрационная страница имеет очень мало контента и не затрагивает ни одну из сложнейших проблем, с которыми вам придется столкнуться, чтобы сделать эту работу на реальных веб-страницах. Даже если вы можете обойти все эти проблемы, сделать его достаточно быстрым, чтобы плавно перемещаться, было бы очень сложно.

* Я очень надеюсь, что поставщики будут реализовывать исключения CSS. Люди просят эти функции с самых ранних дней CSS, и это общая и законная цель визуального дизайна как на экране, так и в печати. ​​

Ответ 3

Ну, по крайней мере, для упаковки, если вы хотите использовать jQuery, вы можете использовать этот jQSlickWrap плагин для обтекания текста вокруг неправильной формы образ. Он использует хорошую технику холста HTML5.

Смотрите пример переноса текста здесь: http://www.jwf.us/projects/jQSlickWrap/example2.html

Надеюсь, что это поможет!