如何在可移动图像周围包装文本？

Question

我正在尝试实现一个用户可以动态输入文本和上传图像的界面.我希望界面具有以下功能:

1. 图像应该是可移动的,即能够拖放图像.
2. 输入的文本应自动环绕图像.

我怎么能做到这一点？我查看了一些jquery脚本,并查看了HTML5的canvas功能,但无法找到解决方案.

谢谢你的时间.

编辑:此视频显示了我希望获得的效果:

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

Answer 1

TL; DR

这是CSS历史上多次讨论过的常见且理想的特性,并且正在开发一种规范以使其成为可能.不幸的是,实现很少而且很远,而且一些实现者不愿意在它上面工作.对任何非平凡的布局来说,使用JavaScript是一个复杂的问题; 这样的解决方案不太可能足够快,您将快速接近PDF-to-HTML转换器所期望的那种标记.

背景

这里有两个问题:不规则的文本流和从页面的任意区域中排除文本和其他内联元素.

这不是第一次为CSS讨论这两个功能.特别是在1996年的CSS 1级工作草案中提到了不规则漂浮形状周围的流动文本,而Eric Meyer的参差不齐的浮动演示至少可以追溯到2002年.这是一个姗姗来迟的特征!

2007年6月,James Elmore建议position为该float属性添加值,使元素可以在页面上任意定位,同时排除其他元素在下面流动.

SVG 1.2最初为流动的文本区域指定了一个模型,并详细介绍了如何实现它.不幸的是,该规范的最新版本(目前仍处于开发阶段)通过注意到之前的工作将被"SVG 1.2 Tiny textArea功能的超集"取代而将其打败.

现状(2012年8月修订)

最近,我们有CSS排除规范,Adobe的提案以及您在该视频中显示的内容.截至2012年8月,这些已在IE 10 RTM中实施,并且正在WebKit中慢慢推出,但为其他供应商工作的开发人员对该提案表达了复杂的感受.*

• Trident(IE):在IE10平台预览中实现,可在RTM中使用.(在IE Test Drive中称为"定位浮动",类似于James Elmore的提议.)
• WebKit(Chrome,Safari):部分实现,补丁逐渐被批准在WebKit主干中登陆,这意味着我们应该很快就会看到这一点.(错误57311 - CSSRegions:在WebKit中添加排除支持.)
• Gecko(火狐):不太可能很快实施; bug目前已解决为WONTFIX.(错误672053 - 添加对CSS3定位浮动的支持 -注意David Baron关于互操作性的异议.)
• Presto(Opera):尚未实施.(Bug跟踪器是私密的;如果有一个开放的bug,我试过询问那些曾经合群的Bruce Lawson,但他不能评论他们的路线图.)

Adobe提供了一个方便的支持矩阵,以便于参考.

哈克咳嗽 "Polyfilling"？

使用JavaScript很难实现类似的效果,甚至更难以有效地完成.我可以想到两种非常天真的方法,为一个地区的绝对定位元素腾出空间:

1. 使用策略性插入的内联来"阻挡"元素的空间span; 要么
2. 用一个span元素包围每个单词,并单独设置每个单词的样式,以便使用填充为排除的元素腾出空间.

我已经破解了第二种方法可能如何工作的非常破碎的演示.它太可怕了,马车很容易打破.实际上我在回答这个问题后花了几个星期来处理Exclusion规范的polyfill,但是因为有太多的bug和性能问题而放弃了.

你会遇到无数问题:列,文本对齐,错误的子元素(特别是浮动或定位的元素!),各种边缘条件,如果你改变HTML,连字符 - 仁慈的天堂,我甚至不想想想连字 - 当然,在考虑到这些事情之后,可能会出现很大的性能问题.

性能问题可以在某种程度上得到改善; 例如,我曾经elementFromPoint尝试span直接包含第一个重叠的单词,有些浏览器甚至支持caretPositionFromPoint,这也可能有所帮助.我认为通过大量的工作,你可以制作一些非常适合静态内容的东西; 但要足够快,你可以用鼠标拖动它？我的演示页面包含了很少的内容,并没有解决您在真实网页上进行此项工作时遇到的任何令人费解的复杂问题.即使你可以解决所有这些问题,使其足够快以顺利拖延也将是非常具有挑战性的.

*我强烈希望供应商实施CSS排除.自CSS早期以来,人们一直在寻求这些功能,并且它在屏幕和印刷品上都是一种常见且合法的视觉设计目标.

Answer 2

在IE10中可以使用定位浮点数:http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html

其他浏览器尚未支持此功能.

Answer 3

好吧,至少对于包装,如果你想使用jQuery,你可以使用这个jQSlickWrap插件让文本环绕不规则形状的图像.它使用了漂亮的HTML5画布技术.

请参阅此处的文本换行示例:http://www.jwf.us/projects/jQSlickWrap/example2.html

希望能帮助到你!